/* === MOBILE: header con back.png + ajustes === */
@media (max-width: 900px){
  html,body{max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
  #Bodycontainer,#ContentRow,#ContentColumn,#MenuColumn,#ThemeboxesColumn{
    width:100%!important;max-width:100%!important;float:none!important;margin:0!important
  }
  #ThemeboxesColumn{display:none!important}

  /* Barra superior con textura back.png + degradado */
  #mobile-header{
    position:fixed; top:0; left:0; right:0; height:60px; z-index:9999;
    background:
      url('../images/mobile/back.png') center/cover no-repeat,
      radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,.07), transparent 60%),
      linear-gradient(180deg, rgba(30,74,29,.92) 0%, rgba(22,56,22,.92) 100%);
    background-blend-mode: normal, multiply, normal;
    border-bottom:2px solid #0f270f;
    transition:background .3s ease;
  }

  /* Logo centrado y más chico */
  #mobile-header .mobile-logo{
    position:absolute; left:50%; transform:translateX(-50%);
    top:8px; height:44px; width:auto; display:block;
    pointer-events:none;
  }

  /* Deja espacio para la barra */
  body{ padding-top:60px; }
  
  
  
  

/* Menú lateral (debajo de la barra) */
#Menu{
    display: none !important;
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 80%;
    max-width: 170px;

    /* Fondo con la misma imagen que la barra */
    background: url('../images/mobile/back.png') center/cover no-repeat,
                rgb(129, 122, 101); /* color de respaldo */
    background-blend-mode: multiply;

    padding: 1px 5px;
    overflow-y: auto;
    z-index: 10001;
}
  #Menu.open{ display:block!important; }



  /* Botón MENU */
  .mobile-btn{
    position:fixed; top:8px; left:20px; z-index:10002;
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px;
    background:#204c20; border:1px solid #0f270f; border-radius:10px;
  }
  .mobile-btn img{ width:45px; height:45px; display:block; }

  /* Botón LOGIN */
  .account-btn{
    position:fixed; top:8px; right:20px; z-index:10002;
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px;
    background:#204c20; border:1px solid #0f270f; border-radius:8px;
  }
  .account-btn img{ width:45px; height:45px; display:block; }
}

/* Ocultar login en escritorio */
@media (min-width: 901px){
  .account-btn{ display:none; }
  #mobile-header, #mobile-header .mobile-logo, .mobile-btn { display:none!important; }
  body { padding-top:0!important; }
}
@media (max-width: 900px){
  /* botones siempre arriba del overlay/drawer */
  .mobile-btn, .account-btn{ z-index: 10030; pointer-events:auto; }
  #mobile-header{ z-index: 10020; }
  #Menu{ z-index: 10015; }
  #mobile-overlay{ z-index: 10010; }

  /* el logo no bloquea clics */
  #mobile-header .mobile-logo{ z-index: 10021; pointer-events: none; }
}

/* ===== Fix: overlay visible cuando JS añade .show ===== */
#mobile-overlay.show { display: block !important; }

/* ===== Fix: ancho completo + zoom + límites de logo/medios ===== */
@media (max-width:900px){
  /* Evitar recorte lateral y permitir gestos */
  html, body{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    touch-action:auto;
  }
  /* Bloquear scroll del fondo cuando el menú lateral está abierto */
  body.mobile-drawer-open{
    overflow:hidden !important;
    height:100vh !important;
    touch-action:none !important;
  }

  /* Wrappers a 100% (a veces vienen fijos en px) */
  #MainHelper1,#MainHelper2,#ArtworkHelper1,#ArtworkHelper2,
  #Bodycontainer,#ContentRow,#ContentColumn,#MenuColumn,#ThemeboxesColumn{
    width:100% !important; max-width:100% !important; min-width:0 !important;
    float:none !important; margin:0 !important; box-sizing:border-box;
  }

  /* Tablas/cajas que desbordan en algunas subpáginas */
  .TableContainer, .TableContent, .TableContainer table{
    width:100% !important; max-width:100% !important;
  }
  .TableContainer table{ table-layout: fixed; }
  .TableContainer td{ word-break:break-word; overflow-wrap:anywhere; }

  /* Medios responsivos en el contenido (sin afectar header/botones) */
  #Bodycontainer img, #ContentRow img, #ContentColumn img,
  #ThemeboxesColumn img, #MenuColumn img,
  #Bodycontainer iframe, #ContentRow iframe, #ContentColumn iframe{
    max-width:100% !important; height:auto !important;
  }

  /* Limitar el tamaño del logo del header para que no tape */
  #mobile-header .mobile-logo{
    height:36px !important;         /* ajusta 32–40px si lo prefieres */
    max-width:140px !important;
    width:auto !important;
    top:8px;
  }

  /* Iconos dentro de los botones: tamaño consistente */
  .mobile-btn img,
  .account-btn img{ width:45px; height:45px; display:block; }

  /* Alineación del overlay con tu header de 60px */
  #mobile-overlay{ top:60px; }
  #Menu{ top:60px; }
}
/* === Overlay y animación del drawer === */
@media (max-width: 900px){
  /* Overlay de fondo (tap para cerrar) */
  #mobile-overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,.45);
    opacity:0; pointer-events:none;
    transition:opacity .18s ease-out;
  }
  #mobile-overlay.show{ opacity:1; pointer-events:auto; }

  /* Slide del menú lateral */
  #Menu{
    transform:translateX(-100%);
    transition:transform .18s ease-out;
    will-change: transform;
  }
  #Menu.open{ transform:translateX(0); }

  /* Bloquear scroll del body cuando drawer está abierto */
  body.no-scroll{ overflow:hidden; }

  /* Safe-area (iOS notch) */
  #mobile-header{
    padding-top: max(0px, env(safe-area-inset-top));
    height: calc(60px + env(safe-area-inset-top));
  }
  body{
    padding-top: calc(60px + env(safe-area-inset-top));
  }

  /* Tablas anchas: scroll horizontal suave */
  .BoxContent table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
/* === ZOOM SÓLO DEL CONTENIDO === */
@media (max-width: 900px){
  /* Contenedor que controla scroll cuando el contenido se escala */
  #zoom-wrapper{
    position: relative;
    width: 100%;
    overflow-x: auto;       /* si se amplía mucho, permite desplazar */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  /* Nodo que realmente se escala */
  #zoom-root{
    transform: scale(1);
    transform-origin: top center;
    will-change: transform;
  }

  /* Asegura que header, botones, menú y overlay NO se escalen */
  #mobile-header,
  .mobile-btn,
  .account-btn,
  #Menu,
  #mobile-overlay{
    transform: none !important;
  }

  /* Safe-area iOS + que el body deje espacio al header fijo */
  #mobile-header{
    padding-top: max(0px, env(safe-area-inset-top));
    height: calc(60px + env(safe-area-inset-top));
  }
  body{
    padding-top: calc(60px + env(safe-area-inset-top));
  }
}


/* === FIXES Account Management === */
@media (max-width: 900px){

  /* Evitar doble padding-top */
  body{
    padding-top: calc(60px + env(safe-area-inset-top)) !important;
  }

  /* Inputs y botones adaptables */
  input[type="text"], input[type="password"], input[type="email"], select, textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    font-size: 16px;
    padding: 8px;
  }

  input[type="submit"], button, .Button {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px;
    padding: 10px;
  }

  /* Cuadro de login responsivo */
  .TableContainer, .TableContent {
    width: 100% !important;
    max-width: 100% !important;
  }
  .TableContainer table{
    table-layout: auto !important;
  }
  .TableContainer td{
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
}

/* Zoom solo del contenido en Account Management */
@media (max-width: 900px){
  body.page-accountmanagement #zoom-wrapper{
    overflow-x: auto;
  }
  body.page-accountmanagement #zoom-root{
    transform: scale(1);
    transform-origin: top center;
  }
}
/* === HOTFIX MOBILE (Gesior) — tablas decorativas e imágenes === */
@media (max-width: 900px){

  /* 1) Revertir el truco global que volvía las tablas en bloques y cortaba el alto */
  .BoxContent table{
    display: table !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .TableContainer table{
    display: table !important;
    width: 100% !important;
    table-layout: auto !important;   /* evita columnas aplastadas */
  }
  .TableContainer{ overflow: visible !important; }

  /* 2) Imágenes dentro de celdas (quedaban muy chicas) */
  .BoxContent td img{
    max-width: 100% !important;
    height: auto !important;
  }

  /* 3) Avatares / outfits en listados: tamaño táctil cómodo */
  .BoxContent td img[outfit],
  .BoxContent td .outfit img{
    width: 64px !important;     /* sube o baja si quieres 56/72 */
    height: auto !important;
  }

  /* 4) Grillas/tabla de “clases” con imágenes (encabezado de whoisonline, etc.) */
  .BoxContent .stats,             /* si existe esa clase */
  .BoxContent .vocations-grid,    /* por si la usas */
  .BoxContent .classes-grid{
    width: 100% !important;
  }
  .BoxContent .stats img,
  .BoxContent .vocations-grid img,
  .BoxContent .classes-grid img{
    display: block;
    margin: 0 auto;
    height: auto !important;
    max-width: 100% !important;
  }

  /* 5) Si alguna tabla SÍ necesita scroll horizontal, usa un wrapper .scroll-x */
  .scroll-x{
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 6) Inputs del buscador en Who Is Online más cómodos en móvil */
  .BoxContent input[type="search"],
  .BoxContent input[type="text"]{
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px;
  }
}