/* ============================================================
   tienda.css — Martin's Produce
   ------------------------------------------------------------
   Blanco, rojo y verde: los colores del logo. La regla que
   gobierna todo el archivo es sencilla —

     el ROJO es para actuar (botones, precios, lo urgente)
     el VERDE es para confirmar (frescura, disponible, aprobado)
     el resto es blanco y negro, para que la foto del producto
     sea lo único que grita

   Si todo fuera rojo, nada resaltaría. Por eso el rojo aparece
   poco y siempre en lo que quieres que la gente apriete.

   Los tonos no son los del logo tal cual: el rojo #EE2A16 con
   texto blanco encima da 4.2 de contraste, por debajo del mínimo
   legible. El rojo de los botones (#D01D12) da 5.4 y a simple
   vista es el mismo color. Igual con el verde.
   ============================================================ */

:root {
  /* --- Marca --- */
  --rojo: #ee2a16;          /* el del logo — sólo decorativo */
  --rojo-accion: #d01d12;   /* botones y texto: 5.4:1 en blanco */
  --rojo-hondo: #a81410;    /* hover */
  --rojo-tenue: #fdeceb;    /* fondos suaves */
  --rojo-rgb: 208, 29, 18;

  --verde: #3eaf12;         /* el del logo */
  --verde-accion: #27780c;  /* texto y botones: 5.6:1 */
  --verde-hondo: #1f650a;
  --verde-tenue: #edf7e8;
  --verde-rgb: 39, 120, 12;

  /* --- Neutros --- */
  --tinta: #16181a;
  --tinta-2: #454a4e;       /* 8.5:1 */
  --tinta-3: #6b7176;       /* 5.3:1 */
  --linea: #e6e8ea;
  --linea-fuerte: #d2d6d9;
  --lienzo: #ffffff;
  --lienzo-2: #f7f8f8;
  --lienzo-3: #eef0f1;

  --ambar: #b45309;
  --ambar-tenue: #fef4e6;

  /* --- Forma --- */
  --r: 14px;
  --r-sm: 9px;
  --r-pill: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 14px;
  --sp-4: 22px;
  --sp-5: 34px;
  --sp-6: 56px;

  --titulo: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --texto: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --sombra-sm: 0 1px 2px rgba(22, 24, 26, .05);
  --sombra: 0 1px 3px rgba(22, 24, 26, .06), 0 8px 24px rgba(22, 24, 26, .06);
  --sombra-lg: 0 4px 12px rgba(22, 24, 26, .08), 0 20px 48px rgba(22, 24, 26, .12);

  --ancho: 1240px;

  color-scheme: light;
}

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

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--lienzo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.con-modal { overflow: hidden; }

h1, h2, h3 {
  font-family: var(--titulo);
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.015em;
}

img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--verde-accion);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   Botones
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--texto); font-size: .875rem; font-weight: 600;
  line-height: 1.2; white-space: nowrap;
  padding: 11px 20px; border-radius: var(--r-sm);
  border: 1.5px solid var(--linea-fuerte);
  background: var(--lienzo); color: var(--tinta);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .1s ease;
}
.btn:hover:not(:disabled) { border-color: var(--tinta-3); background: var(--lienzo-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* Rojo = la acción principal. Nunca hay dos en la misma vista. */
.btn-primario {
  background: var(--rojo-accion); border-color: var(--rojo-accion); color: #fff;
  box-shadow: 0 1px 2px rgba(var(--rojo-rgb), .25);
}
.btn-primario:hover:not(:disabled) { background: var(--rojo-hondo); border-color: var(--rojo-hondo); }

/* Verde = confirmar, avanzar, algo que ya está bien. */
.btn-verde {
  background: var(--verde-accion); border-color: var(--verde-accion); color: #fff;
}
.btn-verde:hover:not(:disabled) { background: var(--verde-hondo); border-color: var(--verde-hondo); }

.btn-fantasma { background: transparent; }
.btn-texto {
  background: none; border: none; padding: 4px 2px;
  color: var(--verde-accion); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.btn-texto:hover { color: var(--verde-hondo); background: none; }
.btn-ancho { width: 100%; padding: 13px; font-size: .95rem; }
.btn-chico { padding: 7px 14px; font-size: .8rem; }
.btn-icono {
  background: none; border: none; padding: 6px 10px;
  color: var(--tinta-3); font-size: 1.15rem; line-height: 1;
}
.btn-icono:hover { background: var(--lienzo-2); color: var(--tinta); }

/* ============================================================
   Campos
   ============================================================ */
.campo {
  width: 100%; font-family: var(--texto); font-size: .95rem;
  padding: 11px 13px; border-radius: var(--r-sm);
  border: 1.5px solid var(--linea-fuerte);
  background: var(--lienzo); color: var(--tinta);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.campo::placeholder { color: #9aa1a6; }
.campo:focus {
  outline: none; border-color: var(--verde-accion);
  box-shadow: 0 0 0 3px rgba(var(--verde-rgb), .13);
}
textarea.campo { resize: vertical; min-height: 76px; line-height: 1.5; }

.campo-caja { display: flex; flex-direction: column; gap: 6px; }
.campo-etiqueta { font-size: .8rem; font-weight: 600; color: var(--tinta-2); }
.campo-pista { font-size: .78rem; color: var(--tinta-3); line-height: 1.45; }

.forma { display: flex; flex-direction: column; gap: var(--sp-3); }
.forma-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* ============================================================
   Logo
   ============================================================ */
.logo { display: block; height: auto; }
.logo-barra { width: 148px; }
.logo-portada { width: 210px; margin: 0 auto var(--sp-2); }

/* ============================================================
   Portada — entrar y registrarse
   ============================================================ */
.portada {
  min-height: 100dvh;
  display: grid; grid-template-columns: 1.05fr .95fr;
}

/* El panel de la izquierda es la única superficie de color grande
   del sitio. Va en verde porque es el lado "de campo" — la promesa
   de frescura — y deja el rojo libre para los botones. */
.panel-marca {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-6);
  background:
    radial-gradient(900px 480px at 15% 0%, rgba(62, 175, 18, .22), transparent 62%),
    radial-gradient(700px 420px at 95% 100%, rgba(238, 42, 22, .16), transparent 60%),
    linear-gradient(150deg, #123f07 0%, #1c5c0b 46%, #14460a 100%);
  color: #fff;
}
.panel-marca::after {
  /* Una hoja gigante, apenas visible, para que el bloque no sea un
     rectángulo de color plano. */
  content: '';
  position: absolute; right: -14%; top: 50%; transform: translateY(-50%) rotate(-18deg);
  width: 58%; aspect-ratio: 1 / 1.35;
  border-radius: 100% 0 100% 0;
  background: rgba(255, 255, 255, .05);
  pointer-events: none;
}
.panel-contenido { position: relative; z-index: 1; max-width: 460px; }
.panel-marca .logo-portada {
  width: 250px; margin: 0 0 var(--sp-5);
  padding: 16px 20px; border-radius: var(--r);
  background: #fff; box-shadow: var(--sombra);
}
.panel-titular {
  font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 700;
  letter-spacing: -.03em; margin-bottom: var(--sp-3);
}
.panel-titular em { font-style: normal; color: #8ee563; }
.panel-texto { font-size: 1.02rem; line-height: 1.6; color: rgba(255, 255, 255, .86); margin: 0 0 var(--sp-5); }
.panel-puntos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.panel-puntos li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: .94rem; color: rgba(255, 255, 255, .9);
}
.panel-puntos svg { flex-shrink: 0; margin-top: 2px; }

.panel-forma {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5) var(--sp-4);
  background: var(--lienzo);
}
.forma-caja { width: 100%; max-width: 400px; }
.forma-caja .logo-portada { display: none; }  /* sólo en móvil */
.portada-titulo { font-size: 1.7rem; margin-bottom: 6px; }
.portada-sub { margin: 0 0 var(--sp-4); font-size: .92rem; color: var(--tinta-3); }
.portada-pie {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--linea);
  font-size: .88rem; color: var(--tinta-3);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}

/* ============================================================
   Barra superior de la tienda
   ============================================================ */
.barra {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.6) blur(8px);
  border-bottom: 1px solid var(--linea);
}
.barra-dentro {
  max-width: var(--ancho); margin: 0 auto;
  padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.barra-cuenta { display: flex; align-items: center; gap: var(--sp-3); }
.barra-quien { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.barra-empresa { font-size: .86rem; font-weight: 600; }
.barra-estado { font-size: .72rem; color: var(--verde-accion); font-weight: 600; }
.barra-estado.es-espera { color: var(--ambar); }

/* La cinta verde: la promesa de la marca, siempre visible. */
.cinta {
  background: var(--verde-accion); color: #fff;
  font-size: .8rem; font-weight: 500; letter-spacing: .01em;
}
.cinta-dentro {
  max-width: var(--ancho); margin: 0 auto;
  padding: 7px var(--sp-4);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  flex-wrap: wrap; text-align: center;
}
.cinta strong { font-weight: 700; }

.banda-aviso {
  background: var(--ambar-tenue);
  border-bottom: 1px solid #f4dcb8;
  color: #7c3d06;
}
.banda-dentro {
  max-width: var(--ancho); margin: 0 auto;
  padding: var(--sp-3) var(--sp-4);
  font-size: .88rem; display: flex; align-items: flex-start; gap: 9px;
}
.banda-aviso strong { color: #6b3305; }

/* ============================================================
   Encabezado del catálogo
   ============================================================ */
.encabezado {
  max-width: var(--ancho); margin: 0 auto; width: 100%;
  padding: var(--sp-5) var(--sp-4) var(--sp-3);
}
.encabezado h1 { font-size: 1.75rem; margin-bottom: 5px; }
.encabezado p { margin: 0; color: var(--tinta-3); font-size: .93rem; }

.filtros {
  max-width: var(--ancho); margin: 0 auto; width: 100%;
  padding: 0 var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.buscador-caja { position: relative; max-width: 440px; }
.buscador-caja svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--tinta-3); pointer-events: none;
}
.buscador { padding-left: 40px; }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  font-family: var(--texto); font-size: .83rem; font-weight: 600;
  padding: 7px 15px; border-radius: var(--r-pill);
  border: 1.5px solid var(--linea-fuerte);
  background: var(--lienzo); color: var(--tinta-2);
  cursor: pointer; transition: all .16s ease;
}
.chip:hover { border-color: var(--verde-accion); color: var(--verde-accion); }
.chip.activo {
  background: var(--verde-accion); border-color: var(--verde-accion); color: #fff;
}

.catalogo { max-width: var(--ancho); margin: 0 auto; width: 100%; padding: var(--sp-4); }
.conteo {
  margin: 0 0 var(--sp-3); font-size: .84rem; color: var(--tinta-3);
}

.rejilla {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}

/* ============================================================
   Tarjeta de producto
   ============================================================ */
.producto {
  display: flex; flex-direction: column;
  background: var(--lienzo);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.producto:hover {
  box-shadow: var(--sombra); transform: translateY(-3px);
  border-color: var(--linea-fuerte);
}

.producto-foto {
  position: relative; display: block; width: 100%;
  aspect-ratio: 4 / 3; padding: 0; border: none;
  background: var(--lienzo-3); cursor: zoom-in; overflow: hidden;
}
.producto-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.producto:hover .producto-foto img { transform: scale(1.045); }
.producto-foto-vacia {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: #a8afb4; font-size: .8rem; cursor: default;
  background: repeating-linear-gradient(45deg, var(--lienzo-2), var(--lienzo-2) 12px, var(--lienzo-3) 12px, var(--lienzo-3) 24px);
}
.producto-foto-conteo {
  position: absolute; right: 9px; bottom: 9px;
  background: rgba(22, 24, 26, .74); color: #fff;
  font-size: .7rem; font-weight: 600;
  padding: 4px 9px; border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
}
/* Sello de origen, arriba a la izquierda de la foto */
.producto-origen {
  position: absolute; left: 9px; top: 9px;
  background: rgba(255, 255, 255, .95); color: var(--tinta);
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  padding: 4px 10px; border-radius: var(--r-pill);
  box-shadow: var(--sombra-sm);
}

.producto-cuerpo {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-3);
  flex: 1;
}

/* Producto y variedad: lo primero que se busca en un catálogo de
   fresco. Grande, y la variedad en verde para separarla de un
   vistazo sin necesidad de leer. */
.producto-nombre {
  font-family: var(--titulo); font-size: 1.22rem; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.15;
}
.producto-variedad { color: var(--verde-accion); font-weight: 600; }

.etiquetas { display: flex; flex-wrap: wrap; gap: 5px; }
.etiqueta {
  font-size: .72rem; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--lienzo-2); color: var(--tinta-2);
  border: 1px solid var(--linea);
}
.etiqueta.es-calibre {
  background: var(--verde-tenue); color: var(--verde-hondo);
  border-color: #cfe8c2;
}

.ficha {
  display: grid; grid-template-columns: auto 1fr;
  gap: 5px var(--sp-3); margin: 3px 0 0;
  font-size: .85rem;
}
.ficha dt { color: var(--tinta-3); min-width: 0; }
.ficha dd {
  margin: 0; font-weight: 600; text-align: right; color: var(--tinta);
  min-width: 0; overflow-wrap: anywhere;
}

.producto-nota {
  margin: 0; font-size: .84rem; color: var(--tinta-2); line-height: 1.5;
  padding: 9px 11px; border-radius: var(--r-sm);
  background: var(--verde-tenue);
  border-left: 3px solid var(--verde);
}

/* Precio a la izquierda, botón a la derecha — pero si la tarjeta se
   angosta y ya no caben juntos, el botón se pasa solo al renglón de
   abajo y se estira. Sin esto, en una columna estrecha el botón se
   monta encima del precio. */
.producto-pie {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3); margin-top: auto;
  padding-top: var(--sp-3); border-top: 1px solid var(--linea);
}
.precio { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.precio-monto {
  font-family: var(--titulo); font-size: 1.42rem; font-weight: 700;
  color: var(--rojo-accion); letter-spacing: -.03em; line-height: 1.1;
}
.precio-unidad { font-size: .73rem; color: var(--tinta-3); margin-top: 1px; }
.producto-pie .btn { flex: 1 1 auto; min-width: 152px; }
.precio-oculto .precio-monto {
  font-family: var(--texto); font-size: .9rem; font-weight: 600; color: var(--tinta-3);
}

/* ============================================================
   Pie de página
   ============================================================ */
.pie {
  margin-top: var(--sp-6);
  background: var(--lienzo-2);
  border-top: 1px solid var(--linea);
}
.pie-dentro {
  max-width: var(--ancho); margin: 0 auto;
  padding: var(--sp-5) var(--sp-4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.pie .logo { width: 124px; opacity: .8; }
.pie-texto { font-size: .8rem; color: var(--tinta-3); text-align: right; }
.pie-version {
  margin-top: 6px; font-size: .72rem; color: #9aa1a6;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Estados
   ============================================================ */
.vacio {
  padding: var(--sp-6) var(--sp-4); text-align: center;
  color: var(--tinta-3); font-size: .93rem;
  border: 1.5px dashed var(--linea-fuerte); border-radius: var(--r);
  background: var(--lienzo-2);
}
.cargando {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: var(--sp-6);
  color: var(--tinta-3); font-size: .92rem;
}
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--linea-fuerte); border-top-color: var(--verde-accion);
  animation: gira .65s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* ============================================================
   Aviso flotante
   ============================================================ */
.aviso {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 18px);
  z-index: 9000; max-width: min(440px, calc(100vw - 32px));
  padding: 12px 20px; border-radius: var(--r-sm);
  background: var(--tinta); color: #fff;
  font-size: .88rem; font-weight: 500;
  box-shadow: var(--sombra-lg);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.aviso.es-ok { background: var(--verde-accion); }
.aviso.es-error { background: var(--rojo-accion); }

/* ============================================================
   Modal
   ============================================================ */
.modal-capa {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  background: rgba(22, 24, 26, .5);
  backdrop-filter: blur(3px);
  animation: aparece .16s ease-out;
}
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 470px; max-height: 90dvh;
  display: flex; flex-direction: column;
  background: var(--lienzo); border-radius: var(--r);
  box-shadow: var(--sombra-lg); overflow: hidden;
}
.modal-cabeza {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-2); padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--linea);
}
.modal-cabeza h2 { font-size: 1.2rem; }
.modal-cuerpo {
  padding: var(--sp-4); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.modal-sub { margin: 0; font-size: .84rem; color: var(--tinta-3); }
.modal-pie {
  display: flex; gap: var(--sp-2); justify-content: flex-end;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--linea); background: var(--lienzo-2);
}
.resumen {
  margin: 0; padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--rojo-tenue); border-left: 3px solid var(--rojo-accion);
  font-size: .93rem; font-weight: 600; color: var(--rojo-hondo);
}

/* ============================================================
   Visor de fotos
   ============================================================ */
.visor {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; flex-direction: column;
  background: rgba(10, 11, 12, .95);
  animation: aparece .16s ease-out;
}
.visor-barra {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4); color: #fff;
}
.visor-barra .btn-icono { color: #fff; }
.visor-barra .btn-icono:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.visor-conteo { font-size: .85rem; opacity: .75; font-variant-numeric: tabular-nums; }
.visor-cuerpo {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: 0 var(--sp-3) var(--sp-4); min-height: 0;
}
.visor-cuerpo img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: var(--r-sm); box-shadow: var(--sombra-lg);
}
.visor-flecha {
  flex-shrink: 0; background: rgba(255, 255, 255, .14); border: none;
  color: #fff; font-size: 1.7rem; line-height: 1;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  transition: background .16s ease;
}
.visor-flecha:hover { background: rgba(255, 255, 255, .28); }

/* ============================================================
   Pantallas chicas
   ============================================================ */
@media (max-width: 900px) {
  .portada { grid-template-columns: 1fr; }
  /* En un teléfono el panel de marca se convierte en una franja
     corta arriba: la promesa sigue ahí, pero el formulario es lo
     que tiene que verse sin hacer scroll. */
  .panel-marca { padding: var(--sp-4); min-height: auto; }
  .panel-marca::after { display: none; }
  .panel-marca .logo-portada { width: 168px; margin-bottom: var(--sp-3); padding: 11px 14px; }
  .panel-titular { font-size: 1.55rem; margin-bottom: 6px; }
  .panel-texto { font-size: .93rem; margin-bottom: 0; }
  .panel-puntos { display: none; }
  .panel-forma { padding: var(--sp-4) var(--sp-3) var(--sp-5); }
}

@media (max-width: 640px) {
  .barra-dentro { padding: var(--sp-3); }
  .logo-barra { width: 116px; }
  .barra-quien { display: none; }
  .cinta-dentro { padding: 6px var(--sp-3); font-size: .74rem; gap: var(--sp-2); }
  .banda-dentro, .encabezado, .filtros, .catalogo, .pie-dentro { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .encabezado { padding-top: var(--sp-4); }
  .encabezado h1 { font-size: 1.4rem; }
  .rejilla { grid-template-columns: 1fr; gap: var(--sp-3); }
  .forma-2 { grid-template-columns: 1fr; }

  /* El modal a pantalla completa se usa mucho mejor en un celular
     que una tarjeta flotando con márgenes por todos lados. */
  .modal-capa { padding: 0; align-items: stretch; }
  .modal { max-width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .modal-pie .btn { flex: 1; }

  .producto-pie { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .producto-pie .btn { width: 100%; }
  .pie-dentro { flex-direction: column; text-align: center; }
  .pie-texto { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   Navegación de la tienda
   ============================================================ */
.barra-logo {
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center;
}
.nav { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; }
.nav-boton {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--texto); font-size: .875rem; font-weight: 600;
  padding: 9px 14px; border-radius: var(--r-sm);
  border: none; background: none; color: var(--tinta-2);
  cursor: pointer; white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.nav-boton:hover { background: var(--lienzo-2); color: var(--tinta); }
.nav-boton.activo { background: var(--verde-tenue); color: var(--verde-hondo); }
.nav-boton .ico { flex-shrink: 0; }
/* Punto rojo cuando hay algo pendiente. Es la única cosa roja de
   la barra, justo para que se note. */
.nav-punto {
  position: absolute; top: 6px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rojo-accion);
  box-shadow: 0 0 0 2px var(--lienzo);
}

.barra-estado.es-ok { color: var(--verde-accion); }
.barra-estado.es-espera { color: var(--ambar); }
.barra-estado.es-error { color: var(--rojo-accion); }

/* ============================================================
   Banda de estado de la cuenta
   ============================================================ */
.banda-aviso.es-espera { background: var(--ambar-tenue); border-bottom-color: #f4dcb8; color: #7c3d06; }
.banda-aviso.es-error { background: var(--rojo-tenue); border-bottom-color: #f6ccc9; color: var(--rojo-hondo); }
.banda-dentro { align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.banda-dentro .ico { flex-shrink: 0; }
.banda-dentro > span { flex: 1 1 260px; }
.banda-dentro .btn { background: var(--lienzo); }

/* ============================================================
   Contenido de las secciones
   ============================================================ */
.contenido { min-height: 46vh; }
.panel-lista {
  max-width: var(--ancho); margin: 0 auto; width: 100%;
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.tarjeta-panel {
  background: var(--lienzo); border: 1px solid var(--linea);
  border-radius: var(--r); padding: var(--sp-4);
  box-shadow: var(--sombra-sm);
}
.panel-titulo {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.05rem; margin-bottom: var(--sp-3);
}
.panel-titulo .ico { color: var(--verde-accion); }
.botonera { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.derecha { display: flex; justify-content: flex-end; }
.centrado { text-align: center; }

/* ============================================================
   Formularios largos: registro y perfil
   ============================================================ */
.forma-larga { gap: var(--sp-4); }
.grupo-campos {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--linea);
}
.grupo-campos:first-child { border-top: none; padding-top: 0; }
.grupo-titulo {
  display: flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--verde-accion);
}
.grupo-titulo .ico { width: 15px; height: 15px; }

.campo-pista.es-ok { color: var(--verde-accion); font-weight: 600; }
.campo-pista.es-error { color: var(--rojo-accion); font-weight: 600; }

select.campo {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7176' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 38px; cursor: pointer;
}

/* ============================================================
   Contraseña: el ojito y el medidor
   ============================================================ */
.clave-grupo { display: flex; flex-direction: column; gap: 7px; }
.clave-caja { position: relative; }
.campo-clave { padding-right: 46px; }
.ojito {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: none; border: none; border-radius: var(--r-sm);
  color: var(--tinta-3); cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.ojito:hover { color: var(--tinta); background: var(--lienzo-2); }

.medidor { display: flex; flex-direction: column; gap: 5px; }
.medidor-barra {
  height: 4px; border-radius: 999px; background: var(--lienzo-3);
  overflow: hidden;
}
.medidor-barra span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--linea-fuerte);
  transition: width .2s ease, background .2s ease;
}
/* Del rojo al verde conforme mejora. El color aquí sí es literal:
   es la única lectura que necesita quien está escribiendo. */
.medidor[data-nivel="1"] .medidor-barra span { width: 25%; background: var(--rojo-accion); }
.medidor[data-nivel="2"] .medidor-barra span { width: 50%; background: #c98a12; }
.medidor[data-nivel="3"] .medidor-barra span { width: 75%; background: #7ba81a; }
.medidor[data-nivel="4"] .medidor-barra span { width: 100%; background: var(--verde-accion); }
.medidor-texto { font-size: .76rem; color: var(--tinta-3); }
.medidor-texto.es-error { color: var(--rojo-accion); }

/* ============================================================
   Notas y sellos
   ============================================================ */
.nota {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r);
  border: 1px solid var(--linea); border-left-width: 3px;
  background: var(--lienzo-2); font-size: .9rem;
}
.nota .ico { flex-shrink: 0; margin-top: 2px; }
.nota p { margin: 0 0 4px; }
.nota p:last-child { margin-bottom: 0; }
.nota-ok { background: var(--verde-tenue); border-color: #cfe8c2; border-left-color: var(--verde-accion); }
.nota-ok .ico { color: var(--verde-accion); }
.nota-espera { background: var(--ambar-tenue); border-color: #f4dcb8; border-left-color: var(--ambar); }
.nota-espera .ico { color: var(--ambar); }

.sello {
  flex-shrink: 0;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: 4px 11px; border-radius: var(--r-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.sello.es-ok { background: var(--verde-tenue); color: var(--verde-hondo); border-color: #cfe8c2; }
.sello.es-espera { background: var(--ambar-tenue); color: #7c3d06; border-color: #f4dcb8; }
.sello.es-error { background: var(--rojo-tenue); color: var(--rojo-hondo); border-color: #f6ccc9; }
.sello.es-neutro { background: var(--lienzo-2); color: var(--tinta-3); border-color: var(--linea); }

/* ============================================================
   Mis pedidos
   ============================================================ */
.resumen-cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
}
.cifra {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--lienzo); border: 1px solid var(--linea);
  border-radius: var(--r);
}
.cifra-valor {
  font-family: var(--titulo); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.03em; line-height: 1.1;
}
.cifra-etiqueta { font-size: .76rem; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .05em; }

.lista { display: flex; flex-direction: column; gap: var(--sp-3); }
.fila {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  background: var(--lienzo); border: 1px solid var(--linea);
  border-radius: var(--r); padding: var(--sp-4);
  box-shadow: var(--sombra-sm);
}
.fila-cuerpo { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.fila-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.fila-titulo { font-family: var(--titulo); font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; }
.fila-total {
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; justify-content: space-between; gap: var(--sp-3);
  padding-left: var(--sp-4); border-left: 1px solid var(--linea);
  min-width: 190px;
}
.fila-total .precio { align-items: flex-end; }
.ficha-ancha { max-width: 460px; }

/* ============================================================
   Verificación
   ============================================================ */
.doc {
  background: var(--lienzo); border: 1px solid var(--linea);
  border-radius: var(--r); padding: var(--sp-4);
  box-shadow: var(--sombra-sm);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.doc-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.doc-titulo {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-family: var(--titulo); font-size: 1.05rem; margin-bottom: 3px;
}
.doc-obligatorio {
  font-family: var(--texto); font-size: .66rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--rojo-accion); background: var(--rojo-tenue);
  padding: 2px 8px; border-radius: var(--r-pill);
}
.doc-archivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.doc-archivos li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--lienzo-2); border: 1px solid var(--linea);
}
.doc-archivos .ico { flex-shrink: 0; color: var(--tinta-3); }
.doc-archivo-datos { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.doc-archivo-nombre {
  font-size: .88rem; font-weight: 600; color: var(--tinta);
  text-decoration: none; overflow-wrap: anywhere;
}
.doc-archivo-nombre:hover { color: var(--verde-accion); text-decoration: underline; }
.doc-acciones { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ============================================================
   Pantallas chicas
   ============================================================ */
@media (max-width: 1080px) {
  .nav-boton span { display: none; }
  .nav-boton { padding: 10px 12px; }
  .nav-boton .ico { width: 20px; height: 20px; }
}

@media (max-width: 760px) {
  .barra-dentro { flex-wrap: wrap; gap: var(--sp-2); }
  /* La navegación se pasa a un renglón propio y se estira: en un
     teléfono los botones tienen que ser grandes para el dedo. */
  .nav {
    order: 3; width: 100%; justify-content: space-between;
    border-top: 1px solid var(--linea); padding-top: 6px;
  }
  .nav-boton { flex: 1; justify-content: center; padding: 10px 6px; }
  .nav-boton span { display: inline; font-size: .74rem; }
  .nav-boton { flex-direction: column; gap: 3px; }
  .nav-punto { top: 4px; right: calc(50% - 22px); }

  .panel-lista { padding: var(--sp-3); gap: var(--sp-3); }
  .tarjeta-panel { padding: var(--sp-3); }
  .fila { padding: var(--sp-3); }
  .fila-total {
    flex: 1 1 100%; flex-direction: row; align-items: center;
    padding-left: 0; padding-top: var(--sp-3);
    border-left: none; border-top: 1px solid var(--linea);
    min-width: 0;
  }
  .fila-total .precio { align-items: flex-start; }
  .doc-cabeza { flex-direction: column; gap: var(--sp-2); }
  .doc-acciones .btn { flex: 1; }
}