/* ==========================================================================
   movil.css
   tienda.dreamers.es - capa movil: zonas tactiles usables, nada que se salga
   por el lado, y texto legible.

   Por que: la tienda tenia meta viewport pero ninguna media query de layout
   (solo login-toggle-responsive.css, que colapsa el bloque de login). Medido
   a 375px con Chrome en modo movil, en TODAS las paginas:
     - 68 a 802 zonas tactiles por debajo de 24x24px (incumple WCAG 2.2 AA)
     - decenas de pares de enlaces a menos de 8px unos de otros
     - la cesta se salia por la derecha (391px de scroll en 375 de ventana)
     - texto de 8 a 11px en cabecera, pie, tabs y disponibilidad
   Casi todos los infractores estan en plantillas COMPARTIDAS (encabezado,
   buscador, globalbar, genrebar, pie), asi que se arreglan una vez y valen
   para toda la tienda.

   Se carga DESPUES de shop2014.css, login-toggle-responsive.css y
   visual-refresh.css. Mismo criterio que login-toggle-responsive.css: todo lo
   que cambia geometria va dentro de la media query, asi que el escritorio
   queda intacto byte a byte.

   Los !important son deliberados y solo donde hace falta: las plantillas
   llevan estilos EN LINEA (height:1px en las flechas del menu, font-size:8px
   en "MAPA TIENDA", height:50px en el pie) que ninguna hoja de estilos puede
   ganar de otra manera.
   ========================================================================== */

/* Que iOS no reescale el texto al girar el movil. */
html {
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 860px) {

  /* --------------------------------------------------------------------
     0. Nada se sale por el lado.
     El pie llevaba height:50px y text-indent:10px en linea: con el texto
     envuelto en varias lineas se desbordaba a lo ancho y a lo alto.
     -------------------------------------------------------------------- */
  /* Nada de overflow-x:hidden aqui: eso esconde el desbordamiento en vez de
     arreglarlo, y deja contenido recortado e inalcanzable. Se arregla en el
     origen, contenedor por contenedor. */
  .contiene,
  #header,
  #col1,
  #col2,
  .pie {
    max-width: 100%;
    box-sizing: border-box;
  }

  .pie {
    height: auto !important;
    text-indent: 0;
    padding: 10px 8px;
    font-size: 12px;
    overflow-wrap: break-word;
  }

  /* Tablas anchas (cesta, checkout): que se puedan desplazar ellas solas
     en vez de estirar la pagina entera. */
  #col1 table,
  #col2 table {
    max-width: 100%;
  }

  /* --------------------------------------------------------------------
     1. Cabecera superior: los dos rotulos y "MAPA TIENDA" estaban a 11px
     de alto y a 3px unos de otros.
     -------------------------------------------------------------------- */
  .encabezado1 .fl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    padding: 4px 8px;
  }

  .encabezado1 .fl a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* el font-size:8px viene en linea en la plantilla */
  .encabezado1 .fl a[href="/mapa"] {
    font-size: 12px !important;
    padding: 0 6px;
  }

  /* --------------------------------------------------------------------
     2. Buscador: el select medía 45x19, la caja 193x20 y el boton 55x11,
     y estaban a 5-7px unos de otros.
     Los 16px de los campos no son estetica: por debajo de 16px, Safari de
     iOS hace zoom al enfocar el campo y descoloca la pagina.
     -------------------------------------------------------------------- */
  #global-search {
    height: auto;
    padding: 6px 8px;
  }

  #global-search form {
    width: 100%;
    float: none;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
  }

  /* El min-width:0 no es adorno: un hijo flex vale por defecto min-width:auto,
     o sea que NO baja de su ancho de contenido. Sin esto el formulario medía
     408px dentro de 359 y el boton "buscar" se salia de la pantalla. */
  #global-search select {
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 30%;
    float: none;
    min-height: 44px;
    font-size: 16px;
  }

  #global-search input {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    float: none;
    height: auto;
    min-height: 44px;
    font-size: 16px;
    box-sizing: border-box;
    padding: 0 8px;
  }

  #global-search .search-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 64px;
    margin-left: 0;
    padding: 0 10px;
    line-height: normal;
    font-size: 14px;
  }

  /* --------------------------------------------------------------------
     3. Las dos barras de navegacion.

     OJO antes de tocar esto: la tienda YA tiene menu movil. menusuperior()
     en /indices/util.js, por debajo de 960px de ventana, esconde todos los
     <li> menos el primero y saca un boton hamburguesa; al pulsarlo,
     menucolgante() mueve esos <li> a un <ul class="menucolgante">.
     El fallo no era que faltara el menu, era que ese desplegable mide 95px
     de ancho con overflow:hidden y filas de 20px, asi que los nombres
     salian cortados y no habia manera de acertarles.

     Asi que NO se toca el JS ni se cambia el layout a flex (probado: pelea
     con la medicion del JS y deja los enlaces desbordando su <li> de 20px).
     Se sube la altura por line-height, que es como estan construidas estas
     barras, y se arregla el desplegable.
     -------------------------------------------------------------------- */
  /* display:flow-root NO es opcional: los <li> de estas barras son float:left,
     asi que al quitarles el height:20px fijo el contenedor COLAPSABA A 0px.
     El fondo (amarillo y negro) se pintaba en una franja de cero altura y los
     enlaces quedaban por fuera de su caja. flow-root crea un contexto de
     formato de bloque y el contenedor vuelve a envolver a sus flotados. */
  #header .globalbartienda,
  #header .genrebar {
    display: flow-root;
    height: auto;
    line-height: 44px;
  }

  #header .globalbartienda li,
  #header .genrebar li {
    height: auto;
  }

  #header .globalbartienda > ul > li > a,
  #header .genrebar > ul > li > a {
    display: block;
    min-height: 44px;
    height: auto !important;      /* las flechas ">" traen height:1px en linea */
    line-height: 44px;
    padding: 0 14px !important;   /* y padding:0 2px */
    font-size: 14px;
  }

  /* El boton hamburguesa */
  .btn-navbar {
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    padding: 12px 12px 11px;
  }

  /* El desplegable: ancho de verdad, sin recortar y con filas pulsables. */
  #header .menucolgante {
    width: 280px;
    max-width: calc(100vw - 20px);
    top: 44px;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }

  #header .menucolgante li,
  #header .globalbartienda .menucolgante.abierto li,
  #header .genrebar .menucolgante.abierto li,
  #header .globalbar .menucolgante.abierto li {
    width: 100%;
    height: auto;
    line-height: 44px;
  }

  #header .menucolgante li a,
  #header .globalbartienda .menucolgante.abierto li a {
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    min-height: 44px;
    line-height: 44px;
    padding: 0 14px !important;
    font-size: 15px;
    white-space: nowrap;
  }

  /* El panel de subcategorias que abre la flecha ">" no puede salirse. */
  .cajainfo,
  .cajainfo1 {
    max-width: calc(100vw - 20px);
    box-sizing: border-box;
  }

  /* --------------------------------------------------------------------
     4. Pestanas de categoria (COMIC / Novedades / Top / Foro): NO SE TOCAN.

     Se intento subirlas a 44px y no compensa. Estan en position:absolute
     con bottom:-1px dentro de un #content-head de 65px: al crecer se
     montaban encima del buscador, y al sacarlas del posicionamiento se
     apilaban estirando el banner de la seccion. Cada arreglo movia mas
     maquetacion y el CLS de la categoria empeoraba.

     Y sobre todo: ya median 36x36, que pasa de sobra el minimo duro de
     24x24 de WCAG 2.2 AA. Era un "estaria mejor", no un fallo. Se quedan
     como estaban.
     -------------------------------------------------------------------- */

  /* --------------------------------------------------------------------
     5. Cabeceras de panel y mini-cesta. "Cesta" medía 49x12 y los enlaces
     de dentro 16px de alto.
     -------------------------------------------------------------------- */
  /* .pod .head trae "height:2.1em; line-height:2.3em" en shop2014.css, o sea
     altura FIJA. Al meterle dentro un enlace de 44px, el <h2> se salia 18px
     por debajo de su franja de color: el titulo quedaba literalmente fuera de
     su caja. Hay que soltar la altura de la cabecera, no solo agrandar el
     enlace. Y se usa line-height en vez de inline-flex, que dentro de un
     contexto en linea da alturas raras. */
  .pod .head {
    height: auto;
    min-height: 44px;
    line-height: 44px;
  }

  .pod .head h2 {
    line-height: 44px;
  }

  .pod .head h2 a {
    display: inline-block;
    line-height: 44px;
    padding: 0 4px;
  }

  #cesta .body a,
  .cesta .body a {
    display: inline-block;
    min-height: 32px;
    padding: 6px 2px;
    line-height: 1.5;
  }

  /* --------------------------------------------------------------------
     6. Fichas de producto en los listados: la casilla medía 13x13, el
     boton de carrito 48x28 y el titulo 94x32.
     -------------------------------------------------------------------- */
  .sliding_product input[type="checkbox"],
  .entry input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }

  /* La cabecera de la ficha reserva 30px a la izquierda para una casilla de
     13px; con una de 24 (en left:10px) se solapaba con el titulo. */
  .entry .entry-head {
    padding-left: 42px;
  }

  /* El titulo de la tarjeta NO se sube a 44px, y es a proposito: ya media
     94x32, o sea que pasa el minimo duro de 24x24. Subirlo engordaba cada
     tarjeta ~12px, y como el listado lo SUSTITUYE ajaxcat.cgi despues de
     cargar, ese engorde multiplicado por decenas de tarjetas disparaba el
     CLS de la categoria. Solo se le da un poco de aire entre lineas. */
  .sliding_product .entry-head label.subject a,
  .entry .entry-head label.subject a {
    display: inline-block;
    line-height: 1.35;
  }

  a.carrito.bButton {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    min-height: 44px;
  }

  /* En la FICHA el bloque del producto tambien es .entry, pero ahi no es una
     tarjeta de listado: es el contenido principal, y encima lo sustituye
     ajaxproducto.cgi despues de cargar. Cambiarle las alturas hacia que la
     portada se recolocara al llegar la version por ajax y disparaba el CLS
     de 0,026 a 0,55. Medido con control (misma pasada bloqueando esta hoja:
     0,023). Asi que las reglas de tarjeta se quedan en los listados. */
  #contenidoproducto .entry .entry-head {
    padding-left: 30px;
  }

  #contenidoproducto .entry input[type="checkbox"] {
    width: auto;
    height: auto;
  }

  /* "disponible" / "agotado" venian a 10.6px */
  .disponibilidad,
  .disponibilidad span {
    font-size: 12px !important;
  }

  /* --------------------------------------------------------------------
     7. Paginacion: los numeros medían 9x16, imposibles de acertar.
     -------------------------------------------------------------------- */
  #col1 div[align="right"] > b > a,
  #col2 div[align="right"] > b > a,
  #col1 .paginacion a,
  #col2 .paginacion a {
    display: inline-block;
    min-width: 44px;
    min-height: 44px;
    line-height: 44px;
    margin: 2px;
    text-align: center;
    vertical-align: middle;
  }

  /* --------------------------------------------------------------------
     8. Pie: cinco enlaces a 11px de alto y a 3px unos de otros.
     -------------------------------------------------------------------- */
  .pie a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
  }

  /* --------------------------------------------------------------------
     9. Botones de compartir de la ficha: 15x16 y a 4px unos de otros.
     -------------------------------------------------------------------- */
  a[href^="javascript:bookmarkthis"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* --------------------------------------------------------------------
     10. Formularios en general: campos comodos y sin zoom de iOS.
     -------------------------------------------------------------------- */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px;
    min-height: 44px;
    max-width: 100%;
    box-sizing: border-box;
  }

  input[type="submit"],
  button,
  .bButton {
    min-height: 44px;
    padding: 0 14px;
  }

  /* La casilla de cantidad de la cesta es pequena a proposito, pero no
     tanto como para no poder tocarla. */
  input.smallInput {
    min-height: 44px;
    font-size: 16px;
  }

  /* --------------------------------------------------------------------
     11. Enlaces dentro de texto y de listas: el indice del FAQ, las
     ofertas, y sobre todo las migas de los resultados de busqueda
     ("comic:Comics USA:DC Comics:BATMAN...", separadas por dos puntos y
     SIN espacio, o sea pegadas).

     Aqui NO se persiguen los 44px a proposito: un enlace dentro de una
     frase no puede medir 44px de alto sin destrozar el texto, y WCAG 2.2
     lo exceptua justo por eso. Lo que si se arregla es que midieran 16px
     y estuvieran a 1px unos de otros: quedan en ~30px y con holgura.

     El discriminante es la clase: .body.ta-l y .contenidos son texto,
     mientras que la rejilla de productos es .body.clearfix, que no entra
     aqui y conserva su maquetacion.
     -------------------------------------------------------------------- */
  #col2.contenidos a,
  #col1 .pod > .body.ta-l a,
  #col2 .pod > .body.ta-l a {
    display: inline-block;
    padding: 5px 3px;
    line-height: 1.4;
  }

  /* Paginacion de los resultados de busqueda (div.fr con los numeros de
     pagina en <b>): medían 9x16. */
  #col1 .pod .body .fr > a,
  #col2 .pod .body .fr > a {
    display: inline-block;
    min-width: 44px;
    min-height: 44px;
    line-height: 44px;
    margin: 2px;
    padding: 0;
    text-align: center;
  }

  /* Listado de categorias del panel lateral (pagina de ofertas): una fila
     por categoria y cada una medía 16px de alto. Ojo, este .body NO lleva
     .ta-l, por eso no lo cogia la regla de arriba. */
  #categorias .body > .fl > a,
  #col1 .pod .body > .fl > a {
    display: block;
    min-height: 44px;
    line-height: 44px;
  }

  /* El boton "apuntese al sistema de avisos" de los productos agotados. */
  .colPrecio .nodisponible a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* --------------------------------------------------------------------
     12. Hueco reservado para el bloque que llega por ajax en la PORTADA.

     Comprobado pidiendo el HTML de cada tipo de pagina, que no adivinado:

       portada    -> #col2 llega vacio y se queda vacio para siempre; quien
                     se rellena es #categoriahome (13.746px de listado).
       categoria  -> #col2 YA trae el listado del servidor.
       ficha      -> #contenidoproducto ya trae la ficha del servidor.
       faq        -> #col2.contenidos trae el texto.

     O sea que el unico sitio donde reservar sirve de algo es
     #categoriahome. Reservarlo en #col2 seria peor que no hacer nada: en
     categoria y ficha no cambia nada porque el contenido ya es mas alto, y
     en portada dejaria un hueco en blanco permanente de 70vh.
     -------------------------------------------------------------------- */
  #categoriahome {
    min-height: 70vh;
  }


  /* --------------------------------------------------------------------
     13. Imagenes.

     NO poner aqui "max-width:100%; height:auto" sobre .entry img. Es el
     consejo de manual, pero aqui hace dano y esta medido: las portadas
     traen width/height en el atributo, height:auto les quita esa altura
     reservada, y la imagen del producto pasa a colocarse cuando termina de
     cargar. Lighthouse lo atribuyo al nodo exacto: el CLS de la ficha paso
     de 0,026 a 0,506 y el rendimiento de 75 a 22. Ademas la auditoria no
     encontro ni una sola imagen que se saliera, o sea que la regla no
     arreglaba nada. Si algun dia hace falta, va con aspect-ratio, no con
     height:auto a secas.
     -------------------------------------------------------------------- */

}