/* ==========================================================================
   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; }
/* --- ALEXANDRIA: el menu SIEMPRE en una sola linea --- */
.cabecera .navegacion { flex-wrap: nowrap !important; white-space: nowrap !important; align-items: center; }
.cabecera .navegacion a { white-space: nowrap !important; flex: 0 0 auto; }
.cabecera .cabecera-fila { flex-wrap: nowrap !important; }
@media (max-width: 1180px) { .cabecera .navegacion a { font-size: .82rem !important; letter-spacing: 0 !important; } }
@media (max-width: 1024px) { .cabecera .navegacion a { font-size: .74rem !important; padding-left: .35rem !important; padding-right: .35rem !important; } }
/* Iconos que pinta Wowhead dentro de las fichas */
.apItem .iconmedium, .apItem .iconlarge, .apItem img { float: right; margin-left: .6rem; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); }
.apItem strong { padding-right: 3.4rem; }
.apItemId { display: none; }

/* Fichas de objetos de la pagina apoyar */
.apItems { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; }
.apItem { position: relative; display: flex; align-items: center; gap: .9rem; text-decoration: none;
          background: rgba(12,18,26,.72); border: 1px solid rgba(255,255,255,.10);
          border-radius: 14px; padding: .85rem .95rem; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.apItem:hover { transform: translateY(-3px); border-color: rgba(200,162,74,.6); box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.apItemIcono { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 10px;
               border: 2px solid rgba(200,162,74,.5); box-shadow: 0 3px 10px rgba(0,0,0,.5); object-fit: cover; }
.apItemTexto { display: block; min-width: 0; flex: 1 1 auto; }
.apItemTexto strong { display: block; color: #fff; font-size: 1rem; line-height: 1.25; margin-bottom: .18rem; }
.apItemNota { display: block; color: #a9b8c8; font-size: .85rem; line-height: 1.3; }
.apItemId { position: absolute; top: .5rem; right: .7rem; font-size: .7rem; color: #6d7f92; letter-spacing: .04em; }
.apItem-precompra   { border-left: 3px solid #6bbf59; }
.apItem-coleccionista { border-left: 3px solid #4a90d9; }
.apItem-tienda      { border-left: 3px solid #c8a24a; }
.apItem-tcg         { border-left: 3px solid #a15fd9; }
.apItem-epico .apItemIcono { border-color: rgba(163,53,238,.75); }
.apItem-raro  .apItemIcono { border-color: rgba(0,112,221,.75); }
@media (max-width: 560px) { .apItemId { display: none; } .apItem { gap: .7rem; } .apItemIcono { flex-basis: 40px; width: 40px; height: 40px; } }

/* ===== APOYAR: boton premium en el menu ===== */
.cabecera .navegacion a.navPremium {
  position: relative; overflow: hidden; margin-left: .4rem;
  padding: .42rem 1rem !important;
  border-radius: 999px;
  color: #1c1405 !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  background: linear-gradient(135deg, #ffeaa7 0%, #d9ae4e 38%, #fff4cf 58%, #c6952c 100%);
  box-shadow: 0 2px 12px rgba(200,162,74,.5), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cabecera .navegacion a.navPremium:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 20px rgba(230,190,90,.75), inset 0 1px 0 rgba(255,255,255,.75);
}
.cabecera .navegacion a.navPremium::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.85), transparent);
  transform: skewX(-20deg); animation: navBrillo 3.6s ease-in-out infinite;
}
@keyframes navBrillo { 0% { left: -60%; } 55% { left: 135%; } 100% { left: 135%; } }

/* ===== CHAPA COLABORADOR ===== */
.chapa-colaborador {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .85rem; border-radius: 999px;
  font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: #2b1d04; text-decoration: none; white-space: nowrap;
  background: linear-gradient(135deg, #fff0bd 0%, #e9bb4a 34%, #fff6d8 54%, #c8952f 100%);
  border: 1px solid rgba(255,244,205,.9);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  box-shadow: 0 0 0 1px rgba(120,86,20,.35), 0 3px 12px rgba(200,162,74,.5), inset 0 1px 0 rgba(255,255,255,.75);
  animation: chapaLatido 3.2s ease-in-out infinite;
}
.chapa-colaborador::after {
  content: ''; position: absolute; top: 0; left: -70%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.95), transparent);
  transform: skewX(-20deg); animation: chapaBrillo 2.8s ease-in-out infinite;
}
.chapa-colaborador .chapaIcono { font-size: .95rem; line-height: 1; }
@keyframes chapaLatido {
  0%, 100% { box-shadow: 0 0 0 1px rgba(120,86,20,.35), 0 3px 12px rgba(200,162,74,.45), inset 0 1px 0 rgba(255,255,255,.75); }
  50%      { box-shadow: 0 0 0 1px rgba(120,86,20,.35), 0 6px 22px rgba(235,196,100,.8), inset 0 1px 0 rgba(255,255,255,.9); }
}
@keyframes chapaBrillo { 0% { left: -70%; } 60% { left: 145%; } 100% { left: 145%; } }
.chapa-colaborador.chapaGrande { font-size: .92rem; padding: .5rem 1.3rem; }

/* Que el menu siga en UNA linea con 9 apartados */
@media (min-width: 1181px) {
  .cabecera .navegacion { gap: .02rem !important; }
  .cabecera .navegacion a { padding-left: .6rem !important; padding-right: .6rem !important; }
}

/* Demostracion de la chapa */
.apDemo { display: grid; gap: .8rem; }
.apDemoFila { display: grid; grid-template-columns: 175px 1fr; gap: 1rem; align-items: center; }
.apDemoEtiqueta { color: #e8c67a; font-size: .88rem; letter-spacing: .05em; text-transform: uppercase; }
.apDemoCaja { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
              background: rgba(12,18,26,.72); border: 1px solid rgba(255,255,255,.10);
              border-radius: 12px; padding: .75rem 1rem; }
.apDemoAvatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
                background: linear-gradient(135deg,#3b4b5c,#1b2530); color: #e8c67a; font-weight: 800; border: 1px solid rgba(200,162,74,.4); }
.apDemoPuesto { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
                background: linear-gradient(135deg,#ffe9a8,#c8a24a); color: #1c1405; font-weight: 800; }
.apDemoNombre { color: #fff; font-weight: 600; }
.apDemoExtra { margin-left: auto; color: #8b9cad; font-size: .85rem; }
@media (max-width: 700px) { .apDemoFila { grid-template-columns: 1fr; gap: .35rem; } }
.apItem-tabarda { border-left: 3px solid #e05a5a; }
.apItem-tabarda .apItemIcono { border-color: rgba(224,90,90,.7); }

/* Colaboradores de Alexandria (clasificacion) */
.seccionColab { padding: 3rem 0 1rem; }
.enlaceColab { color: #e8c67a; text-decoration: none; border-bottom: 1px solid rgba(232,198,122,.45); }
.enlaceColab:hover { color: #ffe9a8; }
.listaColab { display: grid; gap: .6rem; margin-top: 1.4rem; }
.colabFila { display: flex; align-items: center; gap: .9rem;
             background: rgba(12,18,26,.72); border: 1px solid rgba(255,255,255,.10);
             border-radius: 14px; padding: .8rem 1.1rem; }
.colabPuesto { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
               display: inline-flex; align-items: center; justify-content: center;
               background: rgba(255,255,255,.08); color: #cbd6e2; font-weight: 800; font-size: .9rem; }
.colabNombre { flex: 1 1 auto; color: #fff; font-weight: 600; font-size: 1.02rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colabTotal { flex: 0 0 auto; color: #e8c67a; font-weight: 700; font-size: .95rem; }
.colabOro    { border-color: rgba(232,198,122,.55); box-shadow: 0 0 24px rgba(200,162,74,.14) inset; }
.colabOro    .colabPuesto { background: linear-gradient(135deg,#ffe9a8,#c8a24a); color: #1c1405; }
.colabPlata  .colabPuesto { background: linear-gradient(135deg,#eef2f6,#a8b4c2); color: #1c2530; }
.colabBronce .colabPuesto { background: linear-gradient(135deg,#f0c9a0,#a9713f); color: #2a1a0c; }
@media (max-width: 620px) {
  .colabFila { flex-wrap: wrap; gap: .55rem; }
  .colabNombre { flex: 1 1 100%; order: 2; }
  .colabTotal { order: 3; margin-left: auto; }
  .chapa-colaborador { order: 4; }
}

/* Panel de colaboraciones (solo admin) */
.apAdmin { padding: 1.5rem 0 0; }
.apAdminCaja { background: rgba(14,20,28,.92); border: 2px solid rgba(200,162,74,.55); border-radius: 18px; padding: 1.6rem 1.7rem; box-shadow: 0 0 40px rgba(200,162,74,.12); }
.apAdminTitulo { color: #e8c67a; font-size: 1.15rem; letter-spacing: .07em; text-transform: uppercase; margin: 0 0 1.1rem; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.apAdminSolo { font-size: .68rem; background: rgba(200,162,74,.18); border: 1px solid rgba(200,162,74,.45); color: #f0d99a; border-radius: 999px; padding: .18rem .6rem; letter-spacing: .06em; }
.apAdminForm { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: .9rem; align-items: end; }
.apAdminForm label { display: flex; flex-direction: column; gap: .35rem; color: #cfd8e3; font-size: .86rem; }
.apAdminForm input, .apAdminForm select { background: rgba(6,10,14,.9); border: 1px solid rgba(255,255,255,.16); color: #fff; border-radius: 10px; padding: .62rem .75rem; font-size: .95rem; width: 100%; }
.apAdminForm input:focus, .apAdminForm select:focus { outline: none; border-color: rgba(200,162,74,.75); }
.apBotonPeq { background: linear-gradient(135deg,#c8a24a,#f0d99a); color: #17110a; font-weight: 700; border: none; border-radius: 10px; padding: .62rem 1.1rem; cursor: pointer; font-size: .84rem; letter-spacing: .04em; white-space: nowrap; }
.apBotonPeq:hover { filter: brightness(1.08); }
.apBotonGris { background: linear-gradient(135deg,#5a6b7d,#8b9cad); color: #0d1218; }
.apBotonRojo { background: linear-gradient(135deg,#a83a3a,#d96b6b); color: #fff; }
.apAdminAviso { min-height: 1.2rem; margin: .8rem 0 .2rem; font-size: .9rem; color: #a9b8c8; }
.apAdminMal { color: #ff9c9c; }
.apAdminBien { color: #9fdc9f; }
.apAdminSub { color: #e8c67a; font-size: .92rem; letter-spacing: .06em; margin: 1.4rem 0 .7rem; }
.apAdminLista { display: grid; gap: .7rem; }
.apAdmFila { background: rgba(8,12,17,.75); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: .8rem .95rem; display: grid; gap: .55rem; }
.apAdmHecho { border-color: rgba(107,191,89,.45); opacity: .82; }
.apAdmDatos { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.apAdmDatos strong { color: #fff; }
.apAdmImporte { color: #e8c67a; font-weight: 700; }
.apAdmRegalo { color: #a9b8c8; font-size: .88rem; }
.apAdmComando { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.apAdmComando code { flex: 1 1 auto; min-width: 0; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.12); color: #9fdc9f; border-radius: 8px; padding: .45rem .6rem; font-size: .8rem; overflow-x: auto; white-space: nowrap; }
.apAdmAcciones { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 900px) { .apAdminForm { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .apAdminForm { grid-template-columns: 1fr; } }
.apAdmCuenta { color: #8b9cad; font-size: .82rem; }
.apAdmTexto { flex: 1 1 auto; min-width: 0; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.12); color: #9fdc9f; border-radius: 8px; padding: .45rem .6rem; font-size: .78rem; font-family: Consolas, monospace; resize: vertical; white-space: pre; overflow-x: auto; }
.apAdmComando.dosBotones { align-items: flex-start; }
.apAdmBotonesCol { display: flex; flex-direction: column; gap: .4rem; }
.apAdmBotonesCol .apBotonPeq { width: 100%; text-align: center; font-size: .76rem; padding: .5rem .8rem; }
.apBotonGris2 { background: linear-gradient(135deg,#3f5062,#68798c); color: #e8eef4; }
.colabCaducado { color: #7d8ea0; font-size: .82rem; font-style: italic; }

/* ==========================================================================
   ARREGLO DEL BOTON DE IDIOMA EN EL MOVIL (13/10)
   El boton "ES" se estiraba y ocupaba una fila entera, y ademas cortaba
   el texto del logo ("WORLD OF WARCRAFT . LE..." en vez de LEGION).
   Solucion: que no se estire nunca y que el texto del logo no se corte.
   ========================================================================== */
@media (max-width: 900px) {

  /* La cabecera: los elementos se alinean arriba, no se estiran */
  .cabecera .cabecera-fila {
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: .4rem .5rem !important;
  }

  /* El boton de idioma: pequeño, en su sitio, sin estirarse */
  .cajaIdioma {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    align-self: center !important;
    order: 3 !important;
  }
  .selectorIdioma {
    width: auto !important;
    max-width: none !important;
    padding: .3rem .55rem !important;
    font-size: .72rem !important;
    gap: .25rem !important;
    line-height: 1 !important;
  }
  .selectorIdioma .idiBandera { width: 18px !important; height: 12px !important; }

  /* El logo: que no se corte el texto */
  .cabecera .marca { flex: 0 1 auto !important; min-width: 0 !important; }
  .cabecera .marca-texto { display: block !important; min-width: 0 !important; }
  .cabecera .marca-texto strong { font-size: 1.15rem !important; white-space: nowrap !important; }
  .cabecera .marca-texto span {
    font-size: .55rem !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;
    display: block !important;
  }

  /* El panel de usuario y el boton entrar: sin estirarse */
  .cabecera [class*="usuario"], .cabecera [class*="sesion"], .cabecera [class*="panel"],
  .cabecera .botonEntrar, .cabecera a[class*="boton"] {
    flex: 0 0 auto !important;
    width: auto !important;
    align-self: center !important;
  }
}