/* LuceraOT V323 - cosmetic staging; keeps Tibia/MyAAC forms intact */
html { min-height:100%; background:#06101d; }
body {
  background-color:#06101d !important;
  background-image:linear-gradient(180deg,rgba(2,7,15,.16) 0%,rgba(2,7,15,.12) 42%,rgba(2,7,15,.82) 100%),url('./lucera-batalla.webp') !important;
  background-repeat:no-repeat,no-repeat !important;
  background-size:cover,cover !important;
  background-position:center top,center top !important;
  background-attachment:fixed,fixed !important;
  min-height:100vh !important;
}
#ArtworkHelper { position:relative; min-height:100vh; background:none !important; }
#ArtworkHelper::before {
  content:""; position:absolute; z-index:1; pointer-events:none;
  top:8px; left:50%; transform:translateX(-50%);
  width:min(600px,72vw); height:282px;
  background:url('./lucera-logo.webp') center center/contain no-repeat;
  filter:drop-shadow(0 10px 19px rgba(0,0,0,.85));
}
#Bodycontainer { position:relative; max-width:1370px; min-width:1000px; }
#ContentRow { top:292px !important; padding-bottom:85px; }
#LeftArtwork #TibiaLogoArtworkTop,
#LeftArtwork #TibiaLogoArtworkBottom,
#LeftArtwork #LogoLink { display:none !important; }
#MenuColumn { margin-left:10px; width:186px; }
#ThemeboxesColumn { margin-right:9px; width:200px; }
#ContentColumn { margin-left:205px; margin-right:220px; }
#ContentColumn .Content { filter:drop-shadow(0 8px 16px rgba(0,0,0,.74)); }
#ContentColumn .BoxContent { box-shadow:inset 0 0 18px rgba(59,34,12,.12); }
#MenuColumn,#ThemeboxesColumn { filter:drop-shadow(0 9px 16px rgba(0,0,0,.86)); }
#Footer { color:#e8d3ac !important; text-shadow:0 2px 5px #000; }
@media (max-width:1050px) {
 #Bodycontainer { min-width:960px; }
 #ContentRow { top:265px !important; }
 #ArtworkHelper::before { width:480px; height:250px; }
}


/* LUCERAOT V327 - Logo encima del menu Login */

/* Retirar el logo gigante del centro */
#ArtworkHelper::before {
  content: none !important;
  display: none !important;
}

/* El logo ahora es un enlace real, accesible y clicable */
#LeftArtwork .lucera-home-logo {
  position: absolute;
  top: -171px;
  left: -5px;
  width: 225px;
  height: 165px;
  display: block;
  z-index: 80;
  text-decoration: none;
  cursor: pointer;
}

#LeftArtwork .lucera-home-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.9));
  transition: transform .18s ease, filter .18s ease;
}

#LeftArtwork .lucera-home-logo:hover img,
#LeftArtwork .lucera-home-logo:focus-visible img {
  transform: scale(1.045);
  filter: drop-shadow(0 8px 16px rgba(42,139,255,.7));
}

#LeftArtwork .lucera-home-logo:focus-visible {
  outline: 2px solid #69baff;
  outline-offset: 3px;
}

@media (max-width:1050px) {
  #LeftArtwork .lucera-home-logo {
    width: 205px;
    height: 148px;
    top: -153px;
    left: 0;
  }
}


/* ===========================================
   LUCERAOT V329 - FIX LOGO IZQUIERDO
   =========================================== */

/* Retirar logo generado encima del contenido */
#ArtworkHelper::before,
#ArtworkHelper:before {
    content: none !important;
    display: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Quitar elementos antiguos del logo del template */
#LeftArtwork #TibiaLogoArtworkTop,
#LeftArtwork #TibiaLogoArtworkBottom,
#LeftArtwork #LogoLink {
    display: none !important;
}

/* Logo compacto encima del boton Login */
a.lucera-home-logo,
#LeftArtwork a.lucera-home-logo {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: none !important;
    clear: both !important;
    width: 180px !important;
    height: 125px !important;
    max-width: 180px !important;
    max-height: 125px !important;
    margin: 0 auto 6px auto !important;
    padding: 0 !important;
    z-index: 80 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    overflow: visible !important;
    background: transparent !important;
}

/* Impedir que la imagen use su tamaño original */
a.lucera-home-logo > img,
#LeftArtwork a.lucera-home-logo > img {
    display: block !important;
    position: static !important;
    box-sizing: border-box !important;
    width: 180px !important;
    height: 125px !important;
    max-width: 100% !important;
    max-height: 125px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transform: none !important;
    filter: drop-shadow(0 4px 7px rgba(0,0,0,.85));
}

/* Brillo al pasar el mouse */
a.lucera-home-logo:hover > img {
    filter: drop-shadow(0 4px 10px rgba(46,148,255,.9));
}

a.lucera-home-logo:focus-visible {
    outline: 2px solid #78c5ff !important;
    outline-offset: 2px;
}


/* LuceraOT V332 - asegurar interaccion de menus */
#MenuColumn .menuitem {
  position: relative;
  z-index: 90;
  pointer-events: auto;
}

#MenuColumn .MenuButton,
#MenuColumn .Submenuitem {
  cursor: pointer;
  pointer-events: auto;
}

#LeftArtwork a.lucera-home-logo {
  z-index: 10 !important;
}


/* LUCERAOT V333 - MENU ARRIBA 100PX */

/* Mueve todo el conjunto sin alterar los botones internos */
#MenuColumn {
    position: relative !important;
    top: -100px !important;
}

/* Mantener el logo y los botones clicables */
#MenuColumn a,
#MenuColumn .MenuButton,
#MenuColumn .Submenuitem {
    pointer-events: auto !important;
}



/* LUCERAOT V334 - CONTENIDO CENTRAL ARRIBA */

/*
  Subir solamente el contenido central.
  No alterar MenuColumn ni ThemeboxesColumn.
*/
#ContentColumn {
    position: relative !important;
    top: -350px !important;
}

/* Mantener enlaces y formularios funcionales */
#ContentColumn a,
#ContentColumn button,
#ContentColumn input,
#ContentColumn select {
    pointer-events: auto !important;
}


/* LUCERAOT V336 - GRID ESTABLE */

/*
 Tres columnas independientes.
 Se neutralizan los desplazamientos anteriores.
*/

#ArtworkHelper {
  position: relative !important;
  min-height: 100vh !important;
}

#Bodycontainer {
  position: relative !important;
  box-sizing: border-box !important;
  width: calc(100% - 32px) !important;
  max-width: 1540px !important;
  min-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Contenedor de las tres columnas */
#ContentRow {
  position: relative !important;
  display: grid !important;

  grid-template-columns:
    200px
    minmax(0, 1fr)
    245px !important;

  column-gap: 14px !important;
  align-items: start !important;

  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;

  top: 145px !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  margin: 0 auto !important;
  padding: 0 0 100px !important;
  transform: none !important;
}

/* Columna izquierda */
#ContentRow > #MenuColumn {
  grid-column: 1 !important;
  grid-row: 1 !important;

  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;

  width: 200px !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  float: none !important;

  align-self: start !important;
}

/* Columna central */
#ContentRow > #ContentColumn {
  grid-column: 2 !important;
  grid-row: 1 !important;

  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 145px 0 0 !important;
  padding: 0 !important;
  float: none !important;

  align-self: start !important;
  transform: none !important;
}

/* Columna derecha */
#ContentRow > #ThemeboxesColumn {
  grid-column: 3 !important;
  grid-row: 1 !important;

  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;

  width: 245px !important;
  min-width: 0 !important;

  margin: 145px 0 0 !important;
  padding: 0 !important;
  float: none !important;

  align-self: start !important;
  transform: none !important;
}

/* El contenido no debe empujar otras columnas */
#ContentColumn .Content {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Los desplegables crecen solamente en la izquierda */
#MenuColumn .Submenu {
  max-width: 100%;
}

#MenuColumn .MenuButton,
#MenuColumn .Submenuitem {
  cursor: pointer;
  pointer-events: auto;
}

/* Logo compacto arriba de Login */
#MenuColumn a.lucera-home-logo {
  width: 180px !important;
  height: 125px !important;
  max-width: 180px !important;
  margin: 0 auto 6px !important;
  display: block !important;
}

#MenuColumn a.lucera-home-logo > img {
  width: 180px !important;
  height: 125px !important;
  object-fit: contain !important;
}

/* Evitar que el layout vuelva al sistema anterior */
@media (max-width: 1050px) {
  #ContentRow {
    grid-template-columns:
      190px minmax(0,1fr) 220px !important;
    top: 145px !important;
  }

  #ContentRow > #MenuColumn {
    width: 190px !important;
  }

  #ContentRow > #ThemeboxesColumn {
    width: 220px !important;
  }
}


/* LUCERAOT V337 - COMPACTAR CONTENIDO CENTRAL */

/* Quitar alturas forzadas del centro */
#ContentColumn,
#Content,
#CenterColumn,
.Content,
.ContentColumn {
    height: auto !important;
    min-height: 0 !important;
}

/* Compactar tablas/cajas del contenido central */
#ContentColumn .TableContainer,
#ContentColumn .TableContentContainer,
#ContentColumn .TableContentAndRightShadow,
#ContentColumn .InnerTableContainer,
#ContentColumn .InnerTableRightShadow,
#ContentColumn .TableShadow,
#ContentColumn .BoxContent,
#ContentColumn .BoxContentText,
#ContentColumn table,
#ContentColumn tbody,
#ContentColumn tr,
#ContentColumn td {
    height: auto !important;
    min-height: 0 !important;
}

/* Evitar paneles gigantes vacíos */
#ContentColumn .TableContentContainer,
#ContentColumn .InnerTableContainer,
#ContentColumn .BoxContent {
    padding-bottom: 8px !important;
}

/* El formulario de login interno debe quedar visible y pegado arriba */
#ContentColumn form,
#ContentColumn .LoginBox,
#ContentColumn .TableContent {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

/* Espaciado general más limpio */
#ContentColumn > div,
#ContentColumn > table {
    margin-bottom: 14px !important;
}


/* ==================================================
   LUCERAOT_V446_LOGO_CENTERED
   Logo 235x163 y centrado sobre Login
   Solo presentacion; no modifica enlaces ni botones
   ================================================== */

#MenuColumn #LeftArtwork {
    overflow: visible !important;
}

#MenuColumn #LeftArtwork a.lucera-home-logo {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;

    width: 235px !important;
    min-width: 235px !important;
    max-width: 235px !important;

    height: 163px !important;
    min-height: 163px !important;
    max-height: 163px !important;

    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: translateX(-50%) !important;
    transform-origin: center center !important;

    margin: 0 0 9px !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;

    overflow: visible !important;
    background: transparent !important;
    z-index: 10 !important;
}

#MenuColumn #LeftArtwork a.lucera-home-logo > img {
    display: block !important;

    width: 235px !important;
    min-width: 235px !important;
    max-width: 235px !important;

    height: 163px !important;
    min-height: 163px !important;
    max-height: 163px !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    transform: none !important;

    filter: drop-shadow(
        0 7px 13px rgba(0,0,0,.85)
    ) !important;
}

#MenuColumn #LeftArtwork a.lucera-home-logo:hover > img,
#MenuColumn #LeftArtwork a.lucera-home-logo:focus-visible > img {
    filter: drop-shadow(
        0 7px 15px rgba(47,143,255,.72)
    ) !important;
}

/* Conserva el centro del logo en ventanas menores */
@media (max-width: 1050px) {
    #MenuColumn #LeftArtwork a.lucera-home-logo {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;

        height: 153px !important;
        min-height: 153px !important;
        max-height: 153px !important;
    }

    #MenuColumn #LeftArtwork a.lucera-home-logo > img {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;

        height: 153px !important;
        min-height: 153px !important;
        max-height: 153px !important;
    }
}


/* ==================================================
   LUCERAOT_V448_LOGO_LEFT_FINE_TUNE
   Ajuste visual: mover el logo 10px a la izquierda
   sin cambiar tamaño ni botones
   ================================================== */

#MenuColumn #LeftArtwork a.lucera-home-logo {
    left: calc(50% - 10px) !important;
    transform: translateX(-50%) !important;
}

@media (max-width: 1050px) {
    #MenuColumn #LeftArtwork a.lucera-home-logo {
        left: calc(50% - 8px) !important;
        transform: translateX(-50%) !important;
    }
}


/* ==================================================
   LUCERAOT_V453_LOGO_OPTICAL_LEFT
   Ajuste optico adicional:
   mover el logo 24px a la izquierda
   ================================================== */

#MenuColumn #LeftArtwork a.lucera-home-logo {
    left: calc(50% - 24px) !important;
    transform: translateX(-50%) !important;
}

@media (max-width: 1050px) {
    #MenuColumn #LeftArtwork a.lucera-home-logo {
        left: calc(50% - 20px) !important;
        transform: translateX(-50%) !important;
    }
}


/* ====================================================
   LUCERAOT_V456_REAL_LOGO_SELECTOR
   Selector correcto: logo hijo directo del MenuColumn
   ==================================================== */

#MenuColumn > a.lucera-home-logo {
    display: block !important;
    position: relative !important;

    box-sizing: border-box !important;

    width: 235px !important;
    min-width: 235px !important;
    max-width: 235px !important;

    height: 163px !important;
    min-height: 163px !important;
    max-height: 163px !important;

    left: -24px !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;
    margin: 0 0 9px 0 !important;
    padding: 0 !important;

    float: none !important;
    overflow: visible !important;
}

#MenuColumn > a.lucera-home-logo > img {
    display: block !important;

    width: 235px !important;
    min-width: 235px !important;
    max-width: 235px !important;

    height: 163px !important;
    min-height: 163px !important;
    max-height: 163px !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

@media (max-width: 1050px) {
    #MenuColumn > a.lucera-home-logo {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;

        height: 153px !important;
        min-height: 153px !important;
        max-height: 153px !important;

        left: -20px !important;
    }

    #MenuColumn > a.lucera-home-logo > img {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;

        height: 153px !important;
        min-height: 153px !important;
        max-height: 153px !important;
    }
}