/* ===========================================================================
   Ravox - tema moderno do site (camada por cima do tibiacom).
   So vale com <html class="rv-moderno">: ligado por ?tema=novo (fica salvo no
   navegador) ou para todos com RV_TEMA_PADRAO = 'novo' no index.php.
   Para voltar ao classico: ?tema=classico
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Cinzel:wght@600;700&display=swap');

html.rv-moderno {
  --rv-fundo: #0b0d12;
  --rv-card: rgba(20, 22, 30, 0.82);
  --rv-card2: rgba(28, 31, 42, 0.92);
  --rv-borda: rgba(255, 255, 255, 0.08);
  --rv-ouro: #e8b64a;
  --rv-ouro2: #ffd987;
  --rv-texto: #e8e6e1;
  --rv-suave: #9aa0ad;
  --rv-raio: 12px;
}

html.rv-moderno body {
  font-family: 'Inter', Verdana, sans-serif !important;
  color: var(--rv-texto);
  background-color: var(--rv-fundo) !important;
}
html.rv-moderno body::before {
  /* escurece a arte de fundo para o conteudo respirar */
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(11, 13, 18, 0.35), rgba(11, 13, 18, 0.88) 70%);
  pointer-events: none;
  z-index: -1;
}

/* ------------------------------------------------------------------ menu esquerdo */
html.rv-moderno #MenuColumn .MenuButton {
  background: linear-gradient(180deg, rgba(36, 32, 24, 0.95), rgba(22, 20, 16, 0.95)) !important;
  border: 1px solid rgba(232, 182, 74, 0.35);
  border-radius: 10px;
  margin: 10px 4px 4px 4px;
  overflow: hidden;
}
html.rv-moderno #MenuColumn .MenuButton .Button,
html.rv-moderno #MenuColumn .Lights { display: none !important; }
html.rv-moderno #MenuColumn .Submenu {
  background: var(--rv-card) !important;
  border: 1px solid var(--rv-borda);
  border-radius: 10px;
  margin: 0 4px;
  padding: 4px 0;
}
html.rv-moderno #MenuColumn .Submenuitem {
  background: none !important;
  border-radius: 7px;
  margin: 1px 4px;
  transition: background .15s, padding-left .15s;
}
html.rv-moderno #MenuColumn .Submenuitem:hover {
  background: rgba(232, 182, 74, 0.12) !important;
  padding-left: 4px;
}
html.rv-moderno #MenuColumn .LeftChain,
html.rv-moderno #MenuColumn .RightChain { display: none !important; }
html.rv-moderno #MenuColumn .SubmenuitemLabel {
  font-family: 'Inter', Verdana, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500;
  letter-spacing: .1px;
}
html.rv-moderno #MenuColumn #MenuBottom { display: none; }

/* ------------------------------------------------------------------ caixas de conteudo */
html.rv-moderno .Box {
  background: var(--rv-card) !important;
  border: 1px solid var(--rv-borda);
  border-radius: var(--rv-raio);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  margin-bottom: 18px !important;
}
html.rv-moderno .Box .Corner-tl,
html.rv-moderno .Box .Corner-tr,
html.rv-moderno .Box .Corner-bl,
html.rv-moderno .Box .Corner-br,
html.rv-moderno .Box .Border_1,
html.rv-moderno .Box .Border_2,
html.rv-moderno .Box .Border_3,
html.rv-moderno .Box .BorderTitleText,
html.rv-moderno .CornerWrapper-b { background: none !important; border: 0 !important; }
html.rv-moderno .Box .Title {
  background: linear-gradient(90deg, rgba(232, 182, 74, 0.16), transparent) !important;
  border-bottom: 1px solid var(--rv-borda);
}
html.rv-moderno .Box .BoxContent {
  background: transparent !important;
  color: var(--rv-texto);
  font-size: 13px;
  line-height: 1.55;
}

/* ------------------------------------------------------------------ tabelas */
html.rv-moderno .TableContainer {
  border-radius: var(--rv-raio);
  overflow: hidden;
  border: 1px solid var(--rv-borda);
  margin-bottom: 14px;
}
html.rv-moderno .CaptionContainer {
  background: linear-gradient(90deg, #2a2316, #1b1a17) !important;
}
html.rv-moderno .CaptionContainer .Text,
html.rv-moderno .CaptionContainer .CaptionInnerContainer .Text {
  font-family: 'Cinzel', serif !important;
  color: var(--rv-ouro2) !important;
  letter-spacing: .5px;
}
html.rv-moderno .Table1, html.rv-moderno .Table2, html.rv-moderno .Table3,
html.rv-moderno .Table4, html.rv-moderno .Table5, html.rv-moderno .TableContent {
  background: var(--rv-card2) !important;
  border-color: var(--rv-borda) !important;
}
html.rv-moderno .TableContent td,
html.rv-moderno .TableContent th { border-color: var(--rv-borda) !important; }
html.rv-moderno tr.Odd, html.rv-moderno .Odd { background-color: rgba(255, 255, 255, 0.02) !important; }
html.rv-moderno tr.Even, html.rv-moderno .Even { background-color: rgba(255, 255, 255, 0.05) !important; }
html.rv-moderno .LabelV, html.rv-moderno .LabelH { color: var(--rv-ouro2) !important; }

/* ------------------------------------------------------------------ links e botoes */
html.rv-moderno #ContentColumn a { color: var(--rv-ouro2); transition: color .15s; }
html.rv-moderno #ContentColumn a:hover { color: #fff; }
html.rv-moderno input[type=text], html.rv-moderno input[type=password],
html.rv-moderno input[type=email], html.rv-moderno select, html.rv-moderno textarea {
  background: #11131a !important;
  color: var(--rv-texto) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  padding: 6px 9px !important;
  font-family: 'Inter', Verdana, sans-serif !important;
}
html.rv-moderno input:focus, html.rv-moderno select:focus, html.rv-moderno textarea:focus {
  outline: none;
  border-color: var(--rv-ouro) !important;
  box-shadow: 0 0 0 3px rgba(232, 182, 74, 0.2);
}

/* ------------------------------------------------------------------ coluna direita */
html.rv-moderno #Themeboxes > div,
html.rv-moderno .SmallMenuBox {
  border-radius: var(--rv-raio);
  overflow: hidden;
}

/* ------------------------------------------------------------------ barra de atalhos */
html.rv-moderno #ravoxCustomBar {
  border-radius: var(--rv-raio) !important;
  background: var(--rv-card) !important;
  border: 1px solid var(--rv-borda) !important;
}
html.rv-moderno .ravoxBarLink, html.rv-moderno .ravoxBarPill {
  border-radius: 999px !important;
  transition: transform .12s, background .15s;
}
html.rv-moderno .ravoxBarLink:hover { transform: translateY(-1px); }

/* ------------------------------------------------------------------ rodape */
html.rv-moderno #Footer {
  color: var(--rv-suave) !important;
  font-family: 'Inter', Verdana, sans-serif !important;
}

/* ------------------------------------------------------------------ rolagem */
html.rv-moderno ::-webkit-scrollbar { width: 10px; }
html.rv-moderno ::-webkit-scrollbar-track { background: #0b0d12; }
html.rv-moderno ::-webkit-scrollbar-thumb { background: #3a3122; border-radius: 10px; }
html.rv-moderno ::-webkit-scrollbar-thumb:hover { background: #5a4a2c; }

/* ------------------------------------------------------------------ texto claro no conteudo
   (o tema classico usa marrom escuro, feito para o fundo de pergaminho) */
html.rv-moderno #ContentColumn,
html.rv-moderno #ContentColumn td,
html.rv-moderno #ContentColumn th,
html.rv-moderno #ContentColumn p,
html.rv-moderno #ContentColumn label { color: var(--rv-texto); }
/* linhas e celulas com cor propria no HTML (bgcolor) viram escuras */
html.rv-moderno #ContentColumn tr[bgcolor],
html.rv-moderno #ContentColumn td[bgcolor],
html.rv-moderno #ContentColumn tr[style*="background"],
html.rv-moderno #ContentColumn td[style*="background"],
html.rv-moderno #ContentColumn .TableContentContainer,
html.rv-moderno #ContentColumn .InnerTableContainer,
html.rv-moderno #ContentColumn .TableShadowContainer { background: transparent !important; background-color: transparent !important; }
html.rv-moderno #ContentColumn table tr:nth-child(odd) > td { background-color: rgba(255, 255, 255, 0.025); }
html.rv-moderno #ContentColumn table tr:nth-child(even) > td { background-color: rgba(255, 255, 255, 0.055); }
html.rv-moderno #ContentColumn td b,
html.rv-moderno #ContentColumn .LabelV,
html.rv-moderno #ContentColumn .LabelH { color: var(--rv-ouro2); }
html.rv-moderno #ContentColumn small,
html.rv-moderno #ContentColumn .Text { color: var(--rv-suave); }

/* cabecalho das tabelas (fundo bege em imagem no classico) */
html.rv-moderno #ContentColumn .LabelH,
html.rv-moderno #ContentColumn td.LabelH,
html.rv-moderno #ContentColumn tr.LabelH,
html.rv-moderno #ContentColumn tr.LabelH td,
html.rv-moderno #ContentColumn table tr:first-child > td[style*="background-image"] {
  background: linear-gradient(180deg, #2c2518, #1f1b13) !important;
  background-image: none !important;
  color: var(--rv-ouro2) !important;
  font-weight: 600;
}

/* anuncio (BannerModal): fica por cima de tudo e fecha clicando fora ou no X.
   Nada de backdrop-filter/transform nas caixas: isso prendia o modal dentro da
   caixa de noticias e o fundo escuro bloqueava os cliques. */
html.rv-moderno #BannerModal { z-index: 2000; }
html.rv-moderno .modal-backdrop { z-index: 1990; }
#BannerModal .ravox-fechar-banner {
  position: absolute; top: 4px; right: 8px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.8); background: rgba(0,0,0,.65);
  color: #fff; font-size: 20px; line-height: 28px; text-align: center; cursor: pointer;
}
#BannerModal .ravox-fechar-banner:hover { background: #b8102a; }