/* ============================================================
   LabsPep — ajustes para celular
   Se carga de última en las tres páginas. Casi todo el tráfico
   llega desde el teléfono, así que esta hoja no es un parche:
   es el caso principal.
   ============================================================ */

/* Red de seguridad contra el desbordamiento horizontal. "clip" y no "hidden"
   porque hidden rompe el position:sticky de la barra superior. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* Nada se sale del ancho de la pantalla */
img, video, canvas, svg { max-width: 100%; }

@media (max-width: 700px) {
  /* ---------- Barra superior ----------
     El menú ya no vive aquí: se abre desde la hamburguesa (más abajo). */
  .topbar {
    gap: 10px;
    padding: 12px 16px;
  }
  .brand { flex: 1; min-width: 0; }
  .brand-text { min-width: 0; }
  .brand-name { font-size: 19px; }
  .brand-sub {
    font-size: 9.5px;
    letter-spacing: 0.16em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---------- Espacios generales ---------- */
  .wrap { padding-left: 16px; padding-right: 16px; }
  .panel { padding: 18px 16px; }
  .panel-head { margin-bottom: 18px; }

  /* iOS amplía la página cuando enfocas un campo de menos de 16 px.
     Con 16 px justos, no hace zoom y no hay que pelear con el viewport. */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Casillas más grandes para el dedo */
  .consent input,
  .admin-check input {
    width: 22px;
    height: 22px;
  }
  .consent { gap: 12px; padding: 4px 0; }

  /* ---------- Lo que cuesta pintar ----------
     Dos cosas del fondo son caras para el procesador gráfico de un
     teléfono y no se notan en uno: los dos resplandores llevan un
     desenfoque de 90 px sobre una capa de media pantalla, y la barra del
     sitio desenfoca lo que pasa por debajo en cada fotograma del
     desplazamiento. Es el mismo criterio que ya se aplicó al menú
     desplegable. Aquí el resplandor se queda sin desenfoque —el degradado
     radial ya se difumina solo— y algo más grande y tenue para que siga
     siendo una bruma; y la barra pasa a ser casi opaca en vez de
     translúcida con desenfoque, que sobre el fondo oscuro se ve igual. */
  .glow {
    filter: none;
    opacity: 0.2;
    width: 62vw;
    height: 62vw;
  }
  .topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(180deg, rgba(5, 7, 13, 0.97), rgba(5, 7, 13, 0.93));
  }

  /* ---------- Plan nutricional ---------- */
  /* Los siete días en una tira que se desliza, en vez de tres renglones */
  .days {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px 4px;
  }
  .days::-webkit-scrollbar { display: none; }
  .day-btn {
    flex: 0 0 auto;
    min-width: 96px;
    scroll-snap-align: start;
  }

  /* El nombre del alimento y su gramaje ya no se pelean por el ancho */
  .meal-items li {
    flex-wrap: wrap;
    gap: 2px 10px;
  }
  .meal-items li > span:first-child { flex: 1 1 65%; min-width: 0; }
  .meal-items .qty { flex: 0 0 auto; }
  .meal { padding: 16px 14px; }
  .meal-macros .chip { font-size: 12px; padding: 4px 9px; }

  .stat-value { font-size: 24px; }
  .burbuja { max-width: 90%; }

  /* ---------- Catálogo ----------
     Dos productos por fila. A 375 px cada tarjeta mide ~165 px, así que todo
     lo de adentro se aprieta: si se dejaran los tamaños del escritorio, el
     botón de WhatsApp se saldría de la tarjeta. La foto vuelve a ser cuadrada
     porque el vial es vertical y a 4/3 se le cortaba la tapa. */
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .prod-foto { aspect-ratio: 1; }

  .prod-cuerpo { padding: 12px 12px 14px; gap: 7px; }
  .prod-nombre { font-size: 15px; }
  .prod-meta { gap: 5px; }
  .prod-chip { font-size: 11px; padding: 3px 8px; letter-spacing: 0.04em; }
  /* La nota es una frase de venta, no el contenido: a dos líneas se lee y no
     descuadra el alto de las tarjetas vecinas. */
  .prod-nota {
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .prod-aviso { font-size: 12px; }
  .prod-ficha { font-size: 13px; min-height: 34px; }
  .prod-pie { gap: 9px; padding-top: 11px; }
  .prod-precio { font-size: 18px; }
  .prod-consultar { font-size: 13px; }
  .prod-sin-numero { font-size: 11.5px; }

  /* «Pedir por WhatsApp» son 18 letras en mayúscula: con el tamaño de
     escritorio no cabe en 145 px de botón. Se encoge la letra, se recorta el
     espaciado y se le permite partirse en dos renglones antes que desbordar. */
  .prod-btn {
    padding: 11px 8px;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    gap: 6px;
    line-height: 1.25;
    text-align: center;
  }
  .prod-btn svg { flex: 0 0 auto; width: 15px; height: 15px; }

  .sello { top: 8px; left: 8px; padding: 4px 9px; font-size: 9.5px; letter-spacing: 0.1em; }

  /* Los filtros se deslizan de lado en vez de ocupar cuatro renglones */
  .filtros {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: -16px;
    margin-right: -16px;
    padding: 2px 16px 6px;
  }
  .filtros::-webkit-scrollbar { display: none; }
  /* 44 px es el mínimo cómodo para el dedo; con 36 se falla el toque */
  .chip-filtro { flex: 0 0 auto; min-height: 44px; padding: 10px 16px; }
  /* Con dos columnas, «Estética y anti-aging» no cabe a 12 px: se encoge la
     letra y el espacio a los lados, pero se conservan los 32 px de alto para
     que el dedo la siga acertando. */
  .prod-cat { min-height: 32px; padding: 6px 10px; font-size: 10.5px; letter-spacing: 0.07em; }

  .paginacion { gap: 8px; }
  .pag-flecha { padding: 12px 14px; }
  .pag-num { padding: 12px 14px; min-width: 46px; }

  .foot-legal p { font-size: 12.5px; }

  /* ---------- Panel de administración ---------- */
  .wrap-admin { padding-left: 12px; padding-right: 12px; }

  /* La fila del producto se mantiene en un solo renglón: con 50 referencias,
     mandar los botones a una segunda línea duplica el scroll de la lista.
     Los botones pasan a ser cuadrados de 40 px, del tamaño de un dedo. */
  .fila-cabecera { padding: 11px 10px; gap: 9px; }
  .fila-titulo { flex: 1 1 auto; }

  /* El estado deja de ocupar ancho: pasa a ser el filo izquierdo de la fila */
  .fila-estado { display: none; }
  .producto-admin { border-left: 3px solid rgba(120, 200, 255, 0.16); }
  .producto-admin:has(.fila-estado.si) { border-left-color: var(--lime); }

  /* En el encabezado solo queda eliminar: las flechas de orden se van al
     interior de la ficha, donde sí hay ancho. Así el nombre del producto
     no se corta a media palabra. */
  .fila-cabecera .admin-mover button[data-accion="subir"],
  .fila-cabecera .admin-mover button[data-accion="bajar"] { display: none; }
  .mover-ficha { display: flex; }

  .admin-mover { gap: 5px; flex: none; }
  .admin-mover button {
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 15px;
  }
  .solo-ancho { display: none; }
  .solo-angosto { display: inline; font-size: 17px; line-height: 1; }

  .admin-barra { gap: 9px; }
  .admin-barra input[type="search"] { flex: 1 1 100%; }
  #btn-plegar { padding: 12px 16px; min-height: 44px; }
  #btn-salir { padding: 11px 15px; min-height: 40px; }
  .admin-listo { padding: 12px 22px; min-height: 44px; }

  /* Barra de acciones fija abajo: con 50 productos, no tiene sentido bajar
     hasta el final cada vez que quieres guardar. Necesita fondo propio, o se
     monta encima del contenido. */
  .admin-acciones {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 20px -16px -18px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(7, 11, 20, 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(120, 200, 255, 0.2);
    gap: 8px;
  }
  .admin-acciones .btn { flex: 1 1 auto; min-height: 46px; padding: 13px 12px; }
  /* "Ver la tienda" pasa al pie: en el teléfono la barra solo aguanta dos */
  .admin-acciones a.btn { display: none; }

  .estado-rejilla { grid-template-columns: 1fr; }
}

/* ---------- Menú desplegable ----------
   El menú iba en su propia fila, a ancho completo, debajo de la marca, con
   los destinos repartidos en horizontal. Con cuatro ya se escondía "Inicio"
   por debajo de 400 px para que cupieran; con cinco no cabía de ninguna
   forma. Ahora es un botón pegado a la derecha de la misma línea del
   logotipo, y los destinos caen debajo en una lista: caben los que hagan
   falta, cada uno con su palabra entera y una franja de 48 px que se acierta
   con el pulgar.

   El corte va en 1120 px y no en los 700 del resto de la hoja porque lo que
   se acaba aquí no es el ancho de la página, es el sitio que queda al lado
   de la marca. Por encima el menú sigue a la vista: donde hay espacio, un
   menú abierto se navega mejor que uno que hay que pedir.

   Estaba en 960 con cinco destinos. Con «Calculadora» son seis y hubo que
   subirlo: medido en el navegador sobre la portada, que es la de la marca
   más ancha, los seis destinos en línea miden 758 px y la marca no baja de
   239; con los 40 de margen derecho, la barra necesita 1053 px de contenido
   para no desbordar. A 990 px se salía 38 px por la derecha —y como el
   cuerpo lleva overflow-x:hidden, no se veía desbordar: se veía cortado el
   último destino, que es peor—. Se deja en 1120 para que quepa también
   cuando la tipografía todavía no ha cargado y los textos miden algo más.
   1120 es además el ancho máximo de .wrap: el menú en línea aguanta
   exactamente hasta donde aguanta el contenido.

   Si se cambia este número hay que cambiarlo también en assets/nav.js: son
   dos idiomas distintos diciendo lo mismo. */
@media (max-width: 1120px) {
  /* ---------- El botón ----------
     Una pastilla con la palabra, no un cuadrado mudo con tres rayas.
     Abierto se pinta con el degradado y dice «Cerrar»; las barras siguen
     cruzándose en equis (tienda.css). */
  .menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    order: 3;
    width: auto;
    height: auto;
    min-height: 44px;
    padding: 0 14px 0 12px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .menu-btn-texto { display: inline; }
  .menu-btn-cerrar { display: none; }
  .topbar.abierto .menu-btn {
    color: #04121a;
    background: linear-gradient(100deg, var(--cyan), var(--violet));
    border-color: transparent;
  }
  .topbar.abierto .menu-btn-abrir { display: none; }
  .topbar.abierto .menu-btn-cerrar { display: inline; }

  /* ---------- La hoja ----------
     Cuelga de la barra y ocupa lo que queda de pantalla. Va absoluta
     respecto a la barra —que es sticky, o sea posicionada— y no fija:
     entre 700 y 1120 px la barra lleva backdrop-filter, y eso convierte a
     la barra en el contenedor de cualquier descendiente fijo. Quedaría en
     el mismo sitio, pero por accidente. Opaca y sin desenfoque, como
     siempre: un menú se lee mejor sobre un fondo y ya. */
  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--alto-barra));
    height: calc(100dvh - var(--alto-barra));
    z-index: 30;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 18px 16px 28px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #080c16;
    border-top: 1px solid rgba(120, 200, 255, 0.12);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  }
  .topbar.abierto .menu { display: flex; }

  /* «Inicio» no va en la hoja: el logotipo ya lleva a la portada, y la
     hoja es un menú de destinos con su descripción. */
  .menu a.menu-inicio { display: none; }

  /* Cada destino: icono, nombre, una línea de qué hace, y flecha. 62 px
     de alto: sobra para el dedo y cabe todo sin rodar. */
  .menu a {
    order: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 62px;
    margin: 0;
    padding: 8px 12px;
    border: none;
    border-radius: 12px;
    background: none;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14.5px;
    letter-spacing: 0;
    text-transform: none;
  }
  .menu a.on { color: var(--ink); background: rgba(34, 230, 255, 0.08); }
  /* tienda.css reordena el menú en línea de escritorio con «.menu a.x»,
     que pesa más que el «.menu a» de arriba: aquí manda el orden del HTML.
     Y los nombres van en una línea allá; aquí las descripciones se parten. */
  .menu a.menu-inicio, .menu a.menu-catalogo, .menu a.menu-certificados, .menu a.menu-bitacora { order: 0; }
  .menu a { white-space: normal; }
  .menu-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    color: var(--cyan);
    background: rgba(34, 230, 255, 0.07);
    border: 1px solid rgba(34, 230, 255, 0.22);
    border-radius: 11px;
  }
  .menu-txt {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.25;
  }
  .menu-nombre {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .menu-desc { display: block; font-size: 14.5px; color: var(--ink-dim); }
  .menu-flecha { display: inline-flex; color: var(--ink-faint); }
  .menu-tag {
    display: inline-block;
    padding: 3px 7px;
    font-size: 9px;
    letter-spacing: 0.16em;
    border-radius: 999px;
    color: #2a1c00;
    background: var(--amber);
  }
  .menu-grupo {
    display: block;
    margin-top: 18px;
    padding: 0 12px;
    font-family: var(--font-display);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  /* La bitácora vuelve a ser una fila más: la pastilla ámbar es de escritorio */
  .menu-bitacora { margin-left: 0; }
  .menu-bitacora .menu-icono svg { width: 22px; height: 22px; }

  /* El catálogo: la puerta que vende va primero y más grande, con la foto */
  .menu-catalogo {
    position: relative;
    overflow: hidden;
    align-items: stretch;
    gap: 0;
    min-height: 150px;
    padding: 0;
    border: 1px solid rgba(34, 230, 255, 0.35);
    border-radius: var(--radius);
    background: linear-gradient(160deg, rgba(14, 20, 34, 0.9), rgba(6, 10, 20, 0.7));
    box-shadow: 0 10px 30px rgba(34, 230, 255, 0.12);
  }
  .menu-catalogo.on { background: linear-gradient(160deg, rgba(14, 20, 34, 0.9), rgba(6, 10, 20, 0.7)); }
  .menu-catalogo-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    padding: 18px 16px;
  }
  .menu-catalogo .menu-nombre {
    display: block;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-transform: none;
  }
  .menu-nombre-largo { display: inline; }
  .menu-catalogo .menu-desc { line-height: 1.3; }
  .menu-entrar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cyan);
  }
  .menu-entrar svg { width: 18px; height: 18px; }
  .menu-catalogo-foto {
    display: block;
    flex: none;
    width: 150px;
    height: auto;
    object-fit: cover;
    object-position: 35% 55%;
  }
  .menu-catalogo::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 150px;
    background: linear-gradient(90deg, rgba(8, 12, 22, 1) 0%, rgba(8, 12, 22, 0) 40%);
    pointer-events: none;
  }

  .menu-pie {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 16px 12px 0;
    border-top: 1px solid rgba(120, 200, 255, 0.12);
    font-size: 14px;
    color: var(--ink-faint);
  }
  .menu-pie svg { color: var(--lime); flex: none; }

  /* Salir de la bitácora es una fila más del menú, no un botón suelto en la
     línea del logotipo: ahí competía con la marca y con la hamburguesa por
     un ancho que en un teléfono no sobra. Va de último y separado por una
     línea, porque no es un destino: es lo único que deshace algo. */
  .menu .salir-cliente {
    order: 0;
    width: 100%;
    min-height: 48px;
    margin: 18px 0 0;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 11.5px;
    letter-spacing: 0.12em;
  }
}

/* Teléfonos angostos */
@media (max-width: 400px) {
  .brand-mark { width: 40px; height: 40px; }
  .brand-mark svg { width: 32px; height: 32px; }
  .brand-name { font-size: 17px; }
  .brand-sub { display: none; }
  .hero h1 { font-size: 30px; }
  .panel { padding: 16px 13px; }
  /* En dos columnas esta franja es la más apretada: la tarjeta baja a ~138 px.
     El nombre encoge, y el precio con él: «$ 1.250.000» a 18 px se salía de la
     tarjeta por 13 px. Medido en el navegador a 320 px. */
  .prod-nombre { font-size: 14px; }
  .prod-precio { font-size: 15px; }
  .prod-cuerpo { padding: 11px 10px 12px; }
  .fila-titulo b { font-size: 14.5px; }
}

/* En pantallas táctiles no hay puntero: los efectos de hover solo estorban */
@media (hover: none) {
  .producto:hover { transform: none; box-shadow: none; }
  .fila-cabecera:hover { background: none; }
}