/* =====================================================================
   BP OT - template bpot: camada de compatibilidade
   As paginas do nucleo do MyAAC e as paginas custom do BP foram escritas
   para o tibiacom (TableContainer, CaptionContainer, Table1-5, BigButton,
   linhas com bgcolor de getStyle, .white, .LabelV...). Aqui esse markup
   ganha o visual Coroa dentro do pergaminho, sem editar as paginas.
   Regras genericas de elemento usam :where() (especificidade zero) para
   que o CSS proprio de cada pagina custom continue valendo.
   ===================================================================== */

/* ---------- 0. Area de conteudo ---------- */
.painel.conteudo { overflow-x: auto; overflow-y: visible; font-size: 13.5px; }
:where(.conteudo) :where(img, iframe, video, canvas) { max-width: 100%; }
:where(.conteudo) :where(img) { height: auto; }
:where(.conteudo) :where(table) { font-size: 13px; }
:where(.conteudo) :where(h1, h2, h3) { color: #3d1f08; margin: 10px 0 8px; }
:where(.conteudo) :where(h1) { font-size: 22px; }
:where(.conteudo) :where(h2) { font-size: 18px; }
:where(.conteudo) :where(h3) { font-size: 15px; }
:where(.conteudo) :where(h4, h5) { font-family: var(--fonte-titulo); color: #5a3110; margin: 10px 0 6px; }
:where(.conteudo) :where(small) { color: var(--tinta-suave); }
:where(.conteudo) :where(hr) { border: 0; height: 2px; margin: 14px 0; background: linear-gradient(90deg, transparent, var(--ouro-700) 20%, var(--ouro-300) 50%, var(--ouro-700) 80%, transparent); }
:where(.conteudo) :where(ul, ol) { padding-left: 22px; }
:where(.conteudo) :where(blockquote) { margin: 10px 0; padding: 8px 14px; background: rgba(255,255,255,.35); border-left: 4px solid var(--ouro-500); }
:where(.conteudo) :where(pre) { overflow-x: auto; padding: 10px; background: var(--marinho-900); color: var(--ouro-100); border: 1px solid var(--ouro-700); border-radius: 3px; font-size: 12.5px; }
:where(.conteudo) :where(pre) code { background: none; border: 0; padding: 0; }

/* imagens e molduras de template antigas (gif do tibiacom): o bpot nao tem essas imagens */
.conteudo img[src*="templates/bpot/images/"],
.conteudo .CaptionEdgeLeftTop, .conteudo .CaptionEdgeRightTop, .conteudo .CaptionBorderTop,
.conteudo .CaptionVerticalLeft, .conteudo .CaptionVerticalRight, .conteudo .CaptionBorderBottom,
.conteudo .CaptionEdgeLeftBottom, .conteudo .CaptionEdgeRightBottom,
.conteudo .TableShadowContainerRightTop, .conteudo .TableShadowRightTop, .conteudo .TableShadowContainer,
.conteudo .TableBottomShadow, .conteudo .TableBottomLeftShadow, .conteudo .TableBottomRightShadow,
.conteudo .BoxFrameHorizontal, .conteudo .BoxFrameVerticalLeft, .conteudo .BoxFrameVerticalRight,
.conteudo .BoxFrameEdgeLeftTop, .conteudo .BoxFrameEdgeRightTop, .conteudo .BoxFrameEdgeLeftBottom, .conteudo .BoxFrameEdgeRightBottom,
.conteudo .BigButtonOver, .conteudo .MediumButtonOver, .conteudo .Corner-tl, .conteudo .Corner-tr,
.conteudo .Corner-bl, .conteudo .Corner-br, .conteudo .CornerWrapper-b, .conteudo .Border_1,
.conteudo .BorderTitleText, .conteudo img.Title, .conteudo .LeftChain, .conteudo .RightChain,
.conteudo .TopButtonContainer, .conteudo .HeadlineBracer { display: none !important; }

/* caixas aninhadas no estilo tibiacom (.Box > .Border_2 > .Border_3 > .BoxContent) */
.conteudo .Box, .conteudo .Border_2, .conteudo .Border_3 { position: static; width: auto; height: auto; margin: 0; padding: 0; background: none !important; border: 0; }
.conteudo .BoxContent { padding: 0; background: none !important; min-height: 0; }

/* ---------- 1. TableContainer + CaptionContainer (o "cabecalho em faixa") ---------- */
.conteudo .TableContainer { position: relative; margin: 0 0 18px; max-width: 100%; }
.conteudo .CaptionContainer, .conteudo .CaptionInnerContainer { position: relative; width: auto; height: auto; padding: 0; background: none; }
.conteudo .TableContainer .CaptionContainer .Text,
.conteudo .TableContainer .Text {
  position: relative; display: block; height: auto; margin: 0; padding: 8px 14px;
  font: 700 12.5px/1.3 var(--fonte-titulo); letter-spacing: .09em; text-transform: uppercase;
  color: var(--creme); text-shadow: 0 1px 0 #000;
  background: var(--fundo-faixa);
  border: 2px solid transparent; border-image: var(--borda-ouro) 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 5px rgba(0,0,0,.35);
}
.conteudo .TableContainer .Text a { color: var(--ouro-300); }
.conteudo :is(.Table1, .Table2, .Table3, .Table4, .Table5) {
  width: 100%; border-collapse: collapse; margin: 0;
  background: linear-gradient(180deg, var(--perg-50), var(--perg-100)) !important;
  border: 1px solid var(--ouro-700); border-top: 0;
  box-shadow: 0 3px 8px rgba(60,35,10,.22);
}
.conteudo :is(.Table1, .Table2, .Table3, .Table4, .Table5) > tbody > tr > td { padding: 0; }
.conteudo .InnerTableContainer { width: auto; padding: 8px; }
.conteudo .InnerTableContainer > table { width: 100%; }
.conteudo .TableContentAndRightShadow, .conteudo .TableContentContainer { position: static; width: auto; padding: 0; background: none !important; border: 0 !important; }
.conteudo .TableContent { width: 100%; border: 1px solid var(--perg-borda) !important; background: rgba(255,255,255,.35); border-collapse: collapse; }
.conteudo .TableContent td { padding: 6px 8px; border-bottom: 1px solid rgba(120,90,50,.18); }
.conteudo .HeadlessTable { width: 100%; }
.conteudo .InnerTableButtonRow td { padding-top: 10px; }

/* linhas e rotulos */
.conteudo .Odd, .conteudo .Odd > td { background: rgba(255,255,255,.4); }
.conteudo .Even, .conteudo .Even > td { background: rgba(214,192,143,.38); }
.conteudo :is(.LabelV, .LabelV120, .LabelV150, .LabelV200) { font-weight: 700; color: #5a3110; vertical-align: top; white-space: nowrap; }
.conteudo .LabelV120 { width: 120px; }
.conteudo .LabelV150 { width: 150px; }
.conteudo .LabelV200 { width: 200px; }
.conteudo .LabelH, .conteudo .LabelH > td, .conteudo .LabelH > th {
  font: 700 11.5px/1.3 var(--fonte-titulo); letter-spacing: .07em; text-transform: uppercase;
  color: var(--creme); background: var(--fundo-faixa); text-shadow: 0 1px 0 #000;
}
.conteudo .LabelH a, .conteudo .LabelH small { color: var(--ouro-300); }

/* cabecalhos de tabela antigos: tr bgcolor = vdarkborder (#163a7c no bpot, #505050 hardcoded em paginas antigas) */
.conteudo [bgcolor="#163a7c"], .conteudo [bgcolor="#163A7C"],
.conteudo [bgcolor="#505050"], .conteudo [bgcolor="505050"] {
  background: var(--fundo-faixa) !important; color: var(--creme);
}
.conteudo [bgcolor="#163a7c"] > td, .conteudo [bgcolor="#505050"] > td,
.conteudo [bgcolor="#163a7c"] > th, .conteudo [bgcolor="#505050"] > th { color: var(--creme); border-bottom: 2px solid var(--ouro-500); }
.conteudo [bgcolor="#163a7c"] a, .conteudo [bgcolor="#505050"] a { color: var(--ouro-300); }
/* linhas zebradas de getStyle (cores do config.ini do bpot e as antigas do tibiacom) */
.conteudo [bgcolor="#D4C0A1"], .conteudo [bgcolor="#d4c0a1"] { background-color: var(--perg-200) !important; }
.conteudo [bgcolor="#F1E0C6"], .conteudo [bgcolor="#f1e0c6"] { background-color: var(--perg-50) !important; }
.conteudo tr[bgcolor] > td { border-bottom: 1px solid rgba(120,90,50,.16); }
.conteudo .myaac-table > thead > tr > :is(td, th) { background: var(--fundo-faixa) !important; color: var(--creme) !important; font-weight: 700; }

/* texto branco do tibiacom (fica sobre faixa azul) */
.conteudo .white, .conteudo td.white, .conteudo .white b, .conteudo .white a { color: var(--creme); }
.conteudo .white a:hover { color: #fff; }
.conteudo :is(.red, .ff_red, .ff_pagetextred) { color: var(--vermelho); }
.conteudo .green { color: var(--verde); }
.conteudo .orange { color: #b25a10; }
.conteudo .yellow { color: #9a6a12; }
.conteudo .grey, .conteudo .ff_pagetextgrey { color: #7a6a58; }
.conteudo .size_xs { font-size: 12px; }
.conteudo .size_xxs { font-size: 11px; }
.conteudo .FormFieldError { color: var(--vermelho); font-weight: 700; font-size: 12px; }
.conteudo .centralizeContent { text-align: center; }

/* ---------- 2. Botoes antigos ---------- */
.conteudo .BigButton, .conteudo .MediumButtonBackground {
  position: relative; display: inline-block; width: auto !important; height: auto !important;
  margin: 3px; background: none !important; vertical-align: middle;
}
.conteudo .BigButton > div, .conteudo .MediumButtonBackground > div { position: static; width: auto; height: auto; }
.conteudo .MediumButtonForm { display: inline-block; margin: 0; }
.conteudo :is(.BigButtonText, .MediumButtonText, .ButtonText):not(.btn),
:where(.conteudo) :where(input[type="submit"], input[type="button"], input[type="reset"], button:not([class])) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 16px; width: auto; height: auto; position: static;
  font: 700 12px/1 var(--fonte-texto); letter-spacing: .05em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.55);
  background: linear-gradient(180deg, #3a7fe0, #1f56b0 55%, #143c82);
  border: 1px solid #0b2550; border-radius: 3px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.35);
}
.conteudo :is(.BigButtonText, .MediumButtonText, .ButtonText):hover,
:where(.conteudo) :where(input[type="submit"], input[type="button"], button:not([class])):hover { filter: brightness(1.12); }
.conteudo .BigButton--verde .BigButtonText { background: linear-gradient(180deg, #45a84f, #22762c 55%, #155a1d); border-color: #0d3b12; }
.conteudo .BigButton--vermelho .BigButtonText { background: linear-gradient(180deg, #c8473c, #9a2f26 55%, #6e1d17); border-color: #3d0f0b; }
/* botao-imagem do nucleo (ex.: "Ver" casa no perfil, input type=image com gif do tibiacom).
   O bpot traz o seu proprio images/global/buttons/sbutton_view.gif (lupa em botao azul, sem texto, vale para
   PT/EN/PL); o alt continua sendo o rotulo acessivel. Os demais gifs caem no texto alternativo com cara de botao. */
.conteudo input[type="image"][src*="/images/global/buttons/"] {
  display: inline-block; box-sizing: border-box; width: auto !important; min-width: 44px; height: 30px !important;
  vertical-align: middle; cursor: pointer;
  font: 700 12px/28px var(--fonte-texto); letter-spacing: .05em; text-transform: uppercase; text-align: center; color: #fff;
  background: linear-gradient(180deg, #3a7fe0, #1f56b0 55%, #143c82); border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
.conteudo input[type="image"][src*="/images/global/buttons/"]:hover { filter: brightness(1.12); }

/* ---------- 3. Formularios ---------- */
:where(.conteudo) :where(input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], input:not([type]), select, textarea) {
  max-width: 100%; min-height: 32px; padding: 4px 9px;
  font: 500 13px var(--fonte-texto); color: var(--tinta);
  background: linear-gradient(180deg, #fffaf0, #f3e7cc);
  border: 1px solid var(--perg-borda); border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(60,35,10,.18);
}
:where(.conteudo) :where(textarea) { min-height: 80px; padding: 8px 9px; }
:where(.conteudo) :where(input, select, textarea):focus { outline: 2px solid var(--cristal); outline-offset: 0; border-color: var(--marinho-600); }
:where(.conteudo) :where(label) { cursor: pointer; }
:where(.conteudo) :where(fieldset) { border: 1px solid var(--perg-borda); border-radius: 3px; padding: 10px 12px; }
:where(.conteudo) :where(legend) { font-weight: 700; color: #5a3110; padding: 0 6px; }

/* ---------- 4. Mensagens do MyAAC (tools/css/messages.css) ---------- */
.conteudo .SmallBox { position: relative; margin: 10px 0; }
.conteudo .SmallBox .MessageContainer { position: relative; }
.conteudo .SmallBox :is(.Message, .ErrorMessage) { padding: 10px 14px; background: #fbe3d9; color: #6b1e13; border: 1px solid #b4544a; border-left: 5px solid var(--vermelho); border-radius: 3px; }
.conteudo .SmallBox .AttentionSign { display: none; }

/* ---------- 5. Noticias (arquivo) e paginas do nucleo ---------- */
.conteudo .NewsHeadline { margin: 0 0 10px; }
.conteudo .NewsHeadlineBackground { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; height: auto; padding: 8px 12px; background: var(--fundo-faixa) !important; color: var(--creme); border: 2px solid transparent; border-image: var(--borda-ouro) 1; }
.conteudo .NewsHeadlineBackground :is(.NewsHeadlineIcon) { display: none; }
.conteudo .NewsHeadlineDate, .conteudo .NewsHeadlineAuthor { position: static; font-size: 12px; color: #c6d7f5; }
.conteudo .NewsHeadlineText { position: static; font: 700 14px/1.3 var(--fonte-titulo); color: var(--creme); }

/* abas do nucleo (spells, highscores antigos) */
.conteudo .tab-panel { background: none; }

/* ---------- 6. Paginas custom do BP (bp-pages.css do tibiacom) no visual Coroa ---------- */
body.bpot .bp-classic { color: var(--tinta); font: 400 13.5px/1.65 var(--fonte-texto); }
body.bpot .bp-classic a { color: #1f4fa3; }
body.bpot .bp-classic :is(h1, h2, h3), body.bpot .bp-classic .brand { color: #3d1f08; font-family: var(--fonte-titulo); }
body.bpot .bp-classic :is(.panel, .steps, .dlcard, .create, .stat) { background: linear-gradient(180deg, #e2cfa6, #d8c294); border: 1px solid var(--perg-borda); border-radius: var(--raio); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 2px 3px 6px rgba(60,35,10,.2); }
body.bpot .bp-classic .panel h2, body.bpot .bp-classic .steps h3 {
  background: var(--fundo-faixa); color: var(--creme); border: 2px solid transparent; border-image: var(--borda-ouro) 1;
  font: 700 13px/1.3 var(--fonte-titulo); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 0 #000;
}
body.bpot .bp-classic :is(.btn, .dlbtn) {
  background: linear-gradient(180deg, #3a7fe0, #1f56b0 55%, #143c82); color: #fff; border: 1px solid #0b2550; border-radius: 3px;
  font: 700 12.5px/1.4 var(--fonte-texto); letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.35);
}
body.bpot .bp-classic .dlbtn { background: linear-gradient(180deg, #45a84f, #22762c 55%, #155a1d); border-color: #0d3b12; font-size: 15px; }
body.bpot .bp-classic :is(.btn, .dlbtn):hover { filter: brightness(1.12); background-image: none; }
body.bpot .bp-classic .btn:hover { background: linear-gradient(180deg, #3a7fe0, #1f56b0 55%, #143c82); }
body.bpot .bp-classic .dlbtn:hover { background: linear-gradient(180deg, #45a84f, #22762c 55%, #155a1d); }
body.bpot .bp-classic :is(.btn-ghost, .btn.alt) { background: linear-gradient(180deg, #a8875a, #7d5f37 55%, #5d4425); border-color: #3f2c14; }
body.bpot .bp-classic th { background: var(--fundo-faixa); color: var(--creme); border: 0; border-bottom: 2px solid var(--ouro-500); font: 700 11.5px/1.3 var(--fonte-titulo); letter-spacing: .07em; text-transform: uppercase; }
body.bpot .bp-classic td { background: rgba(255,255,255,.38); border: 0; border-bottom: 1px solid rgba(120,90,50,.2); }
body.bpot .bp-classic tr:nth-child(even) td { background: rgba(214,192,143,.35); }
body.bpot .bp-classic .pill { background: rgba(255,255,255,.45); border-color: var(--perg-borda); border-radius: 999px; }
body.bpot .bp-classic .key-box { background: var(--marinho-900); color: var(--ouro-100); border: 2px solid var(--ouro-500); }
body.bpot :is(.oh-header, .ml-header) { background: var(--fundo-faixa); border: 2px solid transparent; border-image: var(--borda-ouro) 1; }
body.bpot :is(.oh-section h3, .oh-table th) { background: var(--fundo-faixa); color: var(--creme); }
body.bpot :is(.oh-btn, .ml-btn) { background: linear-gradient(180deg, #3a7fe0, #1f56b0 55%, #143c82); border: 1px solid #0b2550; border-radius: 3px; color: #fff; }

/* ---------- 6b. Ficha do personagem: outfit em medalhao ----------
   O nucleo posiciona o outfit com margin-left fixo (376px) e position:absolute, pensado para a largura do
   tibiacom; aqui ele vira um medalhao centralizado acima da tabela de informacoes. */
.conteudo div:has(> img[src*="outfit"])[style*="position:absolute"],
.conteudo div[style*="border-radius:50px"][style*="position:absolute"] {
  position: relative !important; display: grid; place-items: center;
  width: 112px !important; height: 112px !important; margin: 0 auto 12px !important; padding: 0 !important;
  border: 3px solid var(--ouro-500) !important; border-radius: 50% !important; outline: 1px solid var(--ouro-900);
  background: radial-gradient(circle at 50% 38%, #34528f, #0b1630 70%);
  box-shadow: inset 0 0 18px rgba(0,0,0,.8), 0 0 16px rgba(79,168,255,.35);
  overflow: hidden;
}
.conteudo div:has(> img[src*="outfit"])[style*="position:absolute"] > img,
.conteudo div[style*="border-radius:50px"][style*="position:absolute"] > img {
  margin: -14px 0 0 -14px !important; width: 128px !important; height: 128px !important; max-width: none; image-rendering: pixelated;
}

/* tabelas largas no celular: o index.php embrulha a tabela que estoura a largura num .tabela-rolagem
   (rolagem horizontal propria + dica "deslize") */
.tabela-rolagem { position: relative; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tabela-rolagem::before {
  content: attr(data-dica); position: sticky; left: 0; display: block; margin: 0 0 4px; padding: 3px 8px;
  font: 600 11px/1.3 var(--fonte-texto); color: var(--creme); background: var(--marinho-700); border-radius: 3px;
  width: max-content; max-width: 100%;
}

/* ---------- 7. Celular ---------- */
@media (max-width: 899px) {
  .painel.conteudo { font-size: 13px; }
  .conteudo :is(.LabelV, .LabelV120, .LabelV150, .LabelV200) { width: auto; white-space: normal; }
  .conteudo .InnerTableContainer { padding: 4px; }
  .conteudo .TableContainer .Text { padding: 7px 10px; font-size: 11.5px; }
  :where(.conteudo) :where(input[type="text"], input[type="password"], input[type="email"], select, textarea) { max-width: 100%; }
  :where(.conteudo) :where(td) { overflow-wrap: break-word; }
  /* busca de personagem: rotulo, campo e botao empilhados */
  .conteudo form[action*="characters"] .InnerTableContainer > table,
  .conteudo form[action*="characters"] .InnerTableContainer > table > tbody,
  .conteudo form[action*="characters"] .InnerTableContainer > table > tbody > tr,
  .conteudo form[action*="characters"] .InnerTableContainer > table > tbody > tr > td { display: block; width: auto !important; }
  .conteudo form[action*="characters"] .InnerTableContainer td { padding: 4px 2px; }
  .conteudo form[action*="characters"] .InnerTableContainer input[name="name"] { width: 100% !important; }
  .conteudo form[action*="characters"] .BigButton { margin: 4px 0 0; }
}