/* Estilo principal do calendário */
#calendar {
    max-width: 100%;
    /* margin: 30px auto; */
    /* padding: 10px; */
    background: #0f131c;
    border: 1px solid #0f131c;
    min-height: 600px;
}

/* Estilo dos eventos */
.fc-event {
    font-size: 13px;
    padding: 2px 4px;
    border-radius: 4px;
    background-color: #161b28;
    color: #a58348;
    border: none;
}

/* Bolinha piscando em verde */
.fc-list-event-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #28a745; /* verde */
    animation: blinkGreen 1s infinite;
    display: inline-block;
}

@keyframes blinkGreen {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
}

/* Tooltip com imagem e descrição */
.tooltip-content img {
    width: 100%;
    max-height: 100px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 5px;
}
.tooltip-content p {
    font-size: 12px;
    color: #333;
}
.tooltip-content .view-more {
    margin-top: 5px;
    padding: 5px 10px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

/* Estilo do modal fullscreen */
.event-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 80px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* scroll interno se precisar */
    background-color: rgba(0,0,0,0.6);
}
.modal-content {
    background-color: #fff;
    margin: auto;
    padding: 20px;
    border-radius: 10px;
    /* 🔽 deixa o modal maior e ainda responsivo */
    width: clamp(320px, 92vw, 980px);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    position: relative;
}
.close-button {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}
.go-server {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 15px;
    background: #007bff;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
}

/* 🔽 banners grandes dentro do modal nunca “estouram” a tela */
.modal-content img,
.event-modal .modal-banner {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(56vh, 520px);
    object-fit: contain;     /* mostra a imagem inteira */
    margin: 0 auto 12px;
    border-radius: 8px;
}

/* Botão abaixo do calendário */
.calendar-action-button {
    display: block;
    width: fit-content;
    margin: 20px auto;
    padding: 12px 24px;
    background-color: #28a745;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}
.calendar-action-button:hover {
    background-color: #218838;
}


/* =========================================================================
 * [NOVO] Dashboard / Estatísticas (UI premium, dark + glass)
 * - Prefixo "sec-" para não conflitar com o tema/FullCalendar
 * ========================================================================= */
.sec-calwrap {
  max-width: 100%;

  /*
   * [ALTERAÇÃO - ORDEM DO LAYOUT (DESKTOP + MOBILE)]
   * Objetivo: fazer o bloco de estatísticas/cards (print 1) ficar ABAIXO do calendário/eventos (print 2)
   * em TODAS as telas.
   *
   * Técnica: transformamos o wrapper em flex-column e usamos "order" nos 3 filhos diretos:
   * 1) #sec-next-start-slot  (slot do NEXT START)  -> fica no topo
   * 2) #calendar             (FullCalendar)        -> fica no meio
   * 3) #sec-dashboard        (cards/estatísticas)  -> fica abaixo
   *
   * Observação: isso não altera o FullCalendar internamente (evita "bug" de layout);
   * apenas reordena os blocos do shortcode.
   */
  display: flex;
  flex-direction: column;
}

/*
 * [NOVO] Ordem global do shortcode
 * - Mantém o "NEXT START" no topo.
 * - Mantém o calendário logo abaixo.
 * - Deixa o dashboard (cards do print 1) por último.
 */
.sec-calwrap #sec-next-start-slot { order: 1; }
.sec-calwrap #calendar { order: 2; flex: 0 0 auto; }
.sec-calwrap #sec-dashboard { order: 3; }
.sec-dashboard { margin: 12px 0 18px; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #e5e7eb; }
.sec-stats-grid {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 10px;margin-bottom: 10px;}
@media (max-width: 1000px){ .sec-stats-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 520px){ .sec-stats-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.sec-stat-card {
  background: rgba(17,24,39,.55);
  border: 1px solid rgba(148,163,184,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.sec-stat-label { font-size: 12px; color: rgba(229,231,235,.78); letter-spacing: .02em; }
.sec-stat-value { font-size: 20px; font-weight: 900; margin-top: 2px; }

.sec-panels-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 10px; }
.sec-card {
  background: rgba(15,19,28,.72);
  border: 1px solid rgba(148,163,184,.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 0px; /* [ALTERADO] 12px -> 0px (pedido do Bruno) */
  box-shadow: 0 12px 30px rgba(0,0,0,.30);
}
.sec-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 8px; gap: 10px; }
.sec-card-head-row { flex-direction: column; align-items: stretch; }
.sec-card-title { font-weight: 900; font-size: 14px; color: #f3f4f6; }
.sec-muted { color: rgba(229,231,235,.72); font-size: 12px; }

.sec-next-body { display:flex; gap: 12px; align-items: stretch; }
.sec-next-banner { width: 180px; min-width: 180px; height: 110px; border-radius: 14px; overflow:hidden; border:1px solid rgba(148,163,184,.16); background:#0b1020; }
.sec-next-banner img { width:100%; height:100%; object-fit: cover; display:block; }
.sec-next-info { display:flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.sec-next-title { font-weight: 900; font-size: 16px; line-height: 1.2; color:#fff; }
.sec-next-meta { display:flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: rgba(229,231,235,.75); }
.sec-pill { padding: 4px 8px; border-radius: 999px; background: rgba(148,163,184,.14); border: 1px solid rgba(148,163,184,.16); }
.sec-next-actions { display:flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.sec-btn {
  appearance: none; border: 1px solid rgba(148,163,184,.20);
  background: rgba(17,24,39,.65);
  color: #f9fafb;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
  text-decoration: none;
  display:inline-flex; align-items:center; gap: 6px;
}
.sec-btn:hover { transform: translateY(-1px); background: rgba(17,24,39,.85); }
.sec-btn:active { transform: translateY(0px); }
.sec-btn.primary { border-color: rgba(165,131,72,.55); background: rgba(165,131,72,.12); }
.sec-btn.primary:hover { background: rgba(165,131,72,.18); }
.sec-btn.ghost { background: transparent; }

.sec-list { display:flex; flex-direction: column; gap: 8px; }
.sec-item { display:flex; align-items:center; justify-content:space-between; gap: 10px;
  padding: 10px 10px; border-radius: 14px;
  background: rgba(17,24,39,.45);
  border: 1px solid rgba(148,163,184,.14);
}
.sec-item-main { display:flex; flex-direction: column; gap: 2px; min-width: 0; }
.sec-item-title { font-size: 13px; font-weight: 900; color: #f3f4f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-item-sub { font-size: 12px; color: rgba(229,231,235,.70); display:flex; gap: 8px; flex-wrap: wrap; }
.sec-item-num { font-weight: 900; font-size: 13px; padding: 6px 10px; border-radius: 999px; background: rgba(148,163,184,.14); border:1px solid rgba(148,163,184,.14); }

.sec-types-body { display:flex; flex-direction: column; gap: 8px; }
.sec-type-row { display:flex; align-items:center; gap: 10px; }
.sec-type-name { width: 110px; font-size: 12px; font-weight: 800; color: rgba(243,244,246,.90); white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.sec-type-barwrap { flex:1; height: 10px; border-radius: 999px; background: rgba(148,163,184,.12); border:1px solid rgba(148,163,184,.14); overflow:hidden; }
.sec-type-bar { height:100%; width: 0%; background: rgba(165,131,72,.65); }
.sec-type-count { width: 36px; text-align: right; font-weight: 900; font-size: 12px; color: rgba(243,244,246,.92); }

.sec-dashboard-foot { display:flex; gap: 10px; align-items:center; justify-content:flex-end; margin-top: 10px; flex-wrap: wrap; }
.sec-foot-value { color: rgba(243,244,246,.88); font-weight: 800; font-size: 12px; }

/* [ALTERAÇÃO - v1.9.1] Métricas do rodapé (VISUALIZAÇÕES/CLIQUES GERAIS)
 * - Você pediu "visualizações e cliques gerais" + visual mais bonito.
 * - Layout novo: chips com ícone + número + label + tag "GERAL".
 */
.sec-foot-metrics{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(17,24,39,.70), rgba(17,24,39,.45));
  border: 1px solid rgba(148,163,184,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.sec-foot-chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(15,19,28,.55);
  border: 1px solid rgba(148,163,184,.12);
}

.sec-foot-ico-wrap{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(165,131,72,.12);
  border: 1px solid rgba(165,131,72,.25);
  color: rgba(243,244,246,.95);
}

.sec-foot-ico-wrap .sec-foot-ico{
  width: 18px;
  height: 18px;
  opacity: .95;
}

.sec-foot-txt{
  display:flex;
  flex-direction:column;
  line-height: 1.05;
}

.sec-foot-num{
  color: rgba(243,244,246,.95);
  font-weight: 950;
  font-size: 14px;
}

.sec-foot-label{
  margin-top: 3px;
  font-weight: 850;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(229,231,235,.70);
}

.sec-foot-tag{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(165,131,72,.12);
  border: 1px solid rgba(165,131,72,.30);
  color: rgba(243,244,246,.95);
  font-weight: 950;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sec-tabs { display:flex; gap: 8px; }
.sec-tab { border:1px solid rgba(148,163,184,.20); background: rgba(17,24,39,.55); color:#f3f4f6; border-radius: 999px; padding: 6px 10px; font-weight: 900; font-size: 12px; cursor:pointer; }
.sec-tab.is-active { border-color: rgba(165,131,72,.55); background: rgba(165,131,72,.12); }

/* =========================================================
 * [NOVO]
 * - Você pediu para que os botões "Mais vistos" / "Mais clicados"
 *   fiquem na parte de baixo da imagem (e não no cabeçalho do card).
 * - Como o .sec-card está sem padding, este wrapper dá o espaçamento
 *   necessário e centraliza os botões.
 * ========================================================= */
.sec-top-tabs-wrap{
  padding: 10px 12px 12px;
  display:flex;
  justify-content:center;
  border-top: 1px solid rgba(148,163,184,.10);
}

@media (max-width: 980px) {
  .sec-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-panels-grid { grid-template-columns: 1fr; }
  .sec-next-body { flex-direction: column; }
  .sec-next-banner { width: 100%; min-width: 0; height: 160px; }
  .sec-type-name { width: 90px; }
}


/* =========================================================================
 * [NOVO] DASHBOARD — TITULOS COM ÍCONE + LISTAS EM THUMBNAILS (IMAGENS)
 * - Atende pedido: "ao invés de texto do evento, colocar a imagem dele"
 * - Mantém acessibilidade via .sec-sr-only
 * ========================================================================= */
.sec-sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Título do card agora pode ser só um ícone (SVG) */
.sec-card-head .sec-card-title{
  display:flex;
  align-items:center;
}
.sec-card-title .sec-title-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  background: rgba(17,24,39,.45);
  border: 1px solid rgba(148,163,184,.14);
}

/* Grid de thumbnails (Recentes/Top) */
/*
 * [ALTERAÇÃO - v1.8.5]
 * O banner estava ficando MUITO pequeno quando a lista tinha poucos itens,
 * porque o grid estava fixo em 4 colunas (repeat(4, ...)).
 *
 * Agora usamos auto-fit + minmax(173px, 1fr):
 * - Se tiver 1 item, ele pode ocupar mais espaço (não fica 1/4 do card).
 * - Se tiver vários itens, eles se distribuem em colunas com tamanho mínimo.
 *
 * Também centralizamos os itens, porque cada thumb tem max-width (173px).
 */
.sec-list.sec-list--thumbs{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(173px, 1fr));
  gap:10px;
  justify-items: center;
}

/*
 * [ALTERAÇÃO - v1.8.5]
 * Mantém o auto-fit também no mobile, para não “encolher” quando tiver 1 item.
 * Apenas reduzimos o tamanho mínimo para caber melhor em telas menores.
 */
@media (max-width: 900px){
  .sec-list.sec-list--thumbs{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
@media (max-width: 680px){
  .sec-list.sec-list--thumbs{ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  /* [ALTERAÇÃO - RESPONSIVO] Em telas menores, não “gruda” os selects para evitar quebra/overlap */
  #calendar .sec-fc-controls__filters{
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  #calendar .sec-fc-controls__filters .sec-fc-select{
    border-radius: 12px;
    margin-left: 0;
    flex: 1 1 160px;
    min-width: 120px;
  }

}

.sec-thumb-item{
  position:relative;
  /* [ALTERAÇÃO - v1.8.9]
   * Card continua com bordas arredondadas (premium),
   * mas a IMAGEM não pode ser recortada/"arredondada".
   * Por isso: border-radius no container e overflow visível.
   */
  border-radius: 14px;
  overflow: visible;
  background: rgba(17,24,39,.45);
  border: 1px solid rgba(148,163,184,.14);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  /* [ALTERAÇÃO - v1.8.5] Tamanho alvo aproximado do thumb (173x134). */
  width: 100%;
  max-width: 173px;
}
.sec-thumb-item::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 55%);
  pointer-events:none;
  border-radius: 14px;
}
.sec-thumb-btn{
  width: 100%;
  /* [ALTERAÇÃO - v1.8.5] Proporção do thumb ≈ 173x134 (pedido do Bruno). */
  aspect-ratio: 1 / 1; /* [ALTERADO] retangular -> quadrado */
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  border:0;
  padding:0;
  margin:0;
  display:block;
  cursor:pointer;
  outline:none;
  transition: transform .15s ease, filter .15s ease;
  border-radius: 0px;
}
.sec-thumb-btn:hover{
  transform: translateY(-1px) scale(1.01);
  filter: brightness(1.05);
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0px;
}
.sec-thumb-btn:active{
  transform: translateY(0px) scale(1);
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0px;
}

.sec-thumb-btn.sec-thumb-empty{
  background-image: radial-gradient(circle at 20% 20%, rgba(165,131,72,.28), rgba(17,24,39,.55) 55%, rgba(0,0,0,.55) 100%);
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0px;
}

.sec-thumb-badge{
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: rgba(243,244,246,.95);
  background: rgba(17,24,39,.65);
  border: 1px solid rgba(148,163,184,.18);
  backdrop-filter: blur(6px);
}


/* ============================================================
 * [NOVO - SCROLLBAR MAIS SUAVE + CORREÇÃO DE SOBREPOSIÇÃO NA LISTA]
 * - Mesmo existindo CSS inline (para vencer cache), mantemos aqui
 *   também para ficar "editável" e fácil de manter.
 * - Escopo: SOMENTE dentro do #calendar.
 * ============================================================ */
#calendar .sec-calendar-scroll{
  scrollbar-width: thin !important; /* Firefox */
  scrollbar-color: rgba(165,131,72,.60) rgba(17,24,39,.25) !important; /* Firefox */
  scrollbar-gutter: stable;
}
#calendar .sec-calendar-scroll::-webkit-scrollbar{ width: 10px !important; }
#calendar .sec-calendar-scroll::-webkit-scrollbar-track{
  background: rgba(17,24,39,.25) !important;
  border-radius: 999px !important;
}
#calendar .sec-calendar-scroll::-webkit-scrollbar-thumb{
  background: rgba(165,131,72,.50) !important;
  border-radius: 999px !important;
  border: 2px solid rgba(17,24,39,.25) !important;
}
#calendar .sec-calendar-scroll::-webkit-scrollbar-thumb:hover{
  background: rgba(165,131,72,.72) !important;
}

/* Evita "evento passando por cima" (stacking + fundo opaco no modo lista) */
#calendar .fc-scroller,
#calendar .fc-scroller-liquid-absolute{
  isolation: isolate !important;
  position: relative !important;
}
#calendar .fc-list-day{ position: relative !important; z-index: 5 !important; }
#calendar .fc-list-day-cushion{ background: rgba(17,24,39,.92) !important; }
#calendar .fc-list-event td{
  background: rgba(15,19,28,.92) !important;
  position: relative !important;
  z-index: 1 !important;
}
#calendar .fc-list-event:hover td{ background: rgba(17,24,39,.92) !important; }


/* ============================================================
 * [NOVO - VISUAL PREMIUM DO HEADER (BOTÕES + SELECTS)]
 * - Você pediu para deixar a área do topo mais bonita (Criar + filtros + navegação)
 * - Importante: escopo SOMENTE dentro do #calendar para não afetar outros lugares
 * ============================================================ */
#calendar .fc .fc-header-toolbar{
  margin: 0 0 12px 0 !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(17,24,39,.70), rgba(15,19,28,.52)) !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0,0,0,.30);
}

#calendar .fc .fc-header-toolbar .fc-toolbar-chunk{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Botões nativos do FullCalendar (today / prev / next) */
#calendar .fc .fc-button{
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  background: rgba(17,24,39,.55) !important;
  color: rgba(243,244,246,.92) !important;
  font-weight: 900 !important;
  letter-spacing: .02em;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
#calendar .fc .fc-button:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.28);
}
#calendar .fc .fc-button:active{
  transform: translateY(0px);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
#calendar .fc .fc-button:disabled{
  opacity: .45 !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Wrapper dos seus controles customizados */
#calendar .sec-fc-controls{
  display:flex;
  align-items:center;
  gap: 12px; /* [ALTERAÇÃO] um pouco mais de respiro entre grupos */
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
 * [NOVO - GRUPOS DO TOPO]
 * - Pedido: "Criar separado e os outros dois juntos"
 * - .sec-fc-controls__filters “gruda” os 2 selects lado a lado
 * - Em telas menores, voltamos para o layout normal (ver media query)
 * ============================================================ */
#calendar .sec-fc-controls__create{ flex: 0 0 auto; }
#calendar .sec-fc-controls__notify{ flex: 0 0 auto; }

#calendar .sec-fc-controls__filters{
  display:flex;
  align-items:center;
  gap: 0;          /* [ALTERAÇÃO] sem espaço entre os 2 selects */
  flex-wrap: nowrap;
}

/* “Gruda” os selects (borda compartilhada e radius correto) */
#calendar .sec-fc-controls__filters .sec-fc-select{
  border-radius: 0;
  min-width: 180px; /* [ALTERAÇÃO] garante legibilidade e reduz quebra */
}

#calendar .sec-fc-controls__filters .sec-fc-select:first-child{
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

#calendar .sec-fc-controls__filters .sec-fc-select:last-child{
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  margin-left: -1px; /* [ALTERAÇÃO] evita “dupla borda” no meio */
}

/* Botões customizados (Criar / Receber todos) */
#calendar .sec-fc-btn{
  height: 34px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(17,24,39,.55);
  color: rgba(243,244,246,.92);
  font-weight: 950;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
#calendar .sec-fc-btn:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.28);
}
#calendar .sec-fc-btn:active{
  transform: translateY(0px);
}

#calendar .sec-fc-btn--primary{
  background: linear-gradient(to right, rgba(165,131,72,.95), rgba(217,164,65,.95));
  border-color: rgba(217,164,65,.35);
  color: #0b0f17;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
#calendar .sec-fc-btn--ghost{
  background: rgba(51,65,85,.55);
  border-color: rgba(71,85,105,.55);
}

/* Selects customizados */
#calendar .sec-fc-select{
  height: 34px;
  min-width: 140px;
  padding: 0 36px 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(17,24,39,.55);
  color: rgba(243,244,246,.92);
  font-weight: 900;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(243,244,246,.85) 50%),
    linear-gradient(135deg, rgba(243,244,246,.85) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* [ALTERAÇÃO] Força uma seta "▼" visível no <select>, mesmo quando o tema/browsers removem o background-image.
   Motivo: alguns temas aplicam "background: ..." ou "background-image: none" nos selects e a seta some.
   Solução: seta via SVG inline com !important (não depende do wrapper). */
#calendar select.sec-fc-select{
  background-color: rgba(17,24,39,.55) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23F3F4F6' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 12px) 50% !important;
  background-size: 16px 16px !important;
  padding-right: 40px; /* [ALTERAÇÃO] Garante espaço para a seta */
}
#calendar select.sec-fc-select::-ms-expand{ display:none; }


#calendar .sec-fc-select:hover{filter: brightness(1.08);}
#calendar .sec-fc-select:focus{
  border-color: rgba(217,164,65,.55);
  box-shadow: 0 0 0 3px rgba(217,164,65,.14), 0 10px 22px rgba(0,0,0,.22);
}

/* Responsivo: em telas menores deixa quebrar linha sem ficar apertado */
@media (max-width: 680px){
  #calendar .sec-fc-select{ min-width: 120px; flex: 1 1 160px; }
  #calendar .sec-fc-controls{ width: 100%; }
  #calendar .sec-fc-btn{ flex: 0 0 auto; }
}



/* [NOVO] Label "Servidor recente" no banner do servidor mais recente.
   OBS: position:absolute para NÃO alterar o tamanho do banner (não muda layout nem aspect-ratio). */
.sec-thumb-item{ position: relative; }
.sec-thumb-caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 10px;
  text-align: center;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .2px;
  color: rgba(243,244,246,.92);
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  pointer-events: none;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* [NOVO] Label "Servidor recente" como botão/pílula ABAIXO do banner.
   - Fica como os botões "Mais vistos / Mais clicados"
   - Não sobrepõe a imagem (não é absolute) */
.sec-thumb-caption-below{
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px 10px 12px;
  margin-top: 0; /* colado no banner */
  border-top: 1px solid rgba(148,163,184,.12);
  background: rgba(17,24,39,.45);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  pointer-events: none; /* label visual */
}

/* [NOVO] Segurança: o pill não deve ser clicável e mantém o visual */
.sec-thumb-caption-below .sec-tab{ pointer-events: none; }
.sec-thumb-caption-below .sec-thumb-caption-btn{
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

.sec-thumb-caption .sec-tab{
  pointer-events: none;
}
.sec-thumb-caption .sec-thumb-caption-btn{
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

/* ======================================================================
 * [ADICIONAR - TS50 FIX v1.10.7] Botões "Mais vistos" / "Mais clicados"
 * - Você pediu que esses botões fiquem com o MESMO visual do botão/pílula
 *   "Servidor recente".
 * - Para não afetar outros lugares do plugin, aplicamos SOMENTE dentro
 *   do bloco do dashboard (#sec-dashboard) e SOMENTE na área dos botões
 *   inferiores (.sec-top-tabs-wrap).
 * ====================================================================== */
#sec-dashboard .sec-top-tabs-wrap .sec-tab{
  /* Mesmo “tom ouro” do pill ativo (Servidor recente) */
  border-color: rgba(165,131,72,.55) !important;
  background: rgba(165,131,72,.12) !important;
  color: #f9fafb !important;

  /* Formato pílula igual */
  border-radius: 999px !important;

  /* Dá o mesmo “peso” visual do pill */
  box-shadow: 0 10px 22px rgba(0,0,0,.20) !important;

  /* Evita estilos do tema sobrescreverem o botão */
  outline: none !important;
  text-decoration: none !important;
}

#sec-dashboard .sec-top-tabs-wrap .sec-tab:hover{
  transform: translateY(-1px);
  background: rgba(165,131,72,.16) !important;
}

#sec-dashboard .sec-top-tabs-wrap .sec-tab.is-active{
  background: rgba(165,131,72,.18) !important;
}




/* ======================================================================
 * [ADICIONAR - TS50 FIX v1.10.8] GARANTIA de layout (não estoura) + thumbs grandes
 * ----------------------------------------------------------------------
 * Motivo:
 * - Depois de deixar os botões "Mais vistos" / "Mais clicados" com o visual do
 *   "Servidor recente", alguns temas criam uma LARGURA MÍNIMA grande no card.
 * - Isso faz o grid tentar "empurrar" a coluna e o bloco pode sair do container.
 *
 * Solução:
 * 1) Grid com minmax(0, ...) + min-width:0 para permitir encolher sem overflow.
 * 2) Tabs com flex-wrap para nunca forçar largura maior que o card.
 * 3) Thumb grande (1 por card) mantendo cover/center.
 * ====================================================================== */

/* 1) Grid dos 2 cards (Recentes / Top) não pode estourar o container */
#sec-dashboard .sec-panels-grid{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important;
  gap: 10px !important;
  align-items: stretch;
}

#sec-dashboard .sec-panels-grid > .sec-card{
  min-width: 0;
  max-width: 100%;
}

#sec-dashboard .sec-card{
  overflow: hidden; /* segurança contra vazamentos visuais */
}

/* 2) Tabs inferiores: nunca podem forçar overflow */
#sec-dashboard .sec-top-tabs-wrap{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

#sec-dashboard .sec-top-tabs-wrap .sec-tabs{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

#sec-dashboard .sec-top-tabs-wrap .sec-tab{
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

/* 3) Thumbs: 1 por card, banner grande */
#sec-dashboard .sec-list.sec-list--thumbs{
  grid-template-columns: 1fr !important;
  justify-items: stretch !important;
}

#sec-dashboard .sec-thumb-item{
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#sec-dashboard .sec-thumb-btn{
  width: 100% !important;
  aspect-ratio: auto !important;
  height: clamp(190px, 22vw, 280px) !important;
  border-radius: 0 !important;
}

/* remove o scale do hover para não “empurrar” layout */
#sec-dashboard .sec-thumb-btn:hover{
  transform: translateY(-1px) !important;
  filter: brightness(1.05) !important;
}

#sec-dashboard .sec-thumb-btn:active{
  transform: translateY(0px) !important;
}

@media (max-width: 980px){
  #sec-dashboard .sec-panels-grid{
    grid-template-columns: 1fr !important;
  }
  #sec-dashboard .sec-thumb-btn{
    height: clamp(180px, 38vw, 240px) !important;
  }
}
/* ======================================================================
 * [ADICIONAR - TS50 FIX v1.10.9] Botões lado a lado (compactos) + colunas iguais
 * ----------------------------------------------------------------------
 * Pedido:
 * - "Mais vistos" e "Mais clicados" pequenos e UM AO LADO DO OUTRO (como antes)
 * - Sem afinar a coluna esquerda; cards com 50/50 no desktop
 *
 * Ajustes:
 * 1) Volta grid para 2 colunas iguais: repeat(2, minmax(0, 1fr))
 * 2) Tabs SEM quebra de linha (lado a lado), mas permitindo o TEXTO quebrar
 *    dentro do botão (white-space: normal) para não estourar em telas menores.
 * 3) Botões mais compactos (padding/font/line-height) mantendo o visual dourado.
 * ====================================================================== */

#sec-dashboard .sec-panels-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

/* Tabs: sempre lado a lado */
#sec-dashboard .sec-top-tabs-wrap{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#sec-dashboard .sec-top-tabs-wrap .sec-tabs{
  display: flex;
  flex-wrap: nowrap !important;      /* impede ficar um abaixo do outro */
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Botões compactos e com largura flexível */
#sec-dashboard .sec-top-tabs-wrap .sec-tab{
  flex: 1 1 0;                       /* divide espaço igualmente */
  min-width: 0;
  max-width: 180px;                  /* evita ficar “gigante” em telas largas */
  padding: 8px 12px !important;      /* menor que o atual */
  font-size: 11px !important;        /* mais compacto como no print antigo */
  line-height: 1.15 !important;
  text-align: center;

  /* Permite quebrar o texto dentro do botão (ex: "Mais\nvistos") sem overflow */
  white-space: normal !important;
}

/* Em telas bem estreitas, reduz um pouco mais para manter lado a lado */
@media (max-width: 420px){
  #sec-dashboard .sec-top-tabs-wrap .sec-tab{
    max-width: none;
    padding: 7px 10px !important;
    font-size: 10px !important;
  }
}

/* ======================================================================
 * [ADICIONAR - TS50 FIX v1.10.10] Remove “duas linhas” na parte de baixo
 * ----------------------------------------------------------------------
 * Sintoma:
 * - Na área inferior do card TOP (onde ficam as abas/botões), parecia ter
 *   2 linhas muito próximas.
 *
 * Causa provável:
 * - A .sec-top-tabs-wrap tinha um border-top (linha separadora) + o card
 *   já possui a borda externa. Dependendo do zoom/tema, isso parece “duas
 *   linhas” na parte de baixo.
 *
 * Solução:
 * - Remove o border-top e troca por um leve degradê (sem linha dura),
 *   mantendo a separação visual sem criar “linha duplicada”.
 * ====================================================================== */

#sec-dashboard .sec-top-tabs-wrap{
  border-top: 0 !important; /* remove a linha dura */

  /* separação suave sem virar “linha” */
  background: linear-gradient(180deg,
    rgba(255,255,255,0.02) 0%,
    rgba(0,0,0,0.06) 35%,
    rgba(0,0,0,0.12) 100%
  ) !important;
}

/* ======================================================================
 * [ADICIONAR - TS50 FIX v1.10.11] Remove “linha duplicada” da borda do card
 * ----------------------------------------------------------------------
 * Mesmo removendo o border-top interno, alguns temas/zooms ainda podem
 * aparentar “duas linhas” no rodapé do card por efeito de renderização
 * (border + backdrop-filter + fundos escuros).
 *
 * Solução mais robusta:
 * - Trocar a borda real do card por uma borda desenhada via box-shadow inset.
 *   Isso elimina artefatos de anti-aliasing/dupla borda sem mudar o layout.
 *
 * Escopo: SOMENTE no dashboard (#sec-dashboard).
 * ====================================================================== */
#sec-dashboard .sec-card{
  border: 0 !important;
  /* 1) borda (inset)  2) sombra externa original */
  box-shadow:
    inset 0 0 0 1px rgba(148,163,184,.16),
    0 12px 30px rgba(0,0,0,.30) !important;
  background-clip: padding-box;
}