/* ==========================================================================
   ALEXANDRIA - LA WEB EN EL MOVIL
   ==========================================================================
   Arregla lo que se veia mal en el movil:
     1. EL MENU: en algunas paginas desaparecia  ->  ahora SIEMPRE se ve,
        y se puede deslizar con el dedo de lado a lado  ✓
     2. El texto muy pequeño  ->  mas grande  ✓
     3. Los botones pequeños  ->  mas grandes (para el dedo)  ✓
     4. Las tarjetas de lado  ->  una debajo de otra  ✓
     5. Las tablas anchas  ->  se pueden deslizar  ✓
     6. La ficha de personaje  ->  en una columna  ✓
     7. Lo que se salia de la pantalla  ->  ya no se sale  ✓
   ========================================================================== */

/* ==========================================================================
   1) EL MENU: QUE SIEMPRE SE VEA Y SE PUEDA DESLIZAR
   ========================================================================== */
@media (max-width: 900px) {

  /* La cabecera: el logo arriba y el menu debajo */
  .cabecera-fila {
    flex-wrap: wrap !important;
    gap: .5rem !important;
    padding: .7rem 0 !important;
  }

  /* El menu: SIEMPRE visible, en una tira que se desliza con el dedo */
  .navegacion,
  .navegacion.navegacion,
  nav.navegacion {
    display: flex !important;
    flex-wrap: nowrap !important;
    order: 3;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    gap: .25rem !important;
    padding: .35rem 0 .2rem !important;
    scrollbar-width: thin;
  }
  .navegacion::-webkit-scrollbar { height: 4px; }
  .navegacion::-webkit-scrollbar-thumb { background: rgba(248,183,0,.35); border-radius: 4px; }

  .navegacion a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: .86rem !important;
    padding: .45rem .7rem !important;
  }

  /* Y que no haya botones de "abrir menu" que lo tapen */
  .menu-boton, .botonMenu, .hamburguesa { display: none !important; }
}

/* ==========================================================================
   2) EL TEXTO, MAS GRANDE  (que se lea sin acercar)
   ========================================================================== */
@media (max-width: 900px) {
  body { font-size: 16px !important; }

  p, li, td, dd, span, small, label, .nota, .subtitulo {
    font-size: max(15px, .95rem) !important;
    line-height: 1.7 !important;
  }

  /* Los textos muy pequeños (etiquetas) suben un poco */
  small, .nota, .pie p, .pie a, .respuesta-fecha, .noticia-meta {
    font-size: .86rem !important;
  }

  /* Los titulos */
  h1, .titulo-seccion { font-size: clamp(1.9rem, 8vw, 3rem) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
  h3 { font-size: clamp(1.15rem, 5vw, 1.5rem) !important; }
}

/* ==========================================================================
   3) LOS BOTONES, MAS GRANDES (para el dedo)
   ========================================================================== */
@media (max-width: 900px) {
  .boton, .boton-grande, button, .filtro, .pestanaClasificacion, .boton-citar {
    min-height: 46px !important;
    padding: .8rem 1.3rem !important;
    font-size: .95rem !important;
  }
  .boton-grande { width: 100% !important; text-align: center; }

  /* Las cajas de texto, mas altas */
  input[type="text"], input[type="password"], input[type="search"], textarea, select {
    min-height: 46px !important;
    font-size: 16px !important;    /* menos de 16 y el movil hace zoom solo */
    padding: .8rem !important;
  }
}

/* ==========================================================================
   4) LAS TARJETAS: UNA DEBAJO DE OTRA
   ========================================================================== */
@media (max-width: 900px) {
  .rejilla, .rejilla-2, .rejilla-3, .rejilla-4, .pie-columnas, .lista-respuestas {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .tarjeta { padding: 1.2rem 1.1rem !important; }
  .contenedor { padding-left: 1rem !important; padding-right: 1rem !important; }
  .seccion { padding: 2.2rem 0 !important; }
}

/* ==========================================================================
   5) LAS TABLAS ANCHAS: QUE SE DESLICEN
   ========================================================================== */
@media (max-width: 900px) {
  table, .tabla-clasificacion {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table th, table td, .tabla-clasificacion th, .tabla-clasificacion td {
    font-size: .88rem !important;
    padding: .6rem .7rem !important;
  }
}

/* ==========================================================================
   6) LA FICHA DE PERSONAJE EN EL MOVIL
   ========================================================================== */
@media (max-width: 900px) {
  /* Las dos columnas de la ficha, una debajo de otra */
  .ficha-columnas, .ficha-cuerpo, .rejilla-equipo, .equipo-rejilla {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .ranura, .ranura-objeto, .objeto { padding: .8rem !important; }

  /* El nivel de equipo y las piezas: mas juntos y algo mas pequeños */
  .dato-grande {
    padding: .7rem 1rem !important;
    gap: .7rem !important;
    margin: .35rem .5rem .35rem 0 !important;
    width: calc(50% - .6rem);
    display: inline-flex !important;
    justify-content: center;
  }
  .dato-grande > span { font-size: 2.1rem !important; }
  .dato-grande > small { font-size: .6rem !important; max-width: 90px !important; }
}

/* ==========================================================================
   7) LO QUE SE SALIA DE LA PANTALLA
   ========================================================================== */
@media (max-width: 900px) {
  html, body { max-width: 100% !important; overflow-x: hidden !important; }
  img, iframe, video, table, pre { max-width: 100% !important; }
  .contenedor, section, article, main { max-width: 100% !important; }

  /* La noticia: el texto largo no debe empujar */
  .noticia-cuerpo { padding: 1.2rem 1rem !important; word-wrap: break-word; overflow-wrap: break-word; }
  .noticia-cuerpo p, .respuesta-cuerpo { word-wrap: break-word; overflow-wrap: anywhere; }

  /* Las cabeceras con video, mas bajas */
  .seccion-video-cabecera, .noti-cabecera { min-height: 42vh !important; padding: 3rem 0 2.5rem !important; }
}

/* ==========================================================================
   8) EL PIE Y EL RESTO
   ========================================================================== */
@media (max-width: 900px) {
  .pie-columnas { grid-template-columns: 1fr !important; }
  .pie { font-size: .9rem; }
  .portada-logo { font-size: clamp(2.4rem, 13vw, 4rem) !important; }
  .portada-sub { font-size: clamp(1rem, 4.5vw, 1.4rem) !important; }
  .portada { min-height: 88vh !important; }
}

/* Pantallas muy pequeñas (moviles viejos) */
@media (max-width: 380px) {
  body { font-size: 15px !important; }
  .navegacion a { font-size: .8rem !important; padding: .4rem .55rem !important; }
  .tarjeta { padding: 1rem .9rem !important; }
}

/* ==========================================================================
   ARREGLO GORDO DEL MENU EN EL MOVIL
   ==========================================================================
   EL PROBLEMA: el menu salia EN VERTICAL, ocupando toda la pantalla.
                Faltaba forzar la direccion en FILA.
   ========================================================================== */

@media (max-width: 900px) {

  /* La cabecera: en fila, con el logo y el boton arriba */
  .cabecera { padding: 0 !important; }
  .cabecera-fila {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: .5rem !important;
    padding: .6rem 0 .3rem !important;
  }
  .marca { flex: 1 1 auto; min-width: 0; }
  .marca-texto strong { font-size: 1.1rem !important; }
  .marca-texto small { font-size: .58rem !important; letter-spacing: .06em !important; }
  #zonaUsuario { flex: 0 0 auto; }

  /* EL MENU: EN FILA, SIEMPRE EN FILA */
  .navegacion,
  .navegacion.navegacion,
  nav.navegacion,
  header .navegacion {
    display: flex !important;
    flex-direction: row !important;          /* <- ESTO FALTABA */
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    gap: .3rem !important;
    padding: .4rem 0 .5rem !important;
    margin: 0 !important;
    border-top: 1px solid rgba(248,183,0,.14);
  }

  /* Cada enlace, uno al lado del otro y que no se encojan */
  .navegacion > a,
  .navegacion a {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
    font-size: .84rem !important;
    padding: .45rem .75rem !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* Si el menu estuviera dentro de una lista, quitarla */
  .navegacion ul, .navegacion li {
    display: contents !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Y nada de menus desplegables tapando */
  .navegacion.abierto, .navegacion.activo {
    position: static !important;
    max-height: none !important;
  }
}

/* En moviles muy pequeños, todavia mas juntos */
@media (max-width: 420px) {
  .navegacion a { font-size: .78rem !important; padding: .4rem .6rem !important; }
  .marca-texto strong { font-size: 1rem !important; }
}
/* ==========================================================================
   QUE EL BOTON "ENTRAR" NO TAPE EL MENU
   ==========================================================================
   EL PROBLEMA: el boton Entrar y el menu se ponian en la misma linea,
                y el boton tapaba "CLASIFICACION".
   LA SOLUCION: obligar a que el menu ocupe TODA la linea el solo.
                (width: 100% no basta; hay que usar flex-basis: 100%)
   ========================================================================== */

@media (max-width: 900px) {
  .cabecera-fila {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  /* Fila 1: el nombre ALEXANDRIA, que ocupa lo que le sobre */
  .marca {
    flex: 1 1 auto !important;
    order: 1 !important;
    min-width: 0 !important;
  }

  /* Fila 1 (a la derecha): el boton de entrar o el nombre del usuario */
  #zonaUsuario, .zona-usuario, .usuarioBoton {
    flex: 0 0 auto !important;
    order: 2 !important;
    margin-left: auto !important;
  }

  /* Fila 2: EL MENU, el solo en toda la linea  */
  .navegacion,
  .navegacion.navegacion,
  nav.navegacion,
  header .navegacion {
    flex: 1 1 100% !important;      /* <- esto es lo que obliga a bajar de linea */
    order: 3 !important;
    width: auto !important;
    max-width: 100% !important;
    margin-top: .35rem !important;
    border-top: 1px solid rgba(248,183,0,.16);
  }

  /* Y margen a la derecha para que el ultimo enlace no quede pegado al borde */
  .navegacion a:last-child { margin-right: .5rem !important; }

  /* El boton de entrar, un poco mas pequeño en el movil */
  #zonaUsuario .boton, .usuarioBoton {
    padding: .55rem .9rem !important;
    min-height: 40px !important;
    font-size: .82rem !important;
    white-space: nowrap !important;
  }
}
/* ==========================================================================
   LA CABECERA EN EL MOVIL, CON REJILLA  (esto gana a todo lo anterior)
   ==========================================================================
   Con "flex" pasaban cosas raras: el boton se iba arriba, el nombre se
   cortaba... Con una REJILLA de 2 filas x 2 columnas queda EXACTO:

        +--------------------------+------------+
        |  ALEXANDRIA              |  [ENTRAR]  |   <- fila 1
        +--------------------------+------------+
        |  INICIO NOTICIAS GUIAS FORO ...        |   <- fila 2 (se desliza)
        +----------------------------------------+
   ========================================================================== */

@media (max-width: 900px) {
  .cabecera-fila {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "marca  boton"
      "menu   menu" !important;
    align-items: center !important;
    row-gap: .45rem !important;
    column-gap: .6rem !important;
    padding: .7rem 0 .4rem !important;
  }

  .marca {
    grid-area: marca !important;
    min-width: 0 !important;
    overflow: hidden !important;
    flex: none !important;
    order: 0 !important;
  }
  .marca-texto { display: block !important; }
  .marca-texto strong {
    display: block !important;
    font-size: 1.15rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
  .marca-texto small {
    display: block !important;
    font-size: .55rem !important;
    letter-spacing: .05em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* El boton de entrar (o el nombre del usuario), en su casilla */
  #zonaUsuario, .zona-usuario {
    grid-area: boton !important;
    margin: 0 !important;
    flex: none !important;
    order: 0 !important;
    justify-self: end !important;
  }
  #zonaUsuario .boton, #zonaUsuario button, .usuarioBoton {
    padding: .5rem .85rem !important;
    min-height: 38px !important;
    font-size: .8rem !important;
    white-space: nowrap !important;
  }

  /* El menu, en la fila de abajo, ocupando las DOS columnas */
  .navegacion,
  .navegacion.navegacion,
  nav.navegacion,
  header .navegacion {
    grid-area: menu !important;
    flex: none !important;
    order: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    gap: .25rem !important;
    margin: 0 !important;
    padding: .35rem 0 .45rem !important;
    border-top: 1px solid rgba(248,183,0,.16);
  }
  .navegacion a {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
    font-size: .82rem !important;
    padding: .42rem .7rem !important;
    margin: 0 !important;
  }

  .cabecera { padding: 0 !important; }
  .cabecera .contenedor { padding-left: 1rem !important; padding-right: 1rem !important; }
}
/* ==========================================================================
   QUE EL SUBTITULO "WORLD OF WARCRAFT · LEGION" QUEPA ENTERO
   ========================================================================== */
@media (max-width: 900px) {
  .marca-texto small {
    font-size: .5rem !important;
    letter-spacing: .015em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .marca-texto strong {
    font-size: 1.08rem !important;
    letter-spacing: .01em !important;
  }
  .marca { overflow: visible !important; }
}
@media (max-width: 430px) {
  .marca-texto small { font-size: .44rem !important; letter-spacing: 0 !important; }
  .marca-texto strong { font-size: .98rem !important; }
  #zonaUsuario .boton, .usuarioBoton { padding: .45rem .6rem !important; font-size: .74rem !important; }
}
@media (max-width: 380px) {
  .marca-texto small { font-size: .4rem !important; }
  .marca-texto strong { font-size: .9rem !important; }
}
/* ==========================================================================
   EL SELECTOR DE IDIOMA
   ========================================================================== */
.cajaIdioma { position: relative; display: inline-block; }
.selectorIdioma {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .7rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(248, 183, 0, .35);
  border-radius: 9px;
  color: #f8b700;
  font-family: inherit;
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
}
.selectorIdioma:hover { background: rgba(248, 183, 0, .15); color: #fff; }
.idiLogo { font-size: 1rem; line-height: 1; }
.listaIdiomas {
  position: absolute;
  top: 112%;
  right: 0;
  z-index: 300;
  display: none;
  flex-direction: column;
  min-width: 175px;
  padding: .4rem;
  background: linear-gradient(180deg, #131b25, #0a0f15);
  border: 1px solid rgba(248, 183, 0, .45);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .8);
}
.listaIdiomas.abierta { display: flex; }
.listaIdiomas button {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .5rem .7rem;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #c8d6e4;
  font-family: inherit;
  font-size: .86rem;
  text-align: left;
  cursor: pointer;
}
.listaIdiomas button:hover { background: rgba(248, 183, 0, .15); color: #fff; }
.listaIdiomas button.activo { color: #ffd98a; background: rgba(248, 183, 0, .1); }
/* Las banderas del selector de idioma (dibujadas, porque Windows no
   sabe mostrar las banderas de emoji) */
.idiBandera {
  width: 20px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
  flex: 0 0 auto;
}
.selectorIdioma .idiBandera { width: 22px; height: 15px; }
.listaIdiomas .idiBandera { margin-right: .15rem; }