/* ═══════════════════════════════════════════════════════
   HELTONIA CONTENT THEME — overrides basic.css
   Centro: limpio/moderno blanco  |  Menú y sidebar: oscuro (sin tocar)
   ═══════════════════════════════════════════════════════ */

/* ── Box principal de contenido ── */
.Content .Box {
  background: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important;
  margin: 0 0 14px 0 !important;
  overflow: hidden !important;
  color: #333 !important;
}

/* ── Ocultar decoraciones GIF (esquinas y borde top) — NO Border_2 ── */
.Content .Corner-tl,
.Content .Corner-tr,
.Content .Corner-bl,
.Content .Corner-br,
.Content .Border_1,
.Content .BottomCornersHelper,
.Content .CornerWrapper-b {
  display: none !important;
}

/* ── Barra de título del Box (reemplazar GIF verde por oscuro) ── */
.Content .BorderTitleText {
  background-image: none !important;
  background-color: #1c1600 !important;
  height: 30px !important;
  border-bottom: 2px solid #c49a00 !important;
  display: flex !important;
  align-items: center !important;
}
/* Ocultar la img del título (GIF con texto) y reemplazar con título real más adelante */
.Content img.Title {
  display: none !important;
}

/* ── Border_2 contiene el BoxContent — solo quitar colores GIF ── */
.Content .Border_2 {
  background-color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
}
.Content .Border_3 {
  border: none !important;
}

/* ── BoxContent — área de contenido real ── */
.Content .BoxContent {
  background-image: none !important;
  background-color: #ffffff !important;
  color: #333 !important;
  min-height: unset !important;
  font-family: 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 12px !important;
  padding: 0 !important;
}
.Content .BoxContent td {
  color: #333 !important;
  font-family: 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 12px !important;
}

/* ── th en contenido ── */
.Content th {
  background: #1c1600 !important;
  color: #ffd700 !important;
  border-bottom: 2px solid #c49a00 !important;
  font-family: 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 12px !important;
  font-weight: bold !important;
  padding: 8px 6px !important;
}

/* ── Links ── */
.Content a {
  color: #a07800 !important;
  text-decoration: none !important;
}
.Content a:hover {
  color: #c49a00 !important;
  text-decoration: underline !important;
}

/* ── News ticker filas ── */
.Content .Odd {
  background-color: #ffffff !important;
}
.Content .Even {
  background-color: #faf7f0 !important;
}

/* ── TableContainer — highscores, characters, etc. ── */
.TableContainer {
  border: 1px solid #e0d8c8 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
}
.TableContainer .Odd {
  background-color: #ffffff !important;
}
.TableContainer .Even {
  background-color: #faf7f0 !important;
}
.TableContainer tr:hover td {
  background-color: #fff8e8 !important;
  color: #8a6000 !important;
}
.TableContainer td {
  color: #333 !important;
  font-family: 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 12px !important;
  padding: 7px 8px !important;
  border-bottom: 1px solid #f0ebe0 !important;
}
.TableContainer th {
  background: #1c1600 !important;
  color: #ffd700 !important;
  font-weight: bold !important;
  padding: 9px 8px !important;
  border-bottom: 2px solid #c49a00 !important;
  font-family: 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 12px !important;
}
.TableContainer a { color: #a07800 !important; }
.TableContainer a:hover { color: #c49a00 !important; }

/* Caption de tabla */
.TableContainer .CaptionContainer {
  background: #1c1600 !important;
  border-bottom: 2px solid #c49a00 !important;
}
.TableContainer .CaptionContainer .CaptionInnerContainer {
  background: #1c1600 !important;
  padding: 8px 12px !important;
}
.TableContainer .CaptionContainer .Text {
  color: #ffd700 !important;
  font-family: 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 13px !important;
  font-weight: bold !important;
}
.TableContainer .CaptionContainer .CaptionEdgeLeftTop,
.TableContainer .CaptionContainer .CaptionEdgeRightTop,
.TableContainer .CaptionContainer .CaptionEdgeLeftBottom,
.TableContainer .CaptionContainer .CaptionEdgeRightBottom,
.TableContainer .CaptionContainer .CaptionBorderTop,
.TableContainer .CaptionContainer .CaptionBorderBottom,
.TableContainer .CaptionContainer .CaptionVerticalLeft,
.TableContainer .CaptionContainer .CaptionVerticalRight {
  display: none !important;
}

.TableContentContainer {
  background: #ffffff !important;
  border: none !important;
}
.TableContainer .Table1,
.TableContainer .Table2,
.TableContainer .Table3,
.TableContainer .Table4,
.TableContainer .Table5 {
  background: #ffffff !important;
  border: none !important;
}
.TableContainer .Table2 .InnerTableContainer td,
.TableContainer .Table3 .TableContentAndRightShadow td {
  border: 1px solid #f0ebe0 !important;
  color: #333 !important;
}
.TableContainer .InnerTableContainer { color: #333 !important; }
.TableContainer .InnerTableContainer p { color: #333 !important; }

/* Sombras de tabla — ocultar */
.TableShadowContainerRightTop,
.TableShadowRightTop,
.TableShadowContainerRight,
.TableShadowRight,
.TableShadowContainerRightBottom,
.TableShadowRightBottom {
  display: none !important;
}

/* ── Formularios ── */
.Content select,
.Content input[type="text"],
.Content input[type="password"],
.Content input[type="email"],
.Content textarea {
  background: #fff !important;
  color: #333 !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  padding: 5px 8px !important;
  font-family: 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 12px !important;
}
.Content select:focus,
.Content input:focus {
  border-color: #c49a00 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(196,154,0,0.15) !important;
}

/* ── Botones submit ── */
.Content input[type="submit"],
.Content button {
  background: linear-gradient(135deg, #c49a00, #f0c830, #c49a00) !important;
  color: #000 !important;
  border: 1px solid #a07800 !important;
  border-radius: 4px !important;
  padding: 7px 20px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  font-family: 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 12px !important;
}
.Content input[type="submit"]:hover {
  background: linear-gradient(135deg, #f0c830, #ffe066, #f0c830) !important;
}

/* ── Divisores ── */
hr { border-color: #e8e0cc !important; }

/* ── BigButton (botones estilo Tibia) ── */
.Content .BigButton {
  background-image: none !important;
  background: linear-gradient(135deg, #c49a00, #f0c830, #c49a00) !important;
  border: 1px solid #a07800 !important;
  border-radius: 5px !important;
  height: 30px !important;
  min-width: 120px !important;
  box-shadow: 0 2px 6px rgba(180,130,0,0.35) !important;
  overflow: hidden !important;
  transition: all 0.2s !important;
}
.Content .BigButton:hover {
  background: linear-gradient(135deg, #f0c830, #ffe066, #f0c830) !important;
  box-shadow: 0 3px 10px rgba(212,175,55,0.55) !important;
}
.Content .BigButton > div {
  width: 100% !important;
  height: 30px !important;
  position: relative !important;
}
.Content .BigButtonOver {
  display: none !important;
}
.Content .BigButtonText {
  background: transparent !important;
  color: #1a0e00 !important;
  font-family: 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 12px !important;
  font-weight: bold !important;
  text-shadow: none !important;
  height: 30px !important;
  width: 100% !important;
  cursor: pointer !important;
}

/* ── Hint box (Register Account hint) ── */
.Content .TableContainer .Table1 .InnerTableContainer {
  color: #333 !important;
}

/* ── Fix hover: solo filas de datos (Odd/Even), no headers ── */
.TableContainer tr:hover td {
  background-color: inherit !important;
  color: inherit !important;
}
.TableContainer tr.Odd:hover td,
.TableContainer tr.Even:hover td {
  background-color: #fff8e8 !important;
  color: #8a6000 !important;
  transition: background-color 0.15s;
}

/* ── Fix overflow: no cortar imágenes de outfit ── */
.TableContainer {
  overflow: visible !important;
}