:root {
  color-scheme: light dark;

  /* Opacidade do fundo do painel (0 = totalmente transparente, deixando ver o
     desktop atrás com nitidez; 1 = sólido). Controlada pelo slider "Transparência
     do Calendário" em Configurações (flyout.js aplica configuracoes.transparenciaFlyout
     nesta variável a cada carregamento — em 0% vira 1, ou seja, totalmente sólido).
     Este valor é só o fallback antes do JS rodar — combina com o padrão de 10% de
     transparência (opacidade 0.9). */
  --opacidade-flyout: 0.9;
  /* Reforço atrás de textos "soltos" (sem card por trás, ex.: cabeçalhos de
     dia): mais opaco que o fundo do painel, pra manter a legibilidade sobre
     qualquer papel de parede mesmo com o fundo bem transparente. */
  --opacidade-reforco-texto: 0.78;

  --cor-fundo-rgb: 243 243 243;
  --cor-fundo-item: #ffffff;
  --cor-fundo-item-rgb: 255 255 255;
  --cor-texto: #1a1a1a;
  --cor-texto-secundario: #5f5f5f;
  --cor-borda: rgba(0, 0, 0, 0.08);
  --cor-destaque-fundo: #e8f0fe;
  --cor-destaque-borda: #2d7dd2;
  --sombra: 0 8px 28px rgba(0, 0, 0, 0.22);

  --cor-fundo: rgb(var(--cor-fundo-rgb) / var(--opacidade-flyout));
  /* Fundo 100% sólido, imune ao slider de transparência. Usado pelas
     sobreposições que abrem POR CIMA do calendário (form de evento e modal
     de assinatura): ali a transparência empilharia com a do painel de trás e
     o conteúdo do calendário atravessaria o formulário, prejudicando a leitura. */
  --cor-fundo-solido: rgb(var(--cor-fundo-rgb));
  --cor-reforco-texto: rgb(var(--cor-fundo-item-rgb) / var(--opacidade-reforco-texto));
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo-rgb: 32 32 32;
    --cor-fundo-item: #2b2b2b;
    --cor-fundo-item-rgb: 43 43 43;
    --cor-texto: #f2f2f2;
    --cor-texto-secundario: #a8a8a8;
    --cor-borda: rgba(255, 255, 255, 0.08);
    --cor-destaque-fundo: #223349;
    --cor-destaque-borda: #4d9bf0;
    --sombra: 0 8px 28px rgba(0, 0, 0, 0.5);
  }
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: transparent;
  overflow: hidden;
}

body {
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  color: var(--cor-texto);
  -webkit-font-smoothing: antialiased;
}

.flyout {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--cor-fundo);
  border-radius: 8px;
  box-shadow: var(--sombra);
  border: 1px solid var(--cor-borda);
  overflow: hidden;
}

.flyout__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--cor-borda);
  /* Texto "solto" direto sobre o acrylic: reforço sutil de fundo pra manter
     a legibilidade sobre qualquer papel de parede, sem virar um bloco sólido. */
  background: var(--cor-reforco-texto);
}

.flyout__data-hoje {
  /* Cresce pra empurrar os botões (lupa e "+") para a borda direita do header. */
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
}

.flyout__novo {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--cor-borda);
  border-radius: 6px;
  background: var(--cor-fundo-item);
  color: var(--cor-texto);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.flyout__novo:hover {
  border-color: var(--cor-destaque-borda);
  color: var(--cor-destaque-borda);
}

/* Lupa: mesmo chip do "+", mas com ícone SVG — centraliza via flex. */
.flyout__novo--busca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Modo busca do header --- */

/* A troca data+botões ↔ campo de busca é por display (classe no header), e não
   pelo atributo [hidden]: o hidden do botão "+" já é gerenciado pelo JS
   (visível só com calendário gravável) e não pode ser atropelado pela busca. */
.flyout__busca {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.flyout__header--busca .flyout__busca {
  display: flex;
}

.flyout__header--busca .flyout__data-hoje,
.flyout__header--busca .flyout__novo {
  display: none;
}

.flyout__busca-campo {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-item);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 13px;
}

.flyout__busca-campo:focus {
  outline: none;
  border-color: var(--cor-destaque-borda);
}

.flyout__busca-fechar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--cor-texto);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.flyout__busca-fechar:hover {
  background: var(--cor-fundo-item);
}

/* --- Formulário de novo evento --- */

/* Cobre o painel inteiro, então o fundo é sólido e não --cor-fundo — que aqui
   empilharia em cima do fundo do painel e deixaria o calendário atravessar. */
.form-evento {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: var(--cor-fundo-solido);
  border-radius: 8px;
}

.form-evento[hidden] {
  display: none;
}

.form-evento__cabecalho {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-reforco-texto);
}

.form-evento__titulo {
  font-size: 16px;
  font-weight: 600;
}

.form-evento__fechar {
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--cor-texto);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.form-evento__fechar:hover {
  background: var(--cor-fundo-item);
}

.form-evento__corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-evento__campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-evento__campo > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--cor-texto-secundario);
}

.form-evento__corpo input[type="text"],
.form-evento__corpo input[type="date"],
.form-evento__corpo input[type="time"],
.form-evento__corpo textarea,
.form-evento__corpo select {
  width: 100%;
  padding: 7px 8px;
  border-radius: 6px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-item);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 13px;
}

.form-evento__corpo textarea {
  resize: vertical;
  min-height: 40px;
}

.form-evento__corpo input:focus,
.form-evento__corpo textarea:focus,
.form-evento__corpo select:focus {
  outline: none;
  border-color: var(--cor-destaque-borda);
}

/* Somente-leitura (recorrentes/multi-dia CalDAV) e select de destino travado
   na edição: a regra base acima fixa background/color e esconderia o cinza
   nativo do Chromium — sem isto, o campo inerte parece editável. */
.form-evento__corpo input:disabled,
.form-evento__corpo textarea:disabled,
.form-evento__corpo select:disabled {
  opacity: 0.6;
  cursor: default;
}

.form-evento__horas {
  display: flex;
  gap: 10px;
}

.form-evento__horas .form-evento__campo {
  flex: 1 1 0;
}

.form-evento__horas[hidden] {
  display: none;
}

/* Campos ocultáveis do bloco de recorrência (Repetir / Termina / data): o
   display:flex de .form-evento__campo (regra de autor) vence o [hidden] do
   navegador — mesmo caso do .form-evento__horas acima. */
#ne-repetir-campo[hidden],
#ne-termina-campo[hidden],
#ne-termina-data-campo[hidden] {
  display: none;
}

.form-evento__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.form-evento__checkbox input {
  accent-color: var(--cor-destaque-borda);
}

/* O rótulo inteiro é clicável (cursor: pointer acima) e também aciona o
   checkbox; com o campo desabilitado, o pointer no texto mentiria. Só o
   cursor: o esmaecimento fica no próprio input (regra do corpo abaixo),
   como nos demais campos, cujos rótulos seguem em cor plena. */
.form-evento__checkbox:has(input:disabled) {
  cursor: default;
}

.form-evento__erro {
  margin: 0;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  background: rgba(200, 60, 40, 0.12);
  color: #b3392a;
}

.form-evento__erro[hidden] {
  display: none;
}

/* "Assinar" embutido na frase do erro de recurso bloqueado (gate freemium):
   link sublinhado na própria cor do erro, sem virar outro botão. */
.form-evento__erro-assinar {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  .form-evento__erro {
    background: rgba(255, 107, 94, 0.16);
    color: #ff8a7a;
  }

  /* Verificação de assinatura negada/erro (modal): mesma cor de erro. */
  .assinatura__verificacao--erro {
    color: #ff8a7a;
  }
}

.form-evento__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.form-evento__btn {
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--cor-borda);
}

.form-evento__btn--secundario {
  background: var(--cor-fundo-item);
  color: var(--cor-texto);
}

.form-evento__btn--primario {
  background: var(--cor-destaque-borda);
  border-color: var(--cor-destaque-borda);
  color: #ffffff;
}

.form-evento__btn--primario:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Botão Excluir: empurrado para a esquerda, separado de Cancelar/Salvar. */
.form-evento__btn--perigo {
  background: transparent;
  border-color: transparent;
  color: #c0392b;
}

.form-evento__btn--perigo:hover {
  background: rgba(200, 60, 40, 0.12);
}

.form-evento__btn--perigo:disabled {
  opacity: 0.5;
  cursor: default;
  background: transparent;
}

#ne-excluir {
  margin-right: auto;
}

@media (prefers-color-scheme: dark) {
  .form-evento__btn--perigo {
    color: #ff8a7a;
  }
  .form-evento__btn--perigo:hover {
    background: rgba(255, 107, 94, 0.16);
  }
}

/* Aviso de recorrente (somente leitura): tom neutro, sem cara de erro. */
.form-evento__aviso {
  margin: 0;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-style: italic;
  color: var(--cor-texto-secundario);
  background: var(--cor-reforco-texto);
}

.form-evento__aviso[hidden] {
  display: none;
}

/* Confirmação inline de exclusão (sem diálogo nativo). */
.form-evento__confirmar {
  margin-top: 8px;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-item);
}

.form-evento__confirmar[hidden] {
  display: none;
}

.form-evento__confirmar-texto {
  margin: 0 0 8px;
  font-size: 13px;
}

.form-evento__confirmar-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  /* O seletor de escopo de recorrentes tem 3 botões de rótulo longo: deixa
     quebrar em duas linhas em vez de estourar a largura do formulário. */
  flex-wrap: wrap;
}

/* --- Modal de assinatura (gate freemium) --- */

/* Sobreposição sobre a área do flyout, na mesma mecânica do #form-evento:
   position absolute + inset 0 + z-index acima da lista, exibido via [hidden] —
   inclusive o fundo, que é --cor-fundo-solido pelo mesmo motivo. */
.assinatura {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: var(--cor-fundo-solido);
  border-radius: 8px;
}

.assinatura[hidden] {
  display: none;
}

.assinatura__cabecalho {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-reforco-texto);
}

.assinatura__titulo {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.assinatura__fechar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--cor-texto);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.assinatura__fechar:hover {
  background: var(--cor-fundo-item);
}

.assinatura__corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.assinatura__subtitulo {
  margin: 0;
  color: var(--cor-texto-secundario);
  line-height: 1.4;
}

/* Chamada em negrito, na cor de texto principal para contrastar com o
   subtítulo (secundário) logo acima; o respiro vem do gap do corpo. */
.assinatura__chamada {
  margin: 0;
  font-weight: 700;
}

.assinatura__beneficios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.assinatura__beneficio {
  position: relative;
  padding-left: 24px;
  line-height: 1.35;
}

/* Marca ✓ à esquerda, com a cor de destaque do tema (acompanha claro/escuro). */
.assinatura__beneficio::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cor-destaque-borda);
  font-weight: 700;
}

.assinatura__planos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Opção B: dois planos empilhados, cada um um "card" com o mesmo padding (a
   borda transparente do mensal mantém os dois botões alinhados na mesma
   largura). O anual é levemente realçado — selo + borda e fundo de destaque —
   sem ofuscar o mensal; os dois botões têm peso igual (ambos primários). */
.assinatura__plano {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.assinatura__plano--destaque {
  border-color: var(--cor-destaque-borda);
  background: var(--cor-destaque-fundo);
}

.assinatura__plano-selo {
  position: absolute;
  top: -9px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cor-destaque-borda);
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}

.assinatura__plano-detalhe {
  font-size: 11px;
  color: var(--cor-texto-secundario);
  line-height: 1.3;
}

.assinatura__rodape {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 16px;
  border-top: 1px solid var(--cor-borda);
}

/* Mesma aparência dos botões do form-evento, mas em largura total por causa
   dos rótulos longos na largura estreita do flyout. O primário mora dentro do
   bloco anual (Opção C); o rodapé fica só com o secundário. */
.assinatura__btn {
  width: 100%;
  padding: 9px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--cor-borda);
}

.assinatura__btn--primario {
  background: var(--cor-destaque-borda);
  border-color: var(--cor-destaque-borda);
  color: #ffffff;
  font-weight: 600;
}

/* Compra em voo desabilita os DOIS botões de plano (ambos primários);
   sem isto eles seguem com cara de clicáveis durante a compra. */
.assinatura__btn--primario:disabled {
  opacity: 0.6;
  cursor: default;
}

.assinatura__btn--secundario {
  background: transparent;
  border-color: transparent;
  color: var(--cor-texto-secundario);
}

.assinatura__btn--secundario:hover {
  background: var(--cor-fundo-item);
}

/* "Já sou assinante": link de exceção no rodapé — discreto de propósito, não
   compete com os botões de plano nem com o "Continuar". */
.assinatura__btn--link {
  width: auto;
  align-self: center;
  border: none;
  background: transparent;
  font-size: 11px;
  color: var(--cor-texto-secundario);
  text-decoration: underline;
  cursor: pointer;
}

.assinatura__btn--link:hover {
  color: var(--cor-texto);
}

.assinatura__btn--link:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Resultado da verificação ("Verificando…" / confirmada / negada). */
.assinatura__verificacao {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  color: var(--cor-texto-secundario);
}

/* O .assinatura__rodape é flex; sem esta regra o [hidden] não vale. */
.assinatura__verificacao[hidden] {
  display: none;
}

/* Mesmas cores de texto do .form-evento__erro (a variante escura mora no
   @media prefers-color-scheme: dark lá de cima) — só a cor, sem fundo. */
.assinatura__verificacao--erro {
  color: #b3392a;
}

/* Tons da resposta do resgate ("assinatura__verificacao--<tom>", tom vindo de
   escolherMensagemResgate). Sucesso na cor de destaque do tema — a mesma do ✓
   dos benefícios; neutro explícito na cor-base do elemento ("já resgatado" e
   "já assinante" são informativos, não erro). As duas variáveis já trocam no
   tema escuro sozinhas, sem override no @media. */
.assinatura__verificacao--sucesso {
  color: var(--cor-destaque-borda);
}

.assinatura__verificacao--neutro {
  color: var(--cor-texto-secundario);
}

/* --- Resgate de código de parceria (rodapé do modal) --- */

/* Campo + Ativar na mesma linha; revelado pelo link "Tenho um código". */
.assinatura__resgate {
  display: flex;
  gap: 8px;
}

.assinatura__resgate[hidden] {
  display: none;
}

/* Mesmo visual dos inputs do form-evento. */
.assinatura__resgate-campo {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 6px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-item);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 13px;
}

/* O "Ativar" divide a linha com o campo — não pode herdar o width:100%. */
.assinatura__resgate-ativar {
  width: auto;
  flex: 0 0 auto;
}

/* Estado de sucesso do resgate: o título ("Seu teste terminou") virou falso e
   planos/benefícios/chamada perderam o sentido — o modal colapsa para a
   mensagem de sucesso + botão de fechar (e o ✕ do cabeçalho continua). */
.assinatura--resgatada .assinatura__titulo,
.assinatura--resgatada .assinatura__subtitulo,
.assinatura--resgatada .assinatura__chamada,
.assinatura--resgatada .assinatura__beneficios,
.assinatura--resgatada .assinatura__planos,
.assinatura--resgatada #assinatura-continuar,
.assinatura--resgatada #assinatura-ja-assinante,
.assinatura--resgatada #assinatura-verificacao,
.assinatura--resgatada #assinatura-resgate-link,
.assinatura--resgatada .assinatura__resgate {
  display: none;
}

/* --- Faixa fixa do gate freemium (só no expirado) --- */

/* Rodapé discreto: fundo sutil (o mesmo reforço de fundo do header), texto
   secundário, altura pequena — não compete com a agenda. O botão ocupa a
   largura toda e reabre o modal. Fica no fluxo (flex 0 0 auto), abaixo da
   visão ativa. */
.flyout__faixa-assinatura {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 7px 14px;
  border: none;
  border-top: 1px solid var(--cor-borda);
  background: var(--cor-reforco-texto);
  color: var(--cor-texto-secundario);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.flyout__faixa-assinatura[hidden] {
  display: none;
}

.flyout__faixa-assinatura:hover {
  background: var(--cor-fundo-item);
}

/* "Assinar" na cor de destaque do tema (acompanha claro/escuro), para ser o
   chamariz da faixa sem precisar de outro botão. */
.flyout__faixa-cta {
  color: var(--cor-destaque-borda);
  font-weight: 600;
}

.flyout__avisos {
  flex: 0 0 auto;
  /* Teto de ~1/4 da janela (o flyout tem 640px de altura fixa): com várias
     fontes em erro a pilha de faixas crescia sem limite e empurrava os eventos
     para fora da área visível — justamente os eventos que o cache preservou.
     Passando disto, a área de avisos rola sozinha e o resto segue na tela. */
  max-height: 25vh;
  overflow-y: auto;
  /* A rolagem para no fim da lista de avisos, sem arrastar a lista de eventos. */
  overscroll-behavior: contain;
}

.flyout__avisos::-webkit-scrollbar {
  width: 5px;
}

.flyout__avisos::-webkit-scrollbar-thumb {
  background: var(--cor-borda);
  border-radius: 3px;
}

.aviso-erro {
  margin: 8px 14px 0;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  background: rgba(200, 60, 40, 0.12);
  color: #b3392a;
  /* Mensagem de erro costuma trazer URL longa sem espaços: sem isto a linha
     não quebra em lugar nenhum e vaza para fora da faixa. */
  overflow-wrap: anywhere;
}

@media (prefers-color-scheme: dark) {
  .aviso-erro {
    background: rgba(255, 107, 94, 0.16);
    color: #ff8a7a;
  }
}

.flyout__lista {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 8px 14px;
}

.flyout__carregando {
  color: var(--cor-texto-secundario);
  padding: 12px 8px;
}

.flyout__carregando-mais {
  color: var(--cor-texto-secundario);
  font-size: 11px;
  text-align: center;
  padding: 8px 0 2px;
  margin: 0;
}

.grupo-dia {
  margin-top: 14px;
}

.grupo-dia:first-child {
  margin-top: 4px;
}

.grupo-dia__titulo {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cor-texto-secundario);
  padding: 4px 8px;
  margin: 0 -2px 2px;
  border-radius: 5px;
  background: var(--cor-reforco-texto);
}

.grupo-dia__vazio {
  padding: 0 8px 4px;
  color: var(--cor-texto-secundario);
  font-style: italic;
}

/* --- Convite de avaliação na Microsoft Store (no máximo 2x por instalação) --- */

/* Card discreto no fluxo, acima da visão ativa (Lista/Mensal): mesmo desenho
   contido do .convite-assinatura (borda + fundo sutil), mais compacto — é um
   pedido de gentileza, não pode competir com a agenda. */
.convite-avaliacao {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 8px 0;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-reforco-texto);
}

.convite-avaliacao[hidden] {
  display: none;
}

.convite-avaliacao__texto {
  margin: 0;
  color: var(--cor-texto-secundario);
  font-size: 12px;
  line-height: 1.4;
}

.convite-avaliacao__acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.convite-avaliacao__btn {
  padding: 5px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Mesmo par de cores do .convite-assinatura__btn. */
.convite-avaliacao__btn--primario {
  border: 1px solid var(--cor-destaque-borda);
  background: var(--cor-destaque-borda);
  color: #ffffff;
}

/* "Agora não" como botão de texto: sem borda nem fundo, só o rótulo. */
.convite-avaliacao__btn--secundario {
  border: none;
  background: none;
  color: var(--cor-texto-secundario);
  font-weight: 400;
}

.convite-avaliacao__btn--secundario:hover {
  color: var(--cor-texto);
}

/* --- Convite de assinatura no painel/lista (gate freemium, fora de hoje) --- */

/* Substitui os eventos-esqueleto quando o dia mostrado não é hoje e a licença
   está expirada. Bloco contido (borda + fundo sutil), com a frase e um botão
   "Assinar" que abre o modal. As barras coloridas da grade continuam intactas
   — este convite é só no painel de baixo. */
.convite-assinatura {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 8px 4px;
  padding: 16px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-reforco-texto);
}

.convite-assinatura__texto {
  margin: 0;
  color: var(--cor-texto-secundario);
  line-height: 1.4;
}

.convite-assinatura__btn {
  padding: 7px 16px;
  border-radius: 6px;
  border: 1px solid var(--cor-destaque-borda);
  background: var(--cor-destaque-borda);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.evento {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  background: var(--cor-fundo-item);
  margin-bottom: 4px;
}

.evento--destaque {
  background: var(--cor-destaque-fundo);
  box-shadow: inset 0 0 0 1px var(--cor-destaque-borda);
}

/* Eventos iCloud editáveis: clicáveis (abrem o formulário em modo edição). */
.evento--clicavel {
  cursor: pointer;
}

.evento--clicavel:hover {
  box-shadow: inset 0 0 0 1px var(--cor-borda);
}

.evento__cor {
  flex: 0 0 auto;
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
  margin-top: 2px;
}

.evento__conteudo {
  flex: 1 1 auto;
  min-width: 0;
}

.evento__linha-topo {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.evento__titulo {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evento__horario {
  flex: 0 0 auto;
  color: var(--cor-texto-secundario);
  font-variant-numeric: tabular-nums;
}

.evento__local {
  color: var(--cor-texto-secundario);
  font-size: 12px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Botão "Entrar" de reunião (Meet/Teams/Zoom): só é criado quando o evento tem
   link detectado, então não afeta o layout dos demais eventos. */
.evento__entrar {
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--cor-destaque-borda);
  background: var(--cor-destaque-fundo);
  color: var(--cor-destaque-borda);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.evento__entrar:hover {
  box-shadow: inset 0 0 0 1px var(--cor-destaque-borda);
}

.evento--dia-todo .evento__titulo::before {
  /* Texto no idioma atual, injetado por aplicarTraducoes() (flyout.js); o
     valor literal aqui é só o fallback antes de o script rodar. */
  content: var(--rotulo-dia-todo, "Dia todo · ");
  color: var(--cor-texto-secundario);
  font-weight: 400;
}

/* --- Visão Calendário Mensal --- */

.vista-mensal {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 8px 10px 0;
  gap: 6px;
}

/* .vista-mensal declara display:flex acima; sem isso aqui, o atributo [hidden]
   (regra do próprio navegador, de prioridade mais baixa) perde para essa regra
   de autor e o bloco continua visível mesmo marcado como oculto. */
.vista-mensal[hidden] {
  display: none;
}

.mes-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 2px 4px;
  border-radius: 6px;
  background: var(--cor-reforco-texto);
}

.mes-nav__titulo {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  text-transform: capitalize;
}

.mes-nav__seta {
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--cor-texto);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}

.mes-nav__seta:hover {
  background: var(--cor-fundo-item);
}

.mes-nav__hoje {
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-item);
  color: var(--cor-texto);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.mes-cabecalho {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex: 0 0 auto;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--cor-texto-secundario);
  padding: 3px 0;
  border-radius: 6px;
  background: var(--cor-reforco-texto);
}

/* Coluna de números de semana ISO (opção; padrão desligado). Sem a classe
   modificadora .vista-mensal--semanas, cabeçalho e grade seguem com as 7
   colunas de sempre e a célula "S" do cabeçalho fica oculta. */
.mes-cabecalho__sem {
  display: none;
}

.vista-mensal--semanas .mes-cabecalho__sem {
  display: block;
}

.vista-mensal--semanas .mes-cabecalho,
.vista-mensal--semanas .mes-grade {
  grid-template-columns: 24px repeat(7, 1fr);
}

/* Célula do número da semana: informativa, sem cursor nem hover (não é .mes-dia
   e não participa da seleção de dia). */
.mes-semana {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--cor-texto-secundario);
}

.mes-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* Linhas com altura fixa e compacta (em vez de 1fr esticando pra ocupar
     todo o espaço vertical sobrando) — só assim a altura de cada linha
     realmente diminui; o .mes-grade deixa de forçar flex-grow (ver abaixo). */
  grid-auto-rows: 34px;
  gap: 2px;
  flex: 0 0 auto;
  transition: opacity 0.15s ease;
}

/* Indicador discreto de "buscando eventos deste mês": a grade é desenhada na
   hora do clique (números dos dias, hoje, seleção), só esmaecida enquanto as
   barrinhas de evento ainda não chegaram da rede. */
.mes-grade--carregando {
  opacity: 0.55;
}

.mes-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2px;
  border-radius: 6px;
  cursor: pointer;
}

.mes-dia:hover {
  background: var(--cor-fundo-item);
}

.mes-dia--selecionado {
  background: var(--cor-destaque-fundo);
  box-shadow: inset 0 0 0 1px var(--cor-destaque-borda);
}

.mes-dia__numero {
  font-size: 11px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  flex: 0 0 auto;
}

.mes-dia--fora-do-mes .mes-dia__numero,
.mes-dia--fora-do-mes .mes-dia__barra {
  opacity: 0.35;
}

.mes-dia--hoje .mes-dia__numero {
  background: #e33642;
  color: #ffffff;
  font-weight: 600;
}

.mes-dia__barras {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 2px 4px 0;
}

.mes-dia__barra {
  height: 3px;
  border-radius: 1px;
  flex: 0 0 auto;
}

.painel-proximos {
  /* Cresce pra absorver o espaço vertical que a grade mensal deixou de ocupar
     (linhas com altura fixa agora, ver .mes-grade) — sem isso, sobra um vão
     em branco no fim da janela em vez de mais "Próximos eventos" visíveis. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--cor-borda);
  padding-top: 6px;
  padding-bottom: 10px;
}

.painel-proximos__titulo {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cor-texto-secundario);
  padding: 4px 8px;
  margin: 0 -2px 6px;
  border-radius: 5px;
  background: var(--cor-reforco-texto);
}

.painel-proximos__area {
  position: relative;
  flex: 1 1 auto;
  min-height: 100px;
}

.painel-proximos__lista {
  height: 100%;
  overflow-y: auto;
  padding-right: 4px;
}

.painel-proximos__lista::-webkit-scrollbar {
  width: 5px;
}

.painel-proximos__lista::-webkit-scrollbar-thumb {
  background: var(--cor-borda);
  border-radius: 3px;
}

.painel-proximos__area::after {
  content: "";
  position: absolute;
  left: 0;
  right: 6px;
  bottom: 0;
  height: 16px;
  background: linear-gradient(to bottom, transparent, var(--cor-fundo));
  pointer-events: none;
}

.painel-proximos__vazio {
  color: var(--cor-texto-secundario);
  font-style: italic;
  font-size: 12px;
}