/*
 * Base de estilo — Nalt Tomí (app de compradores).
 * Usa las variables de tokens.css. Mobile-first, botones grandes (48px+),
 * sin fuentes web, animaciones mínimas y respetando prefers-reduced-motion.
 */

*, *::before, *::after { box-sizing: border-box; }

/* Sin esto, el atributo "hidden" no sirve de nada en ningún componente que
   fije su propio "display" (.pantalla, .aviso, .nav-inferior, etc.): una
   regla de autor siempre gana sobre la hoja de estilos del navegador (la
   que trae "[hidden] { display:none }"), sin importar especificidad. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--nalt-fuente);
  font-size: var(--nalt-texto-base);
  -webkit-text-size-adjust: 100%;
  /* Barra de desplazamiento delgada y del color del tema, en vez de la
     pista beige por default del navegador (visible sobre todo en
     escritorio, donde la barra siempre está a la vista). */
  scrollbar-width: thin;
  scrollbar-color: var(--color-borde) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-borde); border-radius: var(--nalt-radio-pill); }

body { display: flex; flex-direction: column; min-height: 100%; }

h1, h2, h3, p { margin: 0 0 var(--nalt-espacio-2); }

.ico { width: 22px; height: 22px; flex-shrink: 0; --acento: var(--nalt-naranja); }
.ico--jade { --acento: var(--nalt-jade); }

/* --- Papel picado: divisor de sección, sin imagen, con CSS mask --- */
.papel-picado {
  height: 14px;
  width: 100%;
  background: var(--nalt-naranja);
  -webkit-mask-image: radial-gradient(circle at 10px 0, transparent 10px, black 10.5px);
  mask-image: radial-gradient(circle at 10px 0, transparent 10px, black 10.5px);
  -webkit-mask-size: 20px 14px;
  mask-size: 20px 14px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
.papel-picado--jade { background: var(--nalt-jade); }

/* --- Botones (mínimo 48px de alto, texto siempre + ícono en acciones de riesgo) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nalt-espacio-2);
  min-height: var(--nalt-boton-alto);
  padding: 0 var(--nalt-espacio-4);
  border: none;
  border-radius: var(--nalt-radio-md);
  font-size: var(--nalt-texto-base);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:focus-visible { outline: 3px solid var(--nalt-jade-claro); outline-offset: 2px; }
.btn-principal { background: var(--color-acento-1); color: var(--color-acento-1-texto); }
.btn-secundario { background: var(--color-acento-2); color: var(--color-acento-2-texto); }
.btn-peligro { background: var(--color-peligro); color: var(--color-peligro-texto); }
.btn-fantasma {
  background: transparent;
  color: var(--color-texto);
  border: 1.5px solid var(--color-borde);
}
.btn-bloque { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- Tarjetas --- */
.tarjeta {
  background: var(--color-fondo-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--nalt-radio-lg);
  padding: var(--nalt-espacio-4);
  box-shadow: var(--nalt-sombra-tarjeta);
}

/* --- Insignias (estado de pedido, categoría) --- */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--nalt-radio-pill);
  font-size: var(--nalt-texto-xs);
  font-weight: 600;
}
.insignia--jade { background: rgba(0, 168, 107, .18); color: var(--nalt-jade-oscuro); }
.insignia--naranja { background: rgba(245, 130, 31, .18); color: var(--nalt-naranja-texto); }
.insignia--gris { background: rgba(201, 194, 184, .16); color: var(--color-texto-tenue); }
.insignia--peligro { background: rgba(194, 24, 91, .16); color: var(--nalt-rosa); }
/* Sobre fondo oscuro fijo (Login/Registro) los tonos claros leen mejor */
#pantalla-login .insignia--jade, #pantalla-registro .insignia--jade { color: var(--nalt-jade-sobre-oscuro); }
#pantalla-login .insignia--peligro, #pantalla-registro .insignia--peligro { color: var(--nalt-rosa-sobre-oscuro); }

/* --- Aviso (nunca solo color: siempre ícono + texto) --- */
.aviso {
  display: flex;
  gap: var(--nalt-espacio-2);
  align-items: flex-start;
  padding: var(--nalt-espacio-3);
  border-radius: var(--nalt-radio-md);
  font-size: var(--nalt-texto-sm);
}
.aviso--peligro { background: rgba(194, 24, 91, .1); color: var(--color-texto); border: 1px solid var(--nalt-rosa); }
.aviso--peligro .ico { --acento: var(--nalt-rosa); color: var(--nalt-rosa); }
.aviso--exito { background: rgba(0, 168, 107, .12); color: var(--color-texto); border: 1px solid var(--nalt-jade); }
.aviso--exito .ico { --acento: var(--nalt-jade); color: var(--nalt-jade); }

/* --- Estado vacío --- */
.estado-vacio {
  text-align: center;
  padding: var(--nalt-espacio-6) var(--nalt-espacio-4);
  color: var(--color-texto-tenue);
}
.estado-vacio .ico { width: 56px; height: 56px; margin: 0 auto var(--nalt-espacio-3); opacity: .9; }

/* --- Animaciones mínimas --- */
.entra { animation: nalt-entra .18s ease-out; }
@keyframes nalt-entra {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .entra { animation: none; }
  * { scroll-behavior: auto !important; }
}
/* Nunca animar la pantalla de pago ni de canje de código */
.pantalla-pago .entra, .pantalla-canje .entra { animation: none; }

/* --- Banner "instalar la app": vive fuera de .pantalla (ver index.html),
   por eso no es .aviso (esa clase asume que está dentro de .contenido con
   su padding) — ocupa todo el ancho, arriba de cualquier pantalla. Texto
   negro sobre jade: nunca blanco sobre jade base (regla de tokens.css). --- */
.banner-instalar {
  display: flex;
  align-items: center;
  gap: var(--nalt-espacio-2);
  padding: var(--nalt-espacio-2) var(--nalt-espacio-3);
  background: var(--nalt-jade);
  color: var(--nalt-negro);
}
.banner-instalar p { margin: 0; flex: 1; font-size: var(--nalt-texto-xs); font-weight: 700; }
.banner-instalar .ico { --acento: var(--nalt-negro); color: var(--nalt-negro); flex-shrink: 0; }
.banner-instalar__cerrar {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nalt-negro);
}
.banner-instalar__cerrar .ico { width: 16px; height: 16px; transform: rotate(45deg); }
.banner-instalar__cerrar:focus-visible { outline: 2px solid var(--nalt-negro); outline-offset: 1px; }

/* --- Utilidades de layout mínimas --- */
/* El fondo se pinta aquí (no solo en html/body): cada .pantalla puede traer
   sus propias variables de color (ver #pantalla-login/#pantalla-registro en
   tokens.css) y así se ve de verdad, aunque solo una pantalla esté visible
   a la vez dentro del mismo <body>. */
.pantalla { flex: 1; display: flex; flex-direction: column; padding-bottom: 84px; background: var(--color-fondo); color: var(--color-texto); }
.contenido { padding: var(--nalt-espacio-4); display: flex; flex-direction: column; gap: var(--nalt-espacio-4); }
.fila { display: flex; align-items: center; gap: var(--nalt-espacio-2); }
.entre { display: flex; align-items: center; justify-content: space-between; gap: var(--nalt-espacio-2); }

.nav-inferior {
  position: fixed;
  z-index: 10; /* por encima de .inicio-fondo > .contenido (z-index 1), que si no lo tapa */
  bottom: 0; left: 0; right: 0;
  background: var(--color-fondo-tarjeta);
  border-top: 1px solid var(--color-borde);
  padding-bottom: env(safe-area-inset-bottom);
}
/* El fondo de la barra ocupa todo el ancho (ver .nav-inferior arriba); los
   botones se centran adentro con el mismo ancho máximo que el resto del
   contenido, para que no queden pegados a los bordes en pantallas anchas. */
.nav-inferior__fila {
  display: flex;
  max-width: var(--nalt-ancho-app);
  margin: 0 auto;
  box-sizing: border-box;
}
.nav-inferior__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--nalt-espacio-2) 0;
  min-height: 56px;
  color: var(--color-texto-tenue);
  background: none;
  border: none;
  font-size: var(--nalt-texto-xs);
}
.nav-inferior__item { cursor: pointer; }
.nav-inferior__item:focus-visible, .nav-superior__icono:focus-visible { outline: 2px solid var(--nalt-naranja); outline-offset: -2px; }
.nav-inferior__item[aria-current="page"] { color: var(--nalt-naranja-texto); }
.nav-inferior__item[aria-current="page"] .ico { --acento: var(--nalt-naranja); }

/* --- Flores de cempasúchil de fondo (Inicio), 100% CSS, sin imagen ni SVG.
   Aprobado 2026-09-30. Muy tenues a propósito: nunca deben restar lectura al
   saldo ni a los botones, por eso van en un contenedor con z-index bajo. --- */
.inicio-fondo { position: relative; }
.inicio-fondo > .contenido { position: relative; z-index: 1; }
.flor-css {
  position: absolute;
  width: 44px; height: 44px;
  opacity: .10;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 9px 14px at 50% 15%, var(--nalt-naranja) 60%, transparent 63%),
    radial-gradient(ellipse 9px 14px at 78% 30%, var(--nalt-naranja) 60%, transparent 63%),
    radial-gradient(ellipse 9px 14px at 78% 68%, var(--nalt-naranja) 60%, transparent 63%),
    radial-gradient(ellipse 9px 14px at 50% 85%, var(--nalt-naranja) 60%, transparent 63%),
    radial-gradient(ellipse 9px 14px at 22% 68%, var(--nalt-naranja) 60%, transparent 63%),
    radial-gradient(ellipse 9px 14px at 22% 30%, var(--nalt-naranja) 60%, transparent 63%),
    radial-gradient(circle 6px at 50% 50%, var(--nalt-jade) 90%, transparent 92%);
}
.flor-css--1 { width: 64px; height: 64px; top: -14px; right: -10px; }
.flor-css--2 { width: 34px; height: 34px; top: 150px; left: -8px; transform: rotate(18deg); }
.flor-css--3 { width: 26px; height: 26px; top: 60px; right: 70px; opacity: .07; transform: rotate(-12deg); }
/* El fondo claro es ahora el default (ver tokens.css), así que estas flores
   decorativas necesitan algo más de opacidad que sobre el oscuro de antes. */
.flor-css { opacity: .14; }
#pantalla-login .flor-css, #pantalla-registro .flor-css { opacity: .10; }

/* --- "Lo más pedido" (Inicio): cuadrícula que crece hacia abajo, NUNCA una
   pasarela con scroll horizontal — se veía mal con la barra de desplazamiento
   y rompía el estilo (ajustado 2026-09-30 a pedido del dueño). --- */
.populares-seccion + .populares-seccion { margin-top: var(--nalt-espacio-4); }
.populares-titulo { display: flex; align-items: center; gap: 6px; font-size: var(--nalt-texto-sm); font-weight: 700; margin-bottom: var(--nalt-espacio-2); }
.populares { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.popular-card {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--color-fondo-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--nalt-radio-lg);
  padding: 8px;
  position: relative;
  box-shadow: var(--nalt-sombra-tarjeta);
  transition: transform 150ms var(--nalt-ease-out), box-shadow 150ms var(--nalt-ease-out);
}
.popular-card:active { transform: scale(.98); }
.popular-card__rango {
  position: absolute; top: 6px; left: 6px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--nalt-radio-pill);
  background: var(--nalt-naranja); color: var(--nalt-negro);
  font-size: .7rem; font-weight: 800;
}
.popular-card .foto-prod { aspect-ratio: 1 / 1; border-radius: var(--nalt-radio-md); overflow: hidden; background: var(--color-borde); display: flex; align-items: center; justify-content: center; }
.popular-card__nombre { font-size: var(--nalt-texto-xs); font-weight: 700; line-height: 1.25; }
.popular-card__precio { font-size: var(--nalt-texto-xs); font-weight: 800; color: var(--nalt-naranja-texto); font-variant-numeric: tabular-nums; }
/* --- Precio en oferta (catálogo y detalle): precio actual + tachado +
   insignia de porcentaje, como ya muestra price_html en la tienda web —
   antes la app solo mostraba el precio final, sin avisar que había
   descuento. Ver formatearPrecioCatalogo() en el script. --- */
.precio-oferta { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.precio-oferta__actual { color: var(--nalt-naranja-texto); font-weight: 800; }
.precio-oferta__antes { color: var(--color-texto-tenue); font-weight: 500; text-decoration: line-through; font-size: .85em; }
.precio-oferta__badge {
  display: inline-flex; align-items: center;
  padding: 1px 6px; border-radius: var(--nalt-radio-pill);
  background: var(--color-peligro); color: var(--color-peligro-texto);
  font-size: .7rem; font-weight: 800;
}
.popular-card__loc { font-size: var(--nalt-texto-2xs); color: var(--color-texto-tenue); display: flex; align-items: center; gap: 3px; }
.popular-card__loc .ico { width: 12px; height: 12px; }
.popular-card__desc {
  font-size: var(--nalt-texto-2xs); color: var(--color-texto-tenue); line-height: 1.3; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Botón "Agregar" de la tarjeta: más redondeado (chip), solo aquí — el resto
   de la app (checkout, formularios) sigue con .btn normal a propósito. */
.popular-card .btn { border-radius: var(--nalt-radio-pill); transition: transform 120ms var(--nalt-ease-out); }
.popular-card .btn:active:not(:disabled) { transform: scale(.96); }
.popular-card select, .producto-detalle__accion select {
  height: 30px; width: 100%; padding: 0 6px; font-size: var(--nalt-texto-2xs); font-family: inherit;
  border-radius: var(--nalt-radio-md); border: 1.5px solid var(--color-borde);
  background: var(--color-fondo); color: var(--color-texto);
}
.popular-card select:focus-visible, .producto-detalle__accion select:focus-visible { outline: 3px solid var(--nalt-jade-claro); outline-offset: 1px; border-color: var(--nalt-jade); }

/* --- Detalle de producto: la acción de compra vive DENTRO de la tarjeta de
   compra, en el flujo normal de la página — nunca position:fixed ni
   sticky (regla clave de la corrección de Producto, 2026-10-19). --- */
.producto-detalle__accion { display: flex; flex-direction: column; gap: var(--nalt-espacio-3); }

/* --- "Comprar por tienda" (Inicio): fila horizontal de tiendas, estilo
   "historias" (logo circular + nombre debajo), para ir directo a los
   productos de una tienda — sobre todo si hay saldo Nalt Tomí restringido
   a ella. --- */
.tiendas-fila { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; }
.tienda-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 68px; flex-shrink: 0; background: none; border: none; padding: 0; cursor: pointer; color: inherit; font-family: inherit; }
.tienda-chip__logo { width: 56px; height: 56px; border-radius: 50%; background: var(--color-fondo-tarjeta); border: 1.5px solid var(--color-borde); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tienda-chip__logo img { width: 100%; height: 100%; object-fit: cover; }
.tienda-chip__nombre { font-size: var(--nalt-texto-2xs); text-align: center; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --- Directorio de tiendas (pantalla-tiendas): cuadrícula, como el
   directorio que ya trae WCFM en la web. --- */
.tiendas-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.tienda-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: var(--color-fondo-tarjeta); border: 1px solid var(--color-borde); border-radius: var(--nalt-radio-md); padding: var(--nalt-espacio-3); cursor: pointer; box-shadow: var(--nalt-sombra-tarjeta); }
.tienda-card__logo { width: 56px; height: 56px; border-radius: 50%; background: var(--color-fondo); border: 1.5px solid var(--color-borde); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tienda-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.tienda-card__nombre { font-size: var(--nalt-texto-xs); font-weight: 700; line-height: 1.25; }
.tienda-card__conteo { font-size: var(--nalt-texto-2xs); color: var(--color-texto-tenue); }

/* --- Encabezado de una tienda (pantalla-tienda) --- */
.tienda-logo { width: 48px; height: 48px; border-radius: 50%; background: var(--color-fondo-tarjeta); border: 1.5px solid var(--color-borde); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.tienda-logo img { width: 100%; height: 100%; object-fit: cover; }

/* --- Foto de producto genérica (placeholder hasta tener fotos reales) --- */
.foto-prod {
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--nalt-radio-md);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  display: flex; align-items: center; justify-content: center;
}
.foto-prod .ico { width: 34px; height: 34px; opacity: .5; }

/* --- Visor de foto del producto: zoom, arrastre y rotación 360° (ver
   crearVisorFoto() en index.html). El contenedor recorta lo que se sale al
   hacer zoom; la imagen de adentro es la que se mueve/escala con
   transform, nunca el contenedor, para que el rebote sea un simple
   transition en vez de tener que recalcular el layout. --- */
.foto-prod-envoltura {
  position: relative; width: 100%;
  border-radius: var(--nalt-radio-md);
  overflow: hidden;
}
.foto-prod-envoltura .foto-prod {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
  border-radius: 0;
}
/* Galería de Producto: 4/5 en móvil, 1/1 desde tablet, con un tope de alto
   para que una foto muy vertical no empuje el resto de la tarjeta fuera de
   la pantalla — contain en vez de cover, para que nunca se recorte (sección
   C de la corrección de Producto). */
.foto-prod-envoltura--producto {
  aspect-ratio: 4 / 5;
  border-radius: var(--nalt-radio-xl);
  background: var(--color-fondo-tarjeta);
}
.foto-prod-envoltura--producto .foto-prod { background: var(--color-fondo-tarjeta); }
.foto-prod-envoltura--producto .foto-prod img { object-fit: contain; }
@media (min-width: 768px) {
  .foto-prod-envoltura--producto { aspect-ratio: 1 / 1; max-height: 560px; }
}
.foto-prod-envoltura .foto-prod img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: center center;
  user-select: none; -webkit-user-drag: none;
  /* pan-y: el navegador sigue haciendo scroll vertical normal; el arrastre
     horizontal (rotación 360°) y el pellizco los maneja el JS a mano.
     Cuando el JS detecta zoom activo cambia esto a "none" (ver
     crearVisorFoto) para poder desplazar la imagen en cualquier dirección. */
  touch-action: pan-y;
}
.foto-360-insignia {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(0,0,0,.55); color: var(--nalt-sobre-oscuro); --acento: var(--nalt-sobre-oscuro);
  font-size: var(--nalt-texto-2xs); font-weight: 700; letter-spacing: .02em;
  padding: 3px 8px; border-radius: var(--nalt-radio-pill);
  pointer-events: none;
}
.producto-foto-oferta {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--nalt-rosa); color: var(--nalt-sobre-oscuro);
  font-size: .8rem; font-weight: 700;
  padding: 5px 10px; border-radius: var(--nalt-radio-sm);
  pointer-events: none;
}
.producto-foto-indice {
  position: absolute; bottom: 12px; right: 12px; z-index: 2;
  background: rgba(23,19,15,.78); color: var(--nalt-sobre-oscuro);
  font-size: .75rem; font-weight: 600;
  padding: 4px 10px; border-radius: var(--nalt-radio-pill);
  pointer-events: none;
}
.foto-reset-zoom {
  position: absolute; bottom: 8px; right: 8px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: var(--nalt-sobre-oscuro); --acento: var(--nalt-sobre-oscuro);
  border: none; display: flex; align-items: center; justify-content: center;
}

/* --- Visor en pantalla completa: misma imagen/zoom, de cuerpo entero. --- */
.visor-completo {
  position: fixed; inset: 0; z-index: 50;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
.visor-completo__contenedor {
  position: relative; width: 100%; height: 100%;
  overflow: hidden;
}
.visor-completo__contenedor .foto-prod {
  background: transparent; border: none;
}
.visor-completo__contenedor .foto-prod img {
  width: 100%; height: 100%; object-fit: contain;
  transform-origin: center center;
  user-select: none; -webkit-user-drag: none;
  touch-action: pan-y;
}
.visor-completo__cerrar {
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none;
  display: flex; align-items: center; justify-content: center;
}
.visor-completo__cerrar .ico { transform: rotate(45deg); }

/* --- Galería de fotos (detalle de producto): miniaturas debajo de la foto
   principal, deslizables en móvil. Solo aparece si hay más de una foto. --- */
.producto-miniatura {
  width: 56px; height: 56px; flex-shrink: 0;
  padding: 0; border-radius: var(--nalt-radio-md);
  border: 2px solid transparent;
  background: var(--color-fondo);
  overflow: hidden;
}
.producto-miniatura--activa { border-color: var(--nalt-naranja); }
.producto-miniatura:focus-visible { outline: 3px solid var(--nalt-jade-claro); outline-offset: 1px; }

/* --- Cuenta: encabezado y recarga de saldo Nalt Tomín por código --- */
.avatar-cuenta {
  width: 56px; height: 56px; border-radius: var(--nalt-radio-pill);
  background: var(--nalt-jade); color: var(--nalt-negro);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.avatar-cuenta .ico { width: 30px; height: 30px; --acento: var(--nalt-negro); }
.separador-o { display: flex; align-items: center; gap: 10px; color: var(--color-texto-tenue); font-size: var(--nalt-texto-xs); margin: 2px 0; }
.separador-o::before, .separador-o::after { content: ""; flex: 1; height: 1px; background: var(--color-borde); }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: var(--nalt-texto-xs); color: var(--color-texto-tenue); font-weight: 600; }
.campo input, .campo select {
  height: var(--nalt-boton-alto);
  padding: 0 var(--nalt-espacio-3);
  border-radius: var(--nalt-radio-md);
  border: 1.5px solid var(--color-borde);
  background: var(--color-fondo);
  color: var(--color-texto);
  font-size: var(--nalt-texto-base);
  font-family: inherit;
}
.campo input:focus-visible, .campo select:focus-visible { outline: 3px solid var(--nalt-jade-claro); outline-offset: 1px; border-color: var(--nalt-jade); }
/* Solo para campos de código (Nalt Tomí, etc.) — no es el estilo por
   defecto de cualquier campo de texto (p. ej. usuario/contraseña del login). */
.campo input.input-codigo { text-transform: uppercase; letter-spacing: .04em; }

/* Botón de "ojo" para mostrar/ocultar lo que se está escribiendo en un
   campo de contraseña (nunca contraseñas ya guardadas, solo el valor
   actual del input) — ver configurarTogglesPassword() en index.html. */
.campo-password { position: relative; display: flex; }
.campo-password input { flex: 1; width: 100%; padding-right: 44px; }
.campo-password__boton {
  position: absolute; right: 2px; top: 0; height: 100%; width: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--color-texto-tenue);
}
.campo-password__boton .ico { width: 20px; height: 20px; }

/* --- Subtítulo náhuatl (bilingüe): bajo el texto en español, SOLO cuando
   el administrador lo valida en WooCommerce → Vocabulario náhuatl
   (GET /app-delivery/v1/vocabulario). Si no hay término validado para esa
   clave, el elemento se queda solo en español — nunca vacío ni roto. --- */
.nah-subtitulo {
  display: block;
  font-size: .72em;
  font-weight: 500;
  font-style: italic;
  opacity: .78;
  margin-top: 1px;
}

/* --- Tarjeta "Tlacualli" (Inicio): flor + título + subtítulo, todo
   alineado a la izquierda, con un chevron a la derecha que marca que es un
   enlace — toda la tarjeta es clicable (es un <button>). --- */
.tarjeta-tlacualli {
  display: flex; align-items: center; gap: var(--nalt-espacio-3);
  width: 100%; min-height: 72px;
  background: var(--nalt-jade-oscuro); color: var(--nalt-sobre-oscuro);
  border: none; border-radius: var(--nalt-radio-lg);
  padding: var(--nalt-espacio-3) var(--nalt-espacio-4);
  text-align: left; cursor: pointer;
}
.tarjeta-tlacualli__texto { display: flex; flex-direction: column; gap: 2px; text-align: left; flex: 1; min-width: 0; }
.tarjeta-tlacualli__titulo { font-family: var(--nalt-fuente-titulo); font-weight: 400; font-size: 22px; letter-spacing: -0.02em; }
.tarjeta-tlacualli__subtitulo { font-size: var(--nalt-texto-sm); opacity: .85; }

/* Mismo motivo que los demás ".col-izq/.col-der": conservan el espaciado
   que antes daba el "gap" de .contenido entre sus hijos. */
.inicio-col-acciones { display: flex; flex-direction: column; gap: var(--nalt-espacio-4); }

/* Bloque E: explicación "¿Cómo pago en una tienda?" — acordeón en el flujo,
   ancho máximo en pantallas grandes (nunca ocupa todo el ancho disponible). */
.como-pago { max-width: 560px; }

/* --- Tarjeta de saldo (Inicio y Cuenta) --- */
.saldo-tarjeta { background: linear-gradient(135deg, var(--nalt-jade-profundo), var(--nalt-jade-oscuro)); color: var(--nalt-sobre-oscuro); border-radius: var(--nalt-radio-lg); padding: var(--nalt-espacio-4); position: relative; overflow: hidden; }
.saldo-tarjeta__etq { font-size: var(--nalt-texto-xs); opacity: .9; text-transform: uppercase; letter-spacing: .05em; }
.saldo-tarjeta__monto { font-size: 2rem; font-weight: 800; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
.saldo-tarjeta__nota { font-size: var(--nalt-texto-xs); opacity: .85; }
.saldo-tarjeta .ico-flor-fondo, .pago-saldo-tarjeta .ico-flor-fondo { position: absolute; right: -10px; top: -10px; width: 96px; height: 96px; opacity: .15; --acento: var(--nalt-sobre-oscuro); color: var(--nalt-sobre-oscuro); }
/* Desglose de saldo restringido a una tienda (saldo total arriba sigue
   siendo UN solo número; esto es la nota de qué parte de ese total solo se
   puede gastar en una tienda específica). */
.saldo-tarjeta__desglose { position: relative; z-index: 1; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.25); display: flex; flex-direction: column; gap: 2px; }
.saldo-tarjeta__desglose-linea {
  font-size: var(--nalt-texto-xs); opacity: .9; text-align: left; color: var(--nalt-sobre-oscuro);
  background: none; border: none; padding: 2px 0; font-family: inherit; cursor: pointer;
}
.saldo-tarjeta__desglose-linea:hover,
.saldo-tarjeta__desglose-linea:focus-visible { opacity: 1; text-decoration: underline; }
/* La insignia de conexión se mudó aquí desde el encabezado de Inicio (ver
   index.html): el fondo/texto propios de .insignia--jade (jade sobre negro)
   casi no se ve sobre el degradado jade de esta tarjeta, así que se
   redefinen solo en este contexto — nunca texto blanco sobre jade puro
   (regla de tokens.css), por eso un fondo oscuro semitransparente en vez de
   uno claro. */
.saldo-tarjeta .insignia { position: relative; z-index: 1; flex-shrink: 0; }
.saldo-tarjeta .insignia--jade { background: rgba(0, 0, 0, .25); color: var(--nalt-sobre-oscuro); }
.saldo-tarjeta .insignia--gris { background: rgba(0, 0, 0, .35); color: var(--nalt-sobre-oscuro); }

/* --- Tarjetas "Comprar tarjeta Nalt Tomí" (bloque F): tipo boleto de
   regalo, únicas por monto — 6 combinaciones de color fijas, asignadas por
   posición (la 7ª vuelve a la 1ª); nunca un color al azar. Cada variable
   --tomi-* y --flor-* las define la clase .tomi-tarjeta--1..6 de abajo. --- */
.tomi-tarjetas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tomi-tarjeta {
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--nalt-radio-xl);
  border: 2px solid var(--tomi-borde);
  background: var(--tomi-fondo);
  color: var(--tomi-texto);
  box-shadow: 0 14px 24px -14px rgba(23, 19, 15, .55);
}
/* Dark mode ya trae tarjetas oscuras por diseño (combinaciones 4 y 6) — el
   borde propio de la paleta ya las distingue del fondo sin reglas aparte. */
.tomi-tarjeta__picado {
  height: 8px; flex-shrink: 0; background: var(--tomi-franja);
  clip-path: polygon(0 0, 100% 0, 100% 45%, 91.6% 100%, 83.3% 45%, 75% 100%, 66.6% 45%, 58.3% 100%, 50% 45%, 41.6% 100%, 33.3% 45%, 25% 100%, 16.6% 45%, 8.3% 100%, 0 45%);
}
.tomi-tarjeta__marco {
  flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  margin: 12px 7px 7px; padding: 14px 10px 10px; gap: 4px;
  border: 1.5px solid var(--tomi-linea); border-radius: var(--nalt-radio-lg);
}
.tomi-tarjeta__marca { font-family: var(--nalt-fuente-titulo); font-weight: 400; font-size: var(--nalt-texto-2xs); margin: 0; letter-spacing: .02em; }
.tomi-tarjeta__flor { width: 48px; height: 48px; margin: 4px 0; flex-shrink: 0; }
.tomi-tarjeta__monto { font-family: var(--nalt-fuente-titulo); font-weight: 400; font-size: 40px; line-height: 1; margin: 0; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tomi-tarjeta__monto--md { font-size: 34px; }
.tomi-tarjeta__monto--sm { font-size: 28px; }
.tomi-tarjeta__nombre { font-size: var(--nalt-texto-2xs); opacity: .85; margin: 2px 0 0; }
.tomi-tarjeta__boton {
  margin-top: auto; width: 100%; min-height: 44px; border: none; border-radius: var(--nalt-radio-md);
  background: var(--tomi-boton-fondo); color: var(--tomi-boton-texto);
  font-weight: 700; font-size: var(--nalt-texto-sm); font-family: inherit; cursor: pointer;
}
.tomi-tarjeta__bono {
  display: inline-block; margin: 2px 0 4px;
  font-size: var(--nalt-texto-2xs); font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: 99px;
  background: rgba(255,255,255,.22); color: var(--tomi-texto);
  border: 1px solid rgba(255,255,255,.35); letter-spacing: .01em;
}
.tomi-tarjeta--1 { --tomi-fondo: var(--nalt-jade); --tomi-texto: var(--nalt-sobre-oscuro); --flor-ext: var(--nalt-naranja); --flor-int: var(--nalt-naranja-petalo); --flor-centro: var(--nalt-negro); --tomi-franja: var(--nalt-naranja); --tomi-linea: rgba(255,255,255,.5); --tomi-boton-fondo: var(--nalt-naranja); --tomi-boton-texto: var(--nalt-negro); --tomi-borde: var(--nalt-jade-oscuro); }
.tomi-tarjeta--2 { --tomi-fondo: var(--nalt-naranja); --tomi-texto: var(--nalt-negro); --flor-ext: var(--nalt-negro); --flor-int: var(--nalt-jade); --flor-centro: #FFF3DC; --tomi-franja: var(--nalt-superficie-oscura); --tomi-linea: rgba(23,19,15,.5); --tomi-boton-fondo: var(--nalt-superficie-oscura); --tomi-boton-texto: var(--nalt-sobre-oscuro); --tomi-borde: #C86E00; }
.tomi-tarjeta--3 { --tomi-fondo: var(--nalt-rosa); --tomi-texto: var(--nalt-sobre-oscuro); --flor-ext: #FFB3CF; --flor-int: var(--nalt-naranja); --flor-centro: var(--nalt-negro); --tomi-franja: var(--nalt-naranja); --tomi-linea: rgba(255,255,255,.5); --tomi-boton-fondo: var(--nalt-sobre-oscuro); --tomi-boton-texto: var(--nalt-negro); --tomi-borde: #8E0F42; }
.tomi-tarjeta--4 { --tomi-fondo: var(--nalt-superficie-oscura); --tomi-texto: var(--nalt-sobre-oscuro); --flor-ext: var(--nalt-naranja); --flor-int: var(--nalt-naranja-petalo); --flor-centro: var(--nalt-jade); --tomi-franja: var(--nalt-jade); --tomi-linea: rgba(255,255,255,.35); --tomi-boton-fondo: var(--nalt-naranja); --tomi-boton-texto: var(--nalt-negro); --tomi-borde: var(--nalt-borde-oscuro); }
.tomi-tarjeta--5 { --tomi-fondo: var(--nalt-jade-oscuro); --tomi-texto: var(--nalt-sobre-oscuro); --flor-ext: var(--nalt-dorado); --flor-int: var(--nalt-naranja); --flor-centro: var(--nalt-negro); --tomi-franja: var(--nalt-dorado); --tomi-linea: rgba(245,196,81,.65); --tomi-boton-fondo: var(--nalt-dorado); --tomi-boton-texto: var(--nalt-negro); --tomi-borde: var(--nalt-dorado); }
.tomi-tarjeta--6 { --tomi-fondo: var(--nalt-superficie-oscura); --tomi-texto: var(--nalt-dorado); --flor-ext: var(--nalt-dorado); --flor-int: var(--nalt-naranja); --flor-centro: var(--nalt-rosa); --tomi-franja: var(--nalt-dorado); --tomi-linea: var(--nalt-dorado); --tomi-boton-fondo: var(--nalt-dorado); --tomi-boton-texto: var(--nalt-negro); --tomi-borde: var(--nalt-dorado); }
.tomi-tarjeta--seleccionada { outline: 4px solid var(--nalt-naranja); outline-offset: 2px; }
.tomi-tarjeta--deshabilitada { opacity: 0.5; filter: grayscale(40%); }

/* --- Adaptable a cualquier pantalla ---------------------------------------
   Diseñado para celular (360px en adelante). En tablet o computadora la app
   se queda en una columna centrada de ancho máximo, en vez de estirarse a
   todo el ancho; la barra de abajo sigue el mismo ancho. Nada aquí cambia el
   diseño en celular (390px, la fuente de verdad), salvo compactar un poco
   los teléfonos muy angostos. */
:root { --nalt-ancho-app: 520px; }

/* El fondo (header, papel picado, barra inferior) va a todo el ancho del
   viewport; lo que se centra con --nalt-ancho-app es el CONTENIDO de adentro
   (.contenido, .nav-inferior__fila, .nav-superior__fila, y cada hijo directo
   de .cabecera-oscura) — así nunca quedan franjas del fondo de la página a
   los lados en tablet/escritorio (bug real, corregido 2026-10-19). */
.contenido {
  width: 100%;
  max-width: var(--nalt-ancho-app);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
/* El banner de instalar es angosto y poco frecuente — se queda con el
   centrado simple de antes, sin fondo a todo el ancho. */
.banner-instalar { max-width: var(--nalt-ancho-app); margin-left: auto; margin-right: auto; }
/* Las flores decorativas salen un poco del borde; sin esto podrían crear
   una barra de desplazamiento horizontal en pantallas angostas. Solo
   horizontal: "overflow: hidden" a secas recortaba la pantalla entera y
   le quitaba el scroll vertical (bug real, encontrado 2026-10-07). */
.inicio-fondo { overflow-x: hidden; }

/* Cuadrícula de "Lo más pedido": 2 columnas en celular, más en pantallas
   anchas, sin importar el tamaño exacto del teléfono. */
.populares { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

@media (max-width: 359px) {
  .contenido { padding: var(--nalt-espacio-3); gap: var(--nalt-espacio-3); }
  .saldo-tarjeta__monto { font-size: 1.6rem; }
  .populares { gap: 8px; }
}

/* =========================================================================
   Rediseño "Tianquiztli" — identidad y componentes del diseño nuevo
   (ver prompt-claude-code-rediseno-tianquiztli.md y design/*.dc.html).
   ========================================================================= */

/* --- Tipografía de título/precio: Young Serif (peso 400), el resto se queda en
   Figtree (ya es la fuente por default, ver tokens.css). Clase reutilizable
   para títulos de pantalla; los precios/montos ya la llevan por selector
   directo (no hacía falta agregarles una clase en cada sitio). --- */
.t-display {
  font-family: var(--nalt-fuente-titulo);
  font-weight: 400;
  letter-spacing: -0.01em;
}
h1, .saldo-tarjeta__monto, .tomi-tarjeta__monto,
#carrito-total, #producto-precio, #inicio-saldo-monto,
.precio-oferta__actual, .popular-card__precio {
  font-family: var(--nalt-fuente-titulo);
  letter-spacing: -0.02em;
 font-weight: 400; }

/* --- Franja de papel picado en zigzag (naranja), identidad obligatoria en
   todas las pantallas — picos triangulares en vez del recorte circular de
   antes, para que calce con el diseño aprobado. --- */
.papel-picado-zigzag {
  height: 15px;
  width: 100%;
  background: var(--nalt-naranja);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 97.5% 0%, 92.5% 100%, 87.5% 0%, 82.5% 100%, 77.5% 0%, 72.5% 100%, 67.5% 0%, 62.5% 100%, 57.5% 0%, 52.5% 100%, 47.5% 0%, 42.5% 100%, 37.5% 0%, 32.5% 100%, 27.5% 0%, 22.5% 100%, 17.5% 0%, 12.5% 100%, 7.5% 0%, 2.5% 100%, 0 0);
}

/* --- Flor de cempasúchil de marca (12 pétalos + 12 internos + centro jade):
   símbolo de color fijo (#i-flor-cempa en el sprite), no de trazo como el
   resto de .ico — se usa en Login, Registro, Saldo y la tarjeta de saldo. --- */
.flor-cempa { width: 64px; height: 64px; flex-shrink: 0; }
.flor-cempa--sm { width: 40px; height: 40px; }

/* --- Cabecera oscura dentro de una pantalla clara (Carrito, Tlacualli):
   el resto de la pantalla usa el tema claro normal, solo el encabezado de
   arriba es fijo oscuro, como pide el diseño. --- */
/* El fondo oscuro ocupa todo el ancho; el contenido de adentro (cada hijo
   directo: la fila de título, el buscador…) se centra con el mismo ancho
   máximo que .contenido, para que no quede pegado a los bordes en tablet
   o escritorio. */
.cabecera-oscura {
  background: var(--nalt-negro);
  color: var(--nalt-sobre-oscuro);
  padding: var(--nalt-espacio-4) 0 var(--nalt-espacio-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nalt-espacio-2);
}
.cabecera-oscura > * {
  width: 100%;
  max-width: var(--nalt-ancho-app);
  box-sizing: border-box;
  padding-left: var(--nalt-espacio-4);
  padding-right: var(--nalt-espacio-4);
}
.cabecera-oscura .btn-fantasma { color: var(--nalt-sobre-oscuro); border-color: var(--nalt-borde-oscuro); }
.cabecera-oscura--jade { background: linear-gradient(135deg, var(--nalt-jade-profundo), var(--nalt-jade-oscuro)); }

/* --- Chip del saldo Nalt Tomi en cabeceras (Catálogo, Tlacualli): toca →
   Saldo. Dorado, como pide el diseño para los accesos a cargar/ver saldo. --- */
.chip-saldo {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--nalt-dorado); color: var(--nalt-negro);
  border: none; border-radius: var(--nalt-radio-pill);
  padding: 6px 12px; font-weight: 700; font-size: var(--nalt-texto-xs);
  cursor: pointer; font-family: inherit;
}

/* --- Chips de categoría (Catálogo/Tlacualli): estado seleccionado con
   aria-pressed, como pide la sección de accesibilidad. --- */
.chips-categoria { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.chip-categoria {
  flex-shrink: 0; border-radius: var(--nalt-radio-pill);
  border: 1.5px solid var(--color-borde); background: var(--color-fondo-tarjeta);
  color: var(--color-texto); padding: 8px 14px; font-size: var(--nalt-texto-sm);
  font-weight: 600; font-family: inherit; cursor: pointer; min-height: 44px;
}
.chip-categoria[aria-pressed="true"] { background: var(--nalt-naranja); color: var(--nalt-negro); border-color: var(--nalt-naranja); }

/* --- Barra de búsqueda (Catálogo/Tlacualli) --- */
.buscador { position: relative; display: flex; align-items: center; }
.buscador .ico { position: absolute; left: 14px; --acento: var(--color-texto-tenue); color: var(--color-texto-tenue); pointer-events: none; }
.buscador input {
  width: 100%; height: 48px; padding: 0 14px 0 42px;
  border-radius: var(--nalt-radio-pill); border: 1.5px solid var(--color-borde);
  background: var(--color-fondo-tarjeta); color: var(--color-texto);
  font-size: var(--nalt-texto-sm); font-family: inherit;
}

/* --- Tarjeta de pago con saldo (Carrito): "Te quedan $X" / "Te faltan $X". --- */
.pago-saldo-tarjeta { background: var(--nalt-negro); color: var(--nalt-sobre-oscuro); border-radius: var(--nalt-radio-lg); padding: var(--nalt-espacio-4); position: relative; overflow: hidden; }
.pago-saldo-tarjeta__linea-dorada { height: 1px; background: var(--nalt-dorado); opacity: .5; margin: var(--nalt-espacio-2) 0; }
.pago-saldo-tarjeta__resultado--alcanza { color: var(--nalt-dorado); font-weight: 800; }
.pago-saldo-tarjeta__resultado--falta { color: var(--nalt-rosa-sobre-oscuro); font-weight: 800; }

/* --- Barra fija de total + acción (Carrito, Producto): sobre el nav. --- */
.barra-fija-accion {
  position: fixed; left: 0; right: 0;
  bottom: calc(56px + 1px + env(safe-area-inset-bottom));
  z-index: 9;
  background: var(--color-fondo-tarjeta);
  border-top: 1px solid var(--color-borde);
  padding: var(--nalt-espacio-3) var(--nalt-espacio-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--nalt-espacio-3);
}

/* --- Hoja inferior (bottom sheet) de Login "¿Quieres saber más?" --- */
.hoja-fondo { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.65); border: none; padding: 0; cursor: pointer; }
.hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  max-width: var(--nalt-ancho-app); margin: 0 auto;
  max-height: 85vh; overflow-y: auto;
  background: var(--nalt-negro); color: var(--nalt-sobre-oscuro);
  border-top: 2px solid var(--nalt-naranja);
  border-radius: 28px 28px 0 0;
  padding: 12px 16px calc(28px + env(safe-area-inset-bottom)) 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.hoja__agarradera { width: 48px; height: 5px; border-radius: var(--nalt-radio-pill); background: var(--nalt-suave-sobre-oscuro); align-self: center; flex-shrink: 0; }
.hoja__cerrar { width: 44px; height: 44px; flex-shrink: 0; border: 1.5px solid var(--nalt-suave-sobre-oscuro); border-radius: var(--nalt-radio-pill); background: transparent; color: var(--nalt-sobre-oscuro); display: flex; align-items: center; justify-content: center; }
.hoja__cerrar .ico { transform: rotate(45deg); }
.hoja__paso { display: flex; gap: 12px; align-items: flex-start; }
.hoja__paso-num { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--nalt-radio-sm); background: var(--nalt-naranja); color: var(--nalt-negro); display: flex; align-items: center; justify-content: center; font-family: var(--nalt-fuente-titulo); font-weight: 400; font-size: 18px; }
.hoja__chip-carga { display: flex; align-items: center; gap: 12px; background: rgba(11,10,9,.28); border-radius: 14px; padding: 11px 14px; font-size: var(--nalt-texto-sm); font-weight: 600; }
.hoja__boton-flotante {
  position: static; align-self: center; margin: 14px auto 0;
  height: 52px; padding: 0 22px 0 16px; border: 0; border-radius: var(--nalt-radio-pill);
  background: var(--nalt-jade); color: var(--nalt-negro); font-family: inherit; font-size: var(--nalt-texto-sm);
  font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; white-space: nowrap;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.8), 0 0 0 1.5px rgba(245,196,81,.6);
  z-index: 5;
}

/* =========================================================================
   Diseño responsivo (tablet/laptop/escritorio) — ajuste adicional al
   rediseño. El móvil (390px, arriba) es la fuente de verdad y NO cambia;
   todo esto son solo añadidos con min-width, mobile-first. Mismos tokens,
   mismo papel picado, misma flor — ninguna pantalla nueva ni duplicada.
   ========================================================================= */

/* --- Ancho del contenedor + márgenes por breakpoint (sección "ENFOQUE" del
   ajuste: 1200px en catálogo/tienda/inicio, 1080px en el resto; 16/24/32px
   de margen lateral). Catálogo/Tienda/Inicio necesitan más ancho para la
   grilla de más columnas; el resto (formularios, carrito, perfil) se queda
   más angosto para que no se vean líneas de texto gigantes. --- */
@media (min-width: 640px) {
  :root { --nalt-ancho-app: 600px; }
}
@media (min-width: 768px) {
  :root { --nalt-ancho-app: 720px; }
  .contenido, .cabecera-oscura > *, .nav-inferior__fila { padding-left: var(--nalt-espacio-5); padding-right: var(--nalt-espacio-5); }
}
@media (min-width: 1024px) {
  :root { --nalt-ancho-app: 1080px; }
  #pantalla-catalogo, #pantalla-tienda, #pantalla-inicio { --nalt-ancho-app: 1200px; }
  .contenido, .cabecera-oscura > *, .nav-inferior__fila { padding-left: var(--nalt-espacio-6); padding-right: var(--nalt-espacio-6); }
  /* Sin barra inferior en escritorio (ver nav-superior más abajo): el
     relleno de abajo que le dejaba sitio ya no hace falta. Login/Registro
     no llevan nav-superior (se ocultan en mostrarApp()), así que no
     necesitan el relleno de arriba. */
  .pantalla { padding-bottom: var(--nalt-espacio-6); padding-top: 96px; }
  #pantalla-login, #pantalla-registro { padding-top: 0; }
}

/* --- Títulos con tipografía fluida (clamp), solo títulos — el cuerpo se
   queda en 15–16px en cualquier tamaño, como pide el ajuste. --- */
.t-display, h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem); }
/* Los títulos que ya traían su propio tamaño en línea (style="font-size:…")
   ganan por especificidad de todos modos — este clamp es el tamaño por
   default para los que no lo fijan aparte (p. ej. "Perfil", "Mi carrito"). */

/* --- Estados :hover (solo con mouse de verdad — nunca "hover pegado" en
   pantallas táctiles) y :focus-visible en elementos clicables. --- */
@media (hover: hover) and (pointer: fine) {
  .tarjeta, .popular-card, .tienda-card, .chip-categoria, .tienda-chip,
  .tomi-tarjeta, .nav-superior__enlace, .nav-inferior__item {
    transition: transform 150ms var(--nalt-ease-out), box-shadow 150ms var(--nalt-ease-out), border-color 150ms var(--nalt-ease-out);
  }
  .tarjeta:hover, .popular-card:hover, .tienda-card:hover {
    box-shadow: 0 2px 8px rgba(23,19,15,.08), 0 16px 32px -12px rgba(23,19,15,.32);
    border-color: var(--nalt-jade);
    transform: translateY(-1px);
  }
  .chip-categoria:hover { border-color: var(--nalt-jade); }
  .btn:hover:not(:disabled) { filter: brightness(1.06); }
  a:hover, button:hover, [data-ir]:hover, .nav-superior__enlace:hover { cursor: pointer; }
}

/* =========================================================================
   NAV: móvil/tablet (<1024px) se queda la barra inferior (igual que el
   diseño móvil); en tablet (768–1023px) el texto va al lado del ícono en
   vez de debajo, para aprovechar el ancho. En escritorio (≥1024px) la
   barra inferior desaparece y aparece el nav superior.
   ========================================================================= */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .nav-inferior__item { flex-direction: row; gap: 6px; min-height: 48px; }
}
@media (min-width: 1024px) {
  .nav-inferior { display: none; }
}

/* Inicio: su encabezado (marca + chip de saldo + buscador) es exactamente
   lo mismo que ya trae el nav superior de escritorio — mostrar los dos a
   la vez era el bug de "dos encabezados". Se oculta por completo (no solo
   visualmente) desde 1024px. Catálogo/Tiendas sí conservan su propio
   encabezado (tienen controles que el nav superior no tiene — modo
   Mercancía/Tlacualli, escaneo QR, volver), solo se les quita el chip de
   saldo repetido. */
@media (min-width: 1024px) {
  #pantalla-inicio > .cabecera-oscura,
  #pantalla-inicio > .papel-picado-zigzag {
    display: none;
  }
  #pantalla-catalogo .cabecera-oscura .chip-saldo,
  #pantalla-tiendas .cabecera-oscura .chip-saldo {
    display: none;
  }
}

.nav-superior { display: none; }
@media (min-width: 1024px) {
  .nav-superior {
    display: block;
    position: fixed; top: 0; left: 0; right: 0; z-index: 10;
    background: var(--nalt-negro);
  }
  .nav-superior__fila {
    max-width: 1280px; margin: 0 auto;
    display: flex; align-items: center; gap: var(--nalt-espacio-4);
    padding: 12px var(--nalt-espacio-6);
  }
  .nav-superior__marca { color: var(--nalt-sobre-oscuro); font-size: 20px; flex-shrink: 0; }
  .nav-superior__enlaces { display: flex; gap: var(--nalt-espacio-4); flex-shrink: 0; }
  .nav-superior__enlace {
    background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--nalt-suave-sobre-oscuro); font-family: inherit; font-size: var(--nalt-texto-sm); font-weight: 600;
    padding: 6px 2px; cursor: pointer;
  }
  .nav-superior__enlace[aria-current="page"] { color: var(--nalt-sobre-oscuro); border-bottom-color: var(--nalt-jade-sobre-oscuro); }
  .nav-superior__buscador { flex: 1; min-width: 0; max-width: 420px; }
  .nav-superior__icono {
    background: none; border: none; cursor: pointer;
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
}

/* =========================================================================
   Catálogo / Tlacualli / Buscador: columnas adaptativas por tamaño de
   pantalla, manteniendo tarjetas de ~160-190px.
   - Móvil:    2 cols (default)
   - ≥640px:   3 cols
   - ≥768px:   4 cols (tablet/horizontal)
   - ≥1024px:  5 cols (escritorio con sidebar ~900px → ~180px/tarjeta)
   - ≥1024px tienda (sin sidebar ~1150px): 6 cols
   - ≥1280px:  6 cols
   ========================================================================= */
@media (min-width: 640px)  { .populares { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  { .populares { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .populares { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1024px) { #pantalla-tienda .populares { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1280px) { .populares { grid-template-columns: repeat(6, 1fr); } }

/* =========================================================================
   Inicio: flujo vertical (saldo solo en el chip del encabezado — Bloque E).
   En tablet: columna centrada de ancho máximo.
   En escritorio (≥1024px): 2 columnas — acciones/categorías/tiendas a la
   izquierda, "Lo más pedido" ocupa toda la columna derecha.
   ========================================================================= */
@media (min-width: 768px) {
  .inicio-grid { display: flex; flex-direction: column; gap: var(--nalt-espacio-4); max-width: 680px; }
}
@media (min-width: 1024px) {
  .inicio-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--nalt-espacio-4) var(--nalt-espacio-6);
    max-width: none;
    align-items: start;
  }
  .inicio-grid > .inicio-col-acciones,
  .inicio-grid > #inicio-categorias-seccion,
  .inicio-grid > #inicio-tiendas-seccion { grid-column: 1; }
  .inicio-grid > .populares-seccion { grid-column: 2; grid-row: 1 / span 10; }
  /* Tiendas: en escritorio no necesita scroll horizontal, se envuelven */
  #inicio-tiendas-seccion .tiendas-fila { flex-wrap: wrap; overflow-x: visible; }
}

/* =========================================================================
   Producto (corrección 2026-10-19): una columna en móvil (default). Desde
   768px, dos columnas (galería a la izquierda, tarjeta de compra de
   460px a la derecha) — mismo marcado, ver .producto-col-izq/.producto-col-der
   en index.html. SIN sticky ni fixed en ningún tamaño: la tarjeta de
   compra solo se acomoda al lado de la galería, en el flujo normal.
   Debajo, descripción/specs/reseñas/relacionados a todo el ancho porque no
   están envueltos en ninguna columna. --- */
.producto-col-izq, .producto-col-der { display: flex; flex-direction: column; gap: var(--nalt-espacio-4); }

@media (min-width: 768px) {
  .producto-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: var(--nalt-espacio-6);
    align-items: start;
  }
  #producto-migas { display: flex !important; }
}

/* --- Tarjeta de compra: chips/círculos de color, cantidad, total y los
   dos botones, todo en el flujo normal (ver nota de arriba). --- */
.producto-tarjeta-compra { display: flex; flex-direction: column; gap: var(--nalt-espacio-3); }
.producto-tarjeta-compra__linea { height: 1px; background: var(--color-borde); margin: 2px 0; }
.producto-tienda-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--nalt-texto-sm); font-weight: 600; color: var(--nalt-jade-oscuro); text-decoration: none; }
.producto-variantes-caja { display: flex; flex-direction: column; gap: var(--nalt-espacio-3); }

.grupo-variante__titulo { font-size: var(--nalt-texto-sm); font-weight: 600; margin: 0 0 8px; }
.grupo-variante__valor { font-weight: 500; color: var(--color-texto-tenue); }
.grupo-variante__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.grupo-variante--falta { outline: 2px solid var(--nalt-rosa); outline-offset: 4px; border-radius: var(--nalt-radio-sm); }

/* Chip de texto (talla, material…): 44px de alto, elegido = fondo oscuro
   con texto blanco (en modo oscuro, naranja con texto oscuro). */
.chip-variante {
  min-width: 56px; height: 44px; padding: 0 14px;
  border-radius: var(--nalt-radio-sm); border: 1.5px solid var(--color-borde);
  background: var(--color-fondo-tarjeta); color: var(--color-texto);
  font-size: var(--nalt-texto-sm); font-weight: 600; font-family: inherit; cursor: pointer;
}
.chip-variante[aria-pressed="true"] { background: var(--nalt-negro); border-color: var(--nalt-negro); color: var(--nalt-sobre-oscuro); }
:root[data-tema="oscuro"] .chip-variante[aria-pressed="true"],
#pantalla-producto .chip-variante[aria-pressed="true"] { background: var(--nalt-naranja); border-color: var(--nalt-naranja); color: var(--nalt-negro); }
.chip-variante--agotada, .chip-variante:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

/* Círculo de color: 44px, borde blanco, anillo de 2px cuando está elegido. */
.chip-color {
  width: 44px; height: 44px; border-radius: 999px; padding: 0;
  border: 3px solid var(--color-fondo-tarjeta); cursor: pointer;
  box-shadow: 0 0 0 1px var(--color-borde);
}
.chip-color[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--nalt-negro); }
.chip-color.chip-variante--agotada, .chip-color:disabled { opacity: .35; cursor: not-allowed; }

/* Mismos chips dentro de una tarjeta del catálogo, en miniatura — el
   espacio ahí es mucho más chico que en el detalle. */
.grupos-variante-caja { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.grupos-variante-caja .grupo-variante__titulo { font-size: var(--nalt-texto-2xs); margin-bottom: 4px; }
.grupos-variante-caja .grupo-variante__chips { gap: 4px; }
.grupos-variante-caja .chip-variante { min-width: 36px; height: 28px; padding: 0 8px; font-size: var(--nalt-texto-2xs); border-radius: 8px; }
.grupos-variante-caja .chip-color { width: 22px; height: 22px; border-width: 2px; }
.grupos-variante-caja .btn-limpiar-variante { font-size: var(--nalt-texto-2xs); }

.btn-limpiar-variante {
  align-self: flex-start; background: none; border: none; padding: 0;
  font-size: var(--nalt-texto-xs); font-weight: 600; color: var(--nalt-jade-oscuro);
  text-decoration: underline; cursor: pointer; font-family: inherit;
}

/* Selector de cantidad: mismo lenguaje que el resto de la app. */
.selector-cantidad { display: flex; align-items: center; border: 1.5px solid var(--color-borde); border-radius: var(--nalt-radio-sm); overflow: hidden; }
.selector-cantidad button { width: 44px; height: 44px; border: 0; background: var(--color-fondo-tarjeta); color: var(--color-texto); font-size: 20px; cursor: pointer; }
.selector-cantidad button:disabled { opacity: .4; cursor: not-allowed; }
.selector-cantidad span { width: 40px; text-align: center; font-weight: 600; }

/* Botones de compra: contraste mínimo 4.5:1 incluso deshabilitados — nunca
   café apagado con texto oscuro (sección B de la corrección). */
.producto-btn-comprar, .producto-btn-agregar {
  min-height: 56px; border-radius: var(--nalt-radio-md); font-size: var(--nalt-texto-base); font-weight: 800;
  border: none; cursor: pointer; font-family: inherit;
}
.producto-btn-comprar { background: var(--nalt-naranja); color: var(--nalt-negro); }
.producto-btn-agregar { background: var(--color-fondo-tarjeta); color: var(--color-texto); border: 2px solid var(--nalt-negro); font-weight: 600; }
#pantalla-producto .producto-btn-agregar { border-color: var(--color-texto); }
.producto-btn-comprar:disabled, .producto-btn-agregar:disabled {
  background: transparent; border: 2px solid var(--nalt-naranja-texto); color: var(--nalt-naranja-texto); cursor: not-allowed;
}
:root[data-tema="oscuro"] .producto-btn-comprar:disabled,
:root[data-tema="oscuro"] .producto-btn-agregar:disabled,
#pantalla-producto .producto-btn-comprar:disabled,
#pantalla-producto .producto-btn-agregar:disabled { border-color: var(--nalt-dorado); color: var(--nalt-dorado); }

.producto-entrega-pago { display: flex; flex-direction: column; gap: 10px; padding-top: var(--nalt-espacio-3); border-top: 1px solid var(--color-borde); }

/* Tabla de especificaciones */
.producto-specs { width: 100%; border-collapse: collapse; margin-top: var(--nalt-espacio-3); font-size: var(--nalt-texto-sm); border: 1px solid var(--color-borde); border-radius: var(--nalt-radio-sm); overflow: hidden; }
.producto-specs:empty { display: none; }
.producto-specs th, .producto-specs td { padding: 10px 12px; text-align: left; border-top: 1px solid var(--color-borde); }
.producto-specs tr:first-child th, .producto-specs tr:first-child td { border-top: none; }
.producto-specs th { background: var(--color-fondo); font-weight: 600; width: 140px; }

/* HTML seguro del proveedor (descripción, short_description): imágenes
   responsivas y texto fluido, sin scroll horizontal. */
.producto-html img { max-width: 100%; height: auto; display: block; border-radius: var(--nalt-radio-sm); }
.producto-html p { margin: 0 0 0.75em; }
.producto-html p:last-child { margin-bottom: 0; }
.producto-html ul, .producto-html ol { padding-left: 1.4em; margin: 0 0 0.75em; }
.producto-html table { width: 100%; border-collapse: collapse; font-size: var(--nalt-texto-sm); overflow-x: auto; display: block; }
.producto-html td, .producto-html th { border: 1px solid var(--color-borde); padding: 6px 10px; }

/* Controles de paginación: Anterior / info / Siguiente. */
.controles-pagina { justify-content: space-between; padding: 14px 0; }
.controles-pagina__btn { border: none; padding: 8px 12px; min-height: auto; font-size: var(--nalt-texto-sm); }
.controles-pagina__btn:disabled { opacity: 0.4; cursor: default; }
.controles-pagina__info { font-size: var(--nalt-texto-xs); color: var(--color-texto-tenue); align-self: center; }

/* Más de esta tienda / relacionados */
.producto-relacionados-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.producto-relacionado-card { display: flex; flex-direction: column; gap: 4px; background: var(--color-fondo-tarjeta); border: 1px solid var(--color-borde); border-radius: var(--nalt-radio-md); padding: 8px; text-align: left; cursor: pointer; }
.producto-relacionado-card__nombre { font-size: var(--nalt-texto-xs); font-weight: 600; }
.producto-relacionado-card__precio { font-size: var(--nalt-texto-sm); color: var(--nalt-naranja-texto); }
@media (min-width: 640px) { .producto-relacionados-grilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .producto-relacionados-grilla { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================================
   Tienda: banner/encabezado ya ocupa el ancho de la pantalla (ver
   #pantalla-tienda arriba en --nalt-ancho-app). Desde 1024px, info de la
   tienda en una columna angosta a la izquierda del grid de productos — el
   encabezado (banner/nombre/calificación) ya está fuera de ese grid, así
   que solo el bloque de pestañas pasa a 2 columnas con una barra lateral
   mínima de categorías/buscador si existieran; aquí solo hay pestañas, así
   que el ajuste real es la grilla de productos (ver .populares arriba). --- */

/* =========================================================================
   Carrito: una columna en móvil (default). Desde 1024px, dos columnas:
   entrega a la izquierda, resumen/pago/acción sticky a la derecha (ancho
   fijo) — ver .carrito-col-izq/.carrito-col-der en index.html. La barra
   fija de abajo (duplicado del mismo total/acción, para no scrollear hasta
   la columna derecha) se queda solo en móvil.
   ========================================================================= */
@media (min-width: 1024px) {
  .carrito-resumen-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--nalt-espacio-6);
    align-items: start;
  }
  .carrito-col-der { position: sticky; top: 90px; }
  .barra-fija-accion { display: none; }
}

/* =========================================================================
   Login y Registro: tarjeta centrada (ya lo está, --nalt-ancho-app).
   Desde 1024px, pantalla dividida: flor + Ximopanolti + tagline a la
   izquierda, formulario a la derecha — mismo contenido, solo reacomodado
   con grid (nada se duplica). La hoja "¿Quieres saber más?" pasa de hoja
   inferior a panel lateral/modal centrado desde 768px.
   ========================================================================= */
/* Login/Registro: la .pantalla ocupa el 100 % del ancho (no se le pone
   max-width para evitar la franja clara del body en los lados); solo el
   contenido interior se centra con max-width. */
.login-tarjeta-der {
  display: flex;
  flex-direction: column;
  gap: var(--nalt-espacio-3);
}
#login-boton { font-weight: 800; }
@media (min-width: 768px) {
  #pantalla-login > .contenido,
  #pantalla-registro > .contenido {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  #pantalla-login > .contenido {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--nalt-espacio-6);
    padding-top: 48px;
    padding-bottom: 48px;
    text-align: left;
  }
  #pantalla-login > .contenido > div:first-child { text-align: left; }
  #pantalla-login > .contenido > div:first-child svg.flor-cempa {
    margin: 0 !important;
    width: 140px;
    height: 140px;
  }
  .login-tarjeta-der {
    background: var(--nalt-negro);
    border: 1.5px solid var(--nalt-superficie-2-oscura);
    border-radius: 24px;
    padding: 28px 32px;
    width: 440px;
    gap: 0;
    flex-shrink: 0;
  }
  .login-tarjeta-der .hoja__boton-flotante {
    position: static;
    transform: none;
    align-self: center;
    margin: 12px auto 0;
    width: fit-content;
  }
}
@media (min-width: 768px) and (max-height: 600px) {
  #pantalla-login > .contenido > div:first-child svg.flor-cempa { width: 80px; height: 80px; }
  #pantalla-login > .contenido > div:first-child h1 { font-size: clamp(1.5rem, 3vw, 2rem) !important; }
}
@media (min-width: 768px) {
  /* Hoja → panel lateral centrado, igual contenido, solo otra posición. */
  .hoja-fondo { background: rgba(0,0,0,.55); }
  .hoja {
    left: 50%; right: auto; bottom: 50%;
    transform: translate(-50%, 50%);
    width: 100%; max-width: 560px; max-height: 80vh;
    border-radius: var(--nalt-radio-xxl);
    border-top: 1px solid var(--color-borde);
  }
}

/* =========================================================================
   Perfil y Saldo: una columna centrada (máx. 720px, ver --nalt-ancho-app en
   768px). Desde 1024px, dos columnas: tarjeta de saldo/QR a la izquierda,
   el resto a la derecha — se arma con grid-template-areas sobre el mismo
   .contenido, sin envolver nada nuevo. La grilla de tarjetas Nalt Tomi
   pasa de 2 a 3 columnas en tablet y 6 en escritorio.
   ========================================================================= */
/* .perfil-col-izq/.perfil-col-der son solo envoltorios para poder armar el
   grid de escritorio (ver abajo) — en móvil/tablet tienen que seguir
   dejando el mismo espacio entre sus hijos que antes daba el "gap" de
   .contenido, por eso llevan flex column + gap en cualquier tamaño. */
.perfil-col-izq, .perfil-col-der { display: flex; flex-direction: column; gap: var(--nalt-espacio-4); }

@media (min-width: 1024px) {
  #pantalla-cuenta > .contenido {
    display: grid;
    grid-template-columns: 320px 1fr;
    align-items: start;
    gap: var(--nalt-espacio-6);
  }
  #pantalla-cuenta > .contenido > .t-display, #pantalla-cuenta > .contenido > .perfil-titulo { grid-column: 1 / -1; }
  .perfil-col-izq { position: sticky; top: 90px; }
}
/* 2 columnas en móvil (regla base de arriba), 3 en tablet y escritorio —
   nunca 6: con tarjetas de 276px de alto mínimo, 6 columnas las dejaría
   demasiado angostas. */
@media (min-width: 640px) { .tomi-tarjetas { grid-template-columns: repeat(auto-fill, minmax(150px, 220px)); max-width: 1100px; justify-content: center; } }

/* =========================================================================
   Interruptor de palanca (toggle) — usado en "Ahorrar datos" de Perfil.
   ========================================================================= */
.toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  min-height: 44px; /* táctil mínimo */
}
.toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle__pista {
  display: block;
  width: 44px;
  height: 26px;
  background: var(--color-borde);
  border-radius: 13px;
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}
.toggle__pista::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: var(--nalt-sobre-oscuro);
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 200ms var(--nalt-ease-out);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.toggle input[type="checkbox"]:checked + .toggle__pista { background: var(--nalt-jade); }
.toggle input[type="checkbox"]:checked + .toggle__pista::after { transform: translateX(18px); }
.toggle input[type="checkbox"]:focus-visible + .toggle__pista {
  outline: 2px solid var(--nalt-naranja);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .toggle__pista, .toggle__pista::after { transition: none; }
}

/* --- Línea de tiempo de seguimiento de pedido (Mis pedidos) --- */
.pedido-tl {
  position: relative;
  padding: 10px 0 4px 24px;
  margin-top: 8px;
  border-top: 1px solid var(--color-borde);
}
/* línea vertical que conecta los puntos */
.pedido-tl::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 14px;
  bottom: 8px;
  width: 2px;
  background: var(--color-borde);
}
.pedido-tl__paso {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  font-size: var(--nalt-texto-xs);
  color: var(--color-texto-tenue);
}
.pedido-tl__paso:last-child { margin-bottom: 0; }
.pedido-tl__punto {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-borde);
  background: var(--color-fondo);
  position: absolute;
  left: -18px;
  top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* paso completado: punto relleno jade con checkmark */
.pedido-tl__paso--hecho .pedido-tl__punto {
  background: var(--nalt-jade);
  border-color: var(--nalt-jade);
}
.pedido-tl__paso--hecho .pedido-tl__punto::after {
  content: '';
  display: block;
  width: 5px;
  height: 3px;
  border-left: 1.5px solid var(--nalt-negro);
  border-bottom: 1.5px solid var(--nalt-negro);
  transform: rotate(-45deg) translate(0.5px, -0.5px);
}
/* paso actual: punto jade con halo */
.pedido-tl__paso--actual .pedido-tl__punto {
  background: var(--nalt-jade);
  border-color: var(--nalt-jade);
  box-shadow: 0 0 0 3px var(--nalt-jade-claro);
}
.pedido-tl__paso--actual .pedido-tl__punto::after {
  content: '';
  display: block;
  width: 5px;
  height: 3px;
  border-left: 1.5px solid var(--nalt-negro);
  border-bottom: 1.5px solid var(--nalt-negro);
  transform: rotate(-45deg) translate(0.5px, -0.5px);
}
.pedido-tl__paso--actual { color: var(--nalt-jade-oscuro); font-weight: 700; }
.pedido-tl__paso--hecho { color: var(--color-texto-tenue); }
.pedido-tl__paso--pendiente .pedido-tl__punto {
  background: var(--color-fondo);
  border-color: var(--color-borde);
}
/* botón para expandir/colapsar el seguimiento */
.pedido-tl-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: var(--nalt-texto-xs);
  color: var(--nalt-jade-oscuro);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-tema="oscuro"] .pedido-tl__paso--actual { color: var(--nalt-jade-sobre-oscuro); }
[data-tema="oscuro"] .pedido-tl__paso--actual .pedido-tl__punto,
[data-tema="oscuro"] .pedido-tl__paso--hecho .pedido-tl__punto {
  background: var(--nalt-jade-sobre-oscuro);
  border-color: var(--nalt-jade-sobre-oscuro);
}
[data-tema="oscuro"] .pedido-tl-toggle { color: var(--nalt-jade-sobre-oscuro); }

/* --- Sección de tienda en el directorio: encabezado + cuadrícula de hasta
   4 productos propios (Bloque I punto 3). El grid de productos es el mismo
   2-col de la tarjeta del catálogo. --- */
.tienda-seccion {
  background: var(--color-fondo-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--nalt-radio-md);
  padding: 12px;
}
.tienda-seccion__cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.tienda-seccion__logo-wrap { display: flex; gap: 10px; align-items: center; }
.tienda-seccion__logo {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-fondo);
  border: 1.5px solid var(--color-borde);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.tienda-seccion__nombre { font-weight: 700; font-size: var(--nalt-texto-sm); margin: 0; }
.tienda-seccion__conteo { font-size: var(--nalt-texto-xs); color: var(--color-texto-tenue); margin: 0; }
.tienda-seccion__prods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* --- Esqueletos de carga (Bloque O): pulso mientras llegan los datos,
   sin pantallas vacías ni ruedas. Reduced-motion: se detiene la animación
   y se baja la opacidad en lugar de pulsar. --- */
@keyframes nalt-pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.esqueleto {
  background: var(--color-borde);
  border-radius: 6px;
  animation: nalt-pulso 1.5s ease-in-out infinite;
}
/* Tarjeta de producto en modo esqueleto: foto, líneas de nombre y precio. */
.popular-card--esqueleto { pointer-events: none; cursor: default; }
.popular-card--esqueleto .foto-prod {
  background: var(--color-borde);
  animation: nalt-pulso 1.5s ease-in-out infinite;
}
.popular-card--esqueleto .esqueleto-linea {
  background: var(--color-borde);
  border-radius: 4px;
  animation: nalt-pulso 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .esqueleto,
  .popular-card--esqueleto .foto-prod,
  .popular-card--esqueleto .esqueleto-linea {
    animation: none;
    opacity: 0.55;
  }
}

/* Block M: sidebar de categorías en tablet/escritorio */
#catalogo-sidebar { display: none; }
#catalogo-layout-escritorio { display: contents; }

@media (min-width: 1024px) {
  #catalogo-layout-escritorio {
    display: flex;
    align-items: flex-start;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--nalt-espacio-6);
    box-sizing: border-box;
    gap: 24px;
  }
  #catalogo-sidebar {
    display: flex;
    flex-direction: column;
    width: 260px;
    flex-shrink: 0;
    padding-top: var(--nalt-espacio-4);
    gap: 4px;
  }
  #catalogo-layout-escritorio > .contenido {
    flex: 1;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* =========================================================================
   Correcciones modo oscuro / modo claro
   Todos los colores fijos que no respondían al interruptor de tema.
   ========================================================================= */

/* L1d — insignia jade: en modo oscuro usa el teal brillante (igual que
   Login/Registro), ya que el jade oscuro (var(--nalt-jade-oscuro)) no tiene contraste
   sobre el fondo oscuro. El default ahora usa jade oscuro en modo claro
   (ver la regla .insignia--jade arriba, que cambió de --nalt-jade-claro). */
[data-tema="oscuro"] .insignia--jade { color: var(--nalt-jade-sobre-oscuro); }

/* O1 — insignia peligro: el rosa base (var(--nalt-rosa)) es demasiado oscuro sobre
   fondo oscuro; igual que el override que ya tienen Login/Registro. */
[data-tema="oscuro"] .insignia--peligro { color: var(--nalt-rosa-sobre-oscuro); }

/* O2 — botón "Limpiar" variante: jade oscuro invisible sobre fondo oscuro. */
[data-tema="oscuro"] .btn-limpiar-variante { color: var(--nalt-jade-sobre-oscuro); }

/* O3 — enlace "Ver en tienda" en detalle de producto: mismo problema. */
[data-tema="oscuro"] .producto-tienda-link { color: var(--nalt-jade-sobre-oscuro); }

/* O4 — chip de color seleccionado: el anillo negro (var(--nalt-negro)) desaparece
   sobre el fondo oscuro; lo cambiamos a naranja (mismo color de acción
   que usa chip-variante seleccionado en dark). */
[data-tema="oscuro"] .chip-color[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--nalt-naranja);
}

/* O5 — botón "¿Cómo pago?" (Inicio): inline style color:var(--nalt-jade-oscuro);
   necesita !important para sobreescribir el estilo en línea. */
[data-tema="oscuro"] #btn-como-pago-toggle {
  color: var(--nalt-jade-sobre-oscuro) !important;
}
[data-tema="oscuro"] #btn-como-pago-toggle .ico {
  --acento: var(--nalt-jade-sobre-oscuro);
  color: var(--nalt-jade-sobre-oscuro) !important;
}

/* O6 — chip "Ver todas las categorías" (Inicio): fondo crema fijo
   (#FFF3DC) muy visible sobre página oscura. */
[data-tema="oscuro"] #btn-ir-categorias {
  background: rgba(245, 196, 81, .12) !important;
  color: var(--nalt-dorado) !important;
  border-color: var(--nalt-dorado) !important;
}

/* O7 — panel de barra de límite de saldo (Perfil/Saldo): el contenedor
   principal y la pista de la barra tienen fondos crema fijos. La clase
   .saldo-barra-progreso se añadió al div interno en index.html. */
[data-tema="oscuro"] #saldo-limite-barra {
  background: var(--color-fondo-tarjeta) !important;
}
[data-tema="oscuro"] .saldo-barra-progreso {
  background: var(--color-borde) !important;
}

/* O8 — mensaje "saldo al límite": rojo oscuro (#c0392b) sobre oscuro. */
[data-tema="oscuro"] #saldo-limite-msg-lleno {
  color: var(--nalt-rosa-sobre-oscuro) !important;
}

/* O9 — panel de selección de tarjeta Nalt Tomi: fondo crema fijo. */
[data-tema="oscuro"] #tomi-seleccion-panel {
  background: rgba(245, 196, 81, .08) !important;
  border-color: var(--nalt-dorado) !important;
}

/* O10 — botón "Comprar" tarjeta Nalt Tomi: fondo var(--nalt-negro) casi idéntico
   al fondo de tarjeta oscuro (#1F1A14) → botón invisible. Pasa a naranja
   (CTA principal de la app). */
[data-tema="oscuro"] #btn-tomi-comprar-confirmar {
  background: var(--nalt-naranja) !important;
  color: var(--nalt-negro) !important;
}

/* --- Autorizar un pago hecho en el sitio web (hoja inferior sobre cualquier pantalla) --- */
.autoriza-sitio {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(23, 19, 15, .6);
}
.autoriza-sitio__hoja {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: var(--nalt-espacio-3);
  padding: var(--nalt-espacio-5) var(--nalt-espacio-4) calc(var(--nalt-espacio-5) + env(safe-area-inset-bottom));
  background: var(--color-fondo-tarjeta);
  color: var(--color-texto);
  border-radius: var(--nalt-radio-xxl) var(--nalt-radio-xxl) 0 0;
  animation: autoriza-sube .25s var(--nalt-ease-out);
}
.autoriza-sitio__hoja h2 { margin: 0; font-family: var(--nalt-fuente-titulo); font-size: var(--nalt-texto-lg);  font-weight: 400; }
.autoriza-sitio__monto { margin: 0; font-family: var(--nalt-fuente-titulo); font-size: var(--nalt-texto-xl); font-weight: 400; }
.autoriza-sitio__ayuda { margin: 0; font-size: var(--nalt-texto-sm); }
.autoriza-sitio__codigo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nalt-espacio-2);
  padding: var(--nalt-espacio-4);
  background: var(--nalt-negro);
  border-radius: var(--nalt-radio-lg);
  color: var(--nalt-sobre-oscuro);
}
.autoriza-sitio__codigo output {
  font-family: var(--nalt-fuente-titulo);
  font-size: var(--nalt-texto-xxl);
  font-weight: 400;
  letter-spacing: .3em;
  color: var(--nalt-naranja);
}
.autoriza-sitio__codigo span { font-size: var(--nalt-texto-xs); color: var(--nalt-sobre-oscuro); }
@keyframes autoriza-sube { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .autoriza-sitio__hoja { animation: none; } }


/* --- Un carrito, un solo tipo: tarjeta-botón de opción (ícono + título + descripción), igual de clara que los botones del login --- */
.tarjeta-opcion {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 14px 16px;
  text-align: left; font: inherit; color: var(--nalt-sobre-oscuro); background: transparent; cursor: pointer;
  border: 2px solid var(--nalt-dorado); border-radius: var(--nalt-radio-lg);
  transition: background-color .15s var(--nalt-ease-out), transform .12s var(--nalt-ease-out);
}
.tarjeta-opcion .ico { flex: none; width: 28px; height: 28px; --acento: currentColor; }
.tarjeta-opcion__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tarjeta-opcion__texto strong { font-size: var(--nalt-texto-base); line-height: 1.25; }
.tarjeta-opcion__texto span { font-size: var(--nalt-texto-xs); line-height: 1.35; color: var(--nalt-suave-sobre-oscuro); }
.tarjeta-opcion--principal { border-color: var(--nalt-naranja); }
.tarjeta-opcion--principal .ico { color: var(--nalt-naranja); }
.tarjeta-opcion--peligro { border-color: #E0705F; }
.tarjeta-opcion--peligro .ico { color: #E0705F; }
.tarjeta-opcion:hover { background: rgba(255, 255, 255, .06); }
.tarjeta-opcion:active { transform: scale(.985); }
.tarjeta-opcion:focus-visible { outline: 3px solid var(--nalt-naranja); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .tarjeta-opcion { transition: none; } .tarjeta-opcion:active { transform: none; } }

/* --- Carrito: zona de entrega, avance hacia el pedido mínimo / envío gratis y desglose --- */
.zona-resumen {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px;
  background: var(--nalt-jade-claro); color: var(--nalt-jade-oscuro); border-radius: var(--nalt-radio-lg);
}
.zona-resumen .ico { flex: none; }
.zona-resumen div { display: flex; flex-direction: column; min-width: 0; }
.zona-resumen strong { font-size: var(--nalt-texto-sm); }
.zona-resumen span { font-size: var(--nalt-texto-xs); }
.reglas-carrito { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.reglas-carrito > div { padding: 10px 12px; border: 1px solid var(--color-borde); border-radius: var(--nalt-radio-lg); background: var(--color-superficie, transparent); }
.reglas-carrito p { margin: 0 0 6px; font-size: var(--nalt-texto-xs); font-weight: 600; line-height: 1.35; }
.barra-progreso { height: 8px; border-radius: var(--nalt-radio-pill); background: rgba(128, 128, 128, .25); overflow: hidden; }
.barra-progreso span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--nalt-naranja); transition: width .25s var(--nalt-ease-out); }
.regla--cumplida .barra-progreso span { background: var(--nalt-jade); }
@media (prefers-reduced-motion: reduce) { .barra-progreso span { transition: none; } }
.desglose { margin-bottom: 4px; }
.desglose__fila { font-size: var(--nalt-texto-sm); margin-bottom: 4px; }
.desglose__nota { margin: 0 0 6px; font-size: var(--nalt-texto-xs); color: var(--color-texto-tenue); line-height: 1.35; }

/* --- Botón redondo de ícono (ej. interruptor de tema en Perfil), >= 44px --- */
.boton-icono {
  width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-borde); border-radius: var(--nalt-radio-pill);
  background: var(--color-fondo-tarjeta); color: var(--color-texto); cursor: pointer;
}
.boton-icono:focus-visible { outline: 2px solid var(--nalt-naranja); outline-offset: 2px; }

/* --- Tarjeta-enlace: botón diseñado con ícono, título y descripción --- */
.tarjeta-enlace {
  display: flex; align-items: center; gap: var(--nalt-espacio-3); width: 100%; min-height: 56px;
  padding: var(--nalt-espacio-3) var(--nalt-espacio-4); text-align: left; font: inherit; cursor: pointer;
  background: var(--color-fondo-tarjeta); color: var(--color-texto);
  border: 1.5px solid var(--color-borde); border-radius: var(--nalt-radio-lg); box-shadow: var(--nalt-sombra-tarjeta);
}
.tarjeta-enlace .ico { flex: none; width: 28px; height: 28px; --acento: var(--nalt-naranja); }
.tarjeta-enlace__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tarjeta-enlace__texto span { font-size: var(--nalt-texto-xs); color: var(--color-texto-tenue); }
.tarjeta-enlace:focus-visible { outline: 2px solid var(--nalt-naranja); outline-offset: 2px; }

/* --- Pantalla Mensajes: pestañas y lista de avisos --- */
.pestanas { display: flex; gap: 0; border-bottom: 1px solid var(--color-borde); overflow-x: auto; margin-bottom: var(--nalt-espacio-4); }
.pestana {
  flex: 1 0 auto; min-height: 48px; padding: 0 var(--nalt-espacio-3); display: flex; align-items: center; justify-content: center; gap: 6px;
  background: none; border: none; border-bottom: 3px solid transparent; font: inherit; font-weight: 600; white-space: nowrap;
  color: var(--color-texto-tenue); cursor: pointer;
}
.pestana[aria-selected="true"] { color: var(--color-texto); border-bottom-color: var(--nalt-naranja); }
.pestana:focus-visible { outline: 2px solid var(--nalt-naranja); outline-offset: -2px; }
.pestana__num {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--nalt-radio-pill); line-height: 20px; text-align: center;
  background: var(--nalt-naranja); color: var(--nalt-negro); font-size: var(--nalt-texto-2xs); font-weight: 800;
}
.avisos-lista { display: flex; flex-direction: column; gap: var(--nalt-espacio-3); }
.aviso-item {
  display: flex; align-items: stretch; gap: var(--nalt-espacio-2);
  background: var(--color-fondo-tarjeta); border: 1.5px solid var(--color-borde); border-radius: var(--nalt-radio-lg);
}
.aviso-item--nuevo { border-color: var(--nalt-naranja); }
.aviso-item__cuerpo {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: var(--nalt-espacio-3) var(--nalt-espacio-4);
  text-align: left; font: inherit; color: var(--color-texto); background: none; border: none; cursor: pointer;
}
.aviso-item__cuerpo span { font-size: var(--nalt-texto-sm); color: var(--color-texto-tenue); }
.aviso-item__cuerpo small { font-size: var(--nalt-texto-2xs); color: var(--color-texto-tenue); }
.aviso-item__borrar {
  flex: none; min-width: 64px; min-height: 44px; margin: var(--nalt-espacio-2); padding: 0 var(--nalt-espacio-3); align-self: center;
  font: inherit; font-size: var(--nalt-texto-xs); font-weight: 600; cursor: pointer;
  background: none; color: var(--color-texto-tenue); border: 1.5px solid var(--color-borde); border-radius: var(--nalt-radio-pill);
}
.aviso-item__cuerpo:focus-visible, .aviso-item__borrar:focus-visible { outline: 2px solid var(--nalt-naranja); outline-offset: 2px; }
@media (min-width: 1024px) {
  #pantalla-mensajes > .contenido { max-width: 760px; margin: 0 auto; width: 100%; box-sizing: border-box; }
}

/* --- Pantalla Movimientos: entradas y salidas del saldo --- */
.movimientos-lista { display: flex; flex-direction: column; gap: var(--nalt-espacio-2); }
.mov-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nalt-espacio-3);
  min-height: 56px; padding: var(--nalt-espacio-3) var(--nalt-espacio-4);
  background: var(--color-fondo-tarjeta); border: 1.5px solid var(--color-borde); border-radius: var(--nalt-radio-lg);
}
.mov-item__texto, .mov-item__monto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mov-item__texto small, .mov-item__monto small { font-size: var(--nalt-texto-2xs); color: var(--color-texto-tenue); }
.mov-item__monto { align-items: flex-end; flex: none; font-variant-numeric: tabular-nums; }
.mov-item__monto--entra strong { color: var(--nalt-jade-texto); }
.mov-item__monto--sale strong { color: var(--color-peligro); }
@media (min-width: 1024px) {
  #pantalla-movimientos > .contenido { max-width: 760px; margin: 0 auto; width: 100%; box-sizing: border-box; }
}