/* =============================================================================
   Diperu — Estilos del catálogo público (mobile-first).
   Marca tomada del logo: azul marino #073967 + teal #01ADAC. Claro y oscuro.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Paleta de marca, tomada del logo (dp azul marino + teal) */
  --azul-900: #041F38;
  --azul-800: #052B4D;
  --azul:     #073967;   /* azul marino del logotipo */
  --azul-600: #0A5183;
  --azul-300: #7BA5C6;
  --azul-100: #CFE0EC;
  --azul-50:  #ECF1F6;
  --teal:     #01ADAC;   /* teal del isotipo */
  --teal-50:  #DFF4F4;
  --gris-marca: #A3BAC6; /* gris azulado de la paleta de marca */
  --verde:    #157F4A;
  --verde-wa: #25D366;
  --ambar:    #96601A;
  --ambar-50: #FBF0DC;
  --rojo:     #B23A2F;
  --rojo-50:  #FBE9E7;

  /* Superficies y texto — tema claro */
  --bg:          #F3F6F9;
  --superficie:  #FFFFFF;
  --superficie-2:#F7FAFC;
  --borde:       #DCE5EC;
  --borde-fuerte:var(--gris-marca);
  --texto:       #0B1B28;
  --texto-2:     #4A5C6B;
  --texto-3:     #7A8D9B;
  --marca:       var(--azul);
  --marca-fuerte:var(--azul-800);
  --marca-suave: var(--azul-50);
  --marca-borde: var(--azul-100);
  --marca-contraste: #FFFFFF;
  --acento:      var(--teal);
  --acento-suave:var(--teal-50);
  --exito:       var(--verde);
  --alerta:      var(--ambar);
  --alerta-suave:var(--ambar-50);
  --peligro:     var(--rojo);
  --peligro-suave:var(--rojo-50);

  --sombra-1: 0 1px 2px rgba(14, 28, 38, .06), 0 1px 3px rgba(14, 28, 38, .04);
  --sombra-2: 0 4px 16px rgba(14, 28, 38, .10);
  --sombra-3: 0 18px 48px rgba(14, 28, 38, .18);

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --ancho: 1240px;
  --barra-alto: 60px;
  --transicion: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* Tema oscuro: por preferencia del sistema... */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg:          #071119;
    --superficie:  #101C26;
    --superficie-2:#16242F;
    --borde:       #22323E;
    --borde-fuerte:#334756;
    --texto:       #E8EFF5;
    --texto-2:     #A3B4C1;
    --texto-3:     #7C8E9C;
    --marca:       #58A8DD;
    --marca-fuerte:#8AC5EC;
    --marca-suave: #0C2537;
    --marca-borde: #17384F;
    --marca-contraste: #06131E;
    --acento:      #2FC7C6;
    --acento-suave:#06292E;
    --exito:       #34B06B;
    --alerta:      #D9A441;
    --alerta-suave:#2E2413;
    --peligro:     #E0685C;
    --peligro-suave:#2E1614;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-2: 0 4px 16px rgba(0, 0, 0, .45);
    --sombra-3: 0 18px 48px rgba(0, 0, 0, .6);
  }
}

/* ...y por elección explícita del usuario (gana sobre el sistema). */
:root[data-tema="oscuro"] {
  --bg:          #071119;
  --superficie:  #101C26;
  --superficie-2:#16242F;
  --borde:       #22323E;
  --borde-fuerte:#334756;
  --texto:       #E8EFF5;
  --texto-2:     #A3B4C1;
  --texto-3:     #7C8E9C;
  --marca:       #58A8DD;
  --marca-fuerte:#8AC5EC;
  --marca-suave: #0C2537;
  --marca-borde: #17384F;
  --marca-contraste: #06131E;
  --acento:      #2FC7C6;
  --acento-suave:#06292E;
  --exito:       #34B06B;
  --alerta:      #D9A441;
  --alerta-suave:#2E2413;
  --peligro:     #E0685C;
  --peligro-suave:#2E1614;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-2: 0 4px 16px rgba(0, 0, 0, .45);
  --sombra-3: 0 18px 48px rgba(0, 0, 0, .6);
}

/* --- 2. Base ------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.sin-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

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

.oculto { display: none !important; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 14px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 3. Botones y controles ---------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--superficie);
  color: var(--texto);
  font-weight: 600; font-size: .9rem;
  text-decoration: none;
  transition: background var(--transicion), border-color var(--transicion),
              transform var(--transicion);
}
.btn:hover { background: var(--superficie-2); border-color: var(--borde-fuerte); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primario {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--marca-contraste);
}
.btn--primario:hover { background: var(--marca-fuerte); border-color: var(--marca-fuerte); }

.btn--wa { background: var(--verde-wa); border-color: var(--verde-wa); color: #06301A; }
.btn--wa:hover { filter: brightness(.95); background: var(--verde-wa); }

.btn--peligro { color: var(--peligro); border-color: var(--peligro); background: transparent; }
.btn--peligro:hover { background: var(--peligro-suave); }

.btn--bloque { width: 100%; }
.btn--grande { padding: 14px 20px; font-size: 1rem; }
.btn--chico { padding: 6px 10px; font-size: .82rem; }

.campo { display: block; margin-bottom: 14px; }
.campo__etiqueta {
  display: block; margin-bottom: 5px;
  font-size: .82rem; font-weight: 600; color: var(--texto-2);
}
.campo__ayuda { display: block; margin-top: 4px; font-size: .76rem; color: var(--texto-3); }
.campo__requerido { color: var(--peligro); }

.entrada, select.entrada, textarea.entrada {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-sm);
  background: var(--superficie);
  color: var(--texto);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.entrada:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-suave);
}
.entrada--error { border-color: var(--peligro); }
textarea.entrada { min-height: 72px; resize: vertical; }

/* --- 4. Chips ------------------------------------------------------------ */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  color: var(--texto-2);
  font-size: .74rem; font-weight: 600;
  white-space: nowrap;
}
.chip--cat  { background: var(--marca-suave); border-color: var(--marca-borde); color: var(--marca-fuerte); }
.chip--lab  { background: var(--acento-suave); border-color: transparent; color: var(--acento); }
.chip--venc-ok       { color: var(--texto-2); }
.chip--venc-proximo  { background: var(--alerta-suave); border-color: transparent; color: var(--alerta); }
.chip--venc-vencido  { background: var(--peligro-suave); border-color: transparent; color: var(--peligro); }
.chip--agotado { background: var(--peligro-suave); border-color: transparent; color: var(--peligro); }
.chip--disponible { background: transparent; border-color: transparent; color: var(--exito); padding-left: 0; }

/* --- 5. Barra superior --------------------------------------------------- */

.barra {
  position: sticky; top: 0; z-index: 40;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.barra__fila {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--barra-alto);
}

.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
/* Isotipo "dp" del logotipo. Trae su propio fondo, así que sirve en ambos temas. */
.logo__marca {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 9px;
  object-fit: cover;
}
.logo__marca--grande { width: 42px; height: 42px; border-radius: 11px; }
.logo__texto { display: flex; flex-direction: column; line-height: 1.1; }
.logo__nombre {
  font-weight: 800; font-size: 1.06rem; letter-spacing: -.01em;
  color: var(--marca-fuerte);
}
.logo__di { color: var(--acento); }
.logo__bajada { font-size: .68rem; color: var(--texto-3); font-weight: 600; }

.barra__acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.icono-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--superficie);
  transition: background var(--transicion);
}
.icono-btn:hover { background: var(--superficie-2); }
.icono-btn svg { width: 19px; height: 19px; }

/* Sin padding lateral: el botón es una caja cuadrada y el ícono va centrado.
   El contador se apoya en la esquina, con un halo del color de la barra para
   que se lea como una pieza aparte y no como un borde torcido. */
.btn-carrito { position: relative; }
.btn-carrito__n {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--acento); color: #04262A;
  font-size: .71rem; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px var(--superficie);
  transform: scale(0); transition: transform 180ms cubic-bezier(.34, 1.56, .64, 1);
}
.btn-carrito__n.visible { transform: scale(1); }
.btn-carrito__n.pulso { animation: pulso 420ms ease; }
@keyframes pulso { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Buscador */
.buscador { position: relative; flex: 1; min-width: 0; }
.buscador input {
  width: 100%;
  padding: 10px 36px 10px 38px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-pill);
  background: var(--superficie-2);
  color: var(--texto);
}
.buscador input:focus {
  outline: none; background: var(--superficie);
  border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave);
}
.buscador__lupa {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--texto-3); pointer-events: none;
}
.buscador__limpiar {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; display: none;
  place-items: center; border: 0; border-radius: 50%;
  background: var(--borde); color: var(--texto-2); font-size: .8rem; line-height: 1;
}
.buscador--con-texto .buscador__limpiar { display: grid; }

@media (min-width: 800px) { .buscador { max-width: 440px; } }

/* --- 6. Filtros ---------------------------------------------------------- */

.filtros {
  position: sticky; top: var(--barra-alto); z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--borde);
  padding: 10px 0;
}

.filtros__categorias {
  display: flex; gap: 7px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.filtros__categorias::-webkit-scrollbar { display: none; }

.filtro-cat {
  flex: 0 0 auto;
  padding: 7px 13px;
  border: 1px solid var(--borde);
  border-radius: var(--r-pill);
  background: var(--superficie);
  color: var(--texto-2);
  font-size: .82rem; font-weight: 600;
  white-space: nowrap;
  transition: all var(--transicion);
}
.filtro-cat:hover { border-color: var(--marca); color: var(--marca); }
.filtro-cat[aria-pressed="true"] {
  background: var(--marca); border-color: var(--marca); color: var(--marca-contraste);
}
.filtro-cat__n { opacity: .65; font-weight: 700; margin-left: 3px; }

.filtros__fila2 {
  display: flex; gap: 8px; align-items: center;
  margin-top: 9px; flex-wrap: wrap;
}
.filtros__avanzados { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* El botón "Filtros" solo existe en móvil (ver bloque responsive del final). */
.filtros__mas {
  display: none;
  align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--borde); border-radius: var(--r-pill);
  background: var(--superficie); color: var(--texto-2);
  font-size: .82rem; font-weight: 700;
}
.filtros__mas svg { width: 15px; height: 15px; }
.filtros__mas[aria-expanded="true"] {
  background: var(--marca-suave); border-color: var(--marca-borde); color: var(--marca-fuerte);
}
.filtros__select {
  padding: 7px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--superficie);
  font-size: .84rem; font-weight: 600; color: var(--texto-2);
  max-width: 190px;
}
.filtros__conteo { margin-left: auto; font-size: .82rem; color: var(--texto-3); font-weight: 600; }
.filtros__limpiar {
  border: 0; background: transparent; color: var(--marca);
  font-size: .82rem; font-weight: 700; padding: 4px 6px; border-radius: 6px;
}
.filtros__limpiar:hover { background: var(--marca-suave); }

/* --- 7. Catálogo --------------------------------------------------------- */

.catalogo { padding: 16px 0 90px; }

.grupo {
  display: flex; align-items: baseline; gap: 9px;
  margin: 22px 0 11px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--marca-borde);
}
.grupo:first-child { margin-top: 4px; }
.grupo__titulo { font-size: 1.02rem; font-weight: 800; color: var(--marca-fuerte); letter-spacing: -.01em; }
.grupo__n { font-size: .8rem; color: var(--texto-3); font-weight: 600; }

.rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 640px)  { .rejilla { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (min-width: 1080px) { .rejilla { grid-template-columns: repeat(3, 1fr); } }

/* Tarjeta de producto. content-visibility mantiene fluido el scroll con 381. */
.producto {
  position: relative;
  display: flex; flex-direction: column;
  padding: 13px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--r);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  cursor: pointer;
  contain-intrinsic-size: auto 190px;
  content-visibility: auto;
  transition: border-color var(--transicion), box-shadow var(--transicion),
              transform var(--transicion);
}
.producto:hover { border-color: var(--marca); box-shadow: var(--sombra-2); }
.producto:active { transform: scale(.995); }
.producto--en-carrito { border-color: var(--acento); background: var(--acento-suave); }
.producto--agotado { opacity: .62; cursor: not-allowed; }
.producto--agotado:hover { border-color: var(--borde); box-shadow: var(--sombra-1); }

.producto__top { display: flex; gap: 11px; }

.producto__media {
  flex: 0 0 auto;
  width: 54px; height: 54px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--marca-suave);
  display: grid; place-items: center;
  color: var(--marca); font-weight: 800; font-size: .82rem;
}
.producto__media img { width: 100%; height: 100%; object-fit: cover; }

.producto__info { min-width: 0; flex: 1; }

/* Nombre completo, nunca truncado: es el problema que traía el PDF actual. */
.producto__nombre {
  font-size: .93rem; font-weight: 700; letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.producto__pa {
  margin-top: 3px;
  font-size: .78rem; color: var(--texto-2); line-height: 1.35;
  overflow-wrap: anywhere;
}
.producto__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

.producto__pie {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  margin-top: 11px; padding-top: 11px;
  border-top: 1px dashed var(--borde);
}
.precio__valor {
  display: block;
  font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--marca-fuerte);
  font-variant-numeric: tabular-nums;
}
.precio__nota { display: block; font-size: .7rem; color: var(--texto-3); font-weight: 600; }

/* La columna de acción mide siempre lo mismo, tenga el producto en el carrito
   o no. Si no, el borde izquierdo salta ~20 px de una fila a otra según el
   estado y la lista se ve temblorosa. */
.producto__accion { flex: 0 0 auto; width: 104px; }

.producto__agregar {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--marca); border-radius: var(--r-sm);
  background: var(--marca); color: var(--marca-contraste);
  font-size: .84rem; font-weight: 700;
  transition: background var(--transicion);
}
.producto__agregar:hover { background: var(--marca-fuerte); }
.producto--en-carrito .producto__agregar { display: none; }

/* Contador dentro de la tarjeta cuando el producto ya está en el carrito */
.pasos { display: none; align-items: center; gap: 3px; }
.producto--en-carrito .pasos { display: flex; }

/* Dentro de la tarjeta, el contador ocupa el mismo ancho que el botón al que
   reemplaza: los signos quedan en los extremos y el número al centro, sin el
   hueco que dejaba una caja fija de 40 px para un solo dígito. */
.producto__accion .pasos { width: 100%; justify-content: space-between; gap: 2px; }
.producto__accion .pasos__n { min-width: 0; flex: 1; }
.pasos__btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--acento); border-radius: var(--r-sm);
  background: var(--superficie); color: var(--acento);
  font-size: 1.1rem; font-weight: 800; line-height: 1;
}
.pasos__btn:hover { background: var(--acento); color: #04262A; }
/* El número del contador es un <span> en el catálogo y un <input> editable en
   el carrito. Los dos comparten alto y tipografía para que la fila
   − [ n ] + quede pareja; sin esto el input toma el borde gris del navegador
   y queda más bajo y con esquinas cuadradas al lado de los botones. */
.pasos__n {
  min-width: 40px; height: 34px;
  text-align: center;
  font-weight: 800; font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
span.pasos__n { display: inline-grid; place-items: center; }

input.pasos__n {
  width: 58px;
  padding: 0 6px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-sm);
  background: var(--superficie);
  color: var(--texto);
  -moz-appearance: textfield;
  appearance: textfield;   /* fuera las flechitas nativas de <input type=number> */
}
input.pasos__n::-webkit-outer-spin-button,
input.pasos__n::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input.pasos__n:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-suave);
}

.producto__marca-agregado {
  position: absolute; top: 9px; right: 9px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--acento); color: #04262A;
  display: none; place-items: center; font-size: .7rem; font-weight: 900;
}
.producto--en-carrito .producto__marca-agregado { display: grid; }

/* --- 7b. Vista lista (formato por defecto) --------------------------------
   Una fila por producto: se ven muchos más de un vistazo y los precios quedan
   alineados en columna, que es lo que hace fácil comparar. Misma dinámica que
   las tarjetas: la fila entera agrega, y los botones − / + ajustan.          */

.lista { display: flex; flex-direction: column; gap: 6px; }

.lista .producto {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  contain-intrinsic-size: auto 64px;
}
.lista .producto__top { flex: 1; min-width: 0; align-items: center; gap: 10px; }
.lista .producto__media { width: 36px; height: 36px; font-size: .68rem; border-radius: 7px; }
.lista .producto__nombre { font-size: .88rem; }
.lista .producto__pa { margin-top: 1px; font-size: .74rem; }
.lista .producto__chips { margin-top: 5px; }

.lista .producto__pie {
  flex: 0 0 auto;
  margin: 0; padding: 0;
  border-top: 0;
  align-items: center; gap: 14px;
}
.lista .precio { min-width: 96px; text-align: right; }
.lista .precio__valor { font-size: 1.06rem; }
.lista .precio__nota { font-size: .64rem; }

/* En fila, el check estorba: el fondo teal y el contador ya dicen que está. */
.lista .producto--en-carrito .producto__marca-agregado { display: none; }

/* En pantalla ancha, nombre / principio activo / chips se acomodan en columnas:
   la vista queda como una lista de precios y se compara de un vistazo. */
@media (min-width: 900px) {
  .lista .producto__info { display: flex; align-items: center; gap: 14px; }
  .lista .producto__nombre { flex: 1 1 44%; min-width: 0; }
  .lista .producto__pa { flex: 1 1 26%; min-width: 0; margin-top: 0; }
  .lista .producto__chips { flex: 0 0 auto; margin-top: 0; justify-content: flex-end; }
}

@media (max-width: 620px) {
  .lista .producto__pie { flex-direction: column; align-items: flex-end; gap: 5px; }
  .lista .precio { min-width: 0; }
  .lista .precio__nota { display: none; }
  .lista .producto__agregar { padding: 7px 11px; font-size: .8rem; }
  .lista .pasos__btn { width: 30px; height: 30px; }
  .lista .pasos__n { min-width: 30px; }
}
@media (max-width: 420px) {
  .lista .producto__media { display: none; }
}

/* --- 7c. Conmutador lista / tarjetas ------------------------------------- */

.vista-toggle {
  display: inline-flex; gap: 2px;
  padding: 3px;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--superficie-2);
}
.vista-toggle__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--texto-2);
  font-size: .8rem; font-weight: 700;
  transition: background var(--transicion), color var(--transicion);
}
.vista-toggle__btn svg { width: 16px; height: 16px; }
.vista-toggle__btn:hover { color: var(--marca); }
.vista-toggle__btn[aria-pressed="true"] {
  background: var(--superficie);
  color: var(--marca-fuerte);
  box-shadow: var(--sombra-1);
}
@media (max-width: 560px) {
  .vista-toggle__texto { display: none; }
  /* Al bajar a su propia línea sigue quedando arriba a la derecha. */
  .vista-toggle { margin-left: auto; }
}

/* --- 8. Estados vacíos y esqueleto --------------------------------------- */

.vacio { text-align: center; padding: 60px 20px; color: var(--texto-2); }
.vacio__titulo { font-size: 1.05rem; font-weight: 700; color: var(--texto); margin-bottom: 6px; }

.esqueleto { border-radius: var(--r); background: var(--superficie); height: 178px;
             border: 1px solid var(--borde); overflow: hidden; position: relative; }
.esqueleto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--superficie-2), transparent);
  animation: brillo 1.3s infinite;
}
@keyframes brillo { 100% { transform: translateX(100%); } }

/* --- 9. Carrito: ahora es su propia página (carrito.html). */

/* Ítem del carrito. En columnas fijas para que las cantidades y los importes
   queden alineados uno debajo del otro: así se revisa el pedido de un vistazo
   en vez de perseguir números repartidos por el ancho de la pantalla. */
.linea {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto 108px;
  gap: 8px 14px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--borde);
}
.linea:last-child { border-bottom: 0; }

.linea__media {
  grid-column: 1;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--borde);
  background: var(--marca-suave);
  color: var(--marca); font-weight: 800; font-size: .72rem;
  overflow: hidden;
}
.linea__media img { width: 100%; height: 100%; object-fit: cover; }

.linea__info { min-width: 0; }
.linea__nombre { font-size: .89rem; font-weight: 700; overflow-wrap: anywhere; }
.linea__detalle { margin-top: 2px; font-size: .76rem; color: var(--texto-2); overflow-wrap: anywhere; }
.linea__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

.linea__cantidad { justify-self: center; }
.linea__precio { text-align: right; }
.linea__unitario { font-size: .74rem; color: var(--texto-3); font-weight: 600; }
.linea__subtotal {
  font-size: 1rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.linea__quitar {
  margin-top: 8px;
  /* El margen negativo compensa el relleno: así el texto arranca en la misma
     vertical que el nombre del producto, no 6 px más adentro. */
  margin-left: -6px;
  border: 0; background: transparent; color: var(--texto-3);
  font-size: .76rem; font-weight: 700; padding: 4px 6px; border-radius: 6px;
}
.linea__quitar:hover { color: var(--peligro); background: var(--peligro-suave); }

/* En pantalla angosta la línea se dobla: foto y datos arriba, cantidad e
   importe abajo, pero el importe sigue pegado a la derecha. */
@media (max-width: 700px) {
  .linea {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 12px 14px;
  }
  .linea__media { width: 44px; height: 44px; align-self: start; }
  .linea__info { grid-column: 2 / -1; }
  .linea__cantidad { grid-column: 2; justify-self: start; }
  .linea__precio { grid-column: 3; align-self: end; }
  .linea__chips { margin-top: 5px; }
  .linea__quitar { margin-top: 4px; padding: 2px 4px; font-size: .72rem; }
  .linea__subtotal { font-size: .95rem; }
}

.resumen__fila {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 3px 0; font-size: .86rem; color: var(--texto-2);
}
.resumen__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--borde-fuerte);
  font-size: 1.02rem; font-weight: 800;
}
.resumen__total strong { font-size: 1.32rem; color: var(--marca-fuerte); font-variant-numeric: tabular-nums; }

/* --- 10. Confirmación ---------------------------------------------------- */

.exito { text-align: center; padding: 12px 4px 4px; }
.exito__icono {
  width: 62px; height: 62px; margin: 0 auto 14px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--acento-suave); color: var(--acento); font-size: 1.9rem;
}
.exito__codigo {
  display: inline-block; margin: 10px 0 6px;
  padding: 8px 16px; border-radius: var(--r-sm);
  background: var(--marca-suave); border: 1px dashed var(--marca-borde);
  font-size: 1.2rem; font-weight: 800; letter-spacing: .04em; color: var(--marca-fuerte);
}

/* --- 11. Toast ----------------------------------------------------------- */

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 90;
  transform: translate(-50%, 22px);
  max-width: calc(100% - 32px);
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: var(--azul-900); color: #fff;
  font-size: .86rem; font-weight: 600;
  box-shadow: var(--sombra-3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
}
.toast--visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast--error { background: var(--rojo); }
.toast--exito { background: var(--verde); }

/* --- 12. Barra flotante de carrito (móvil) ------------------------------- */

.barra-flotante {
  position: fixed; left: 12px; right: 12px; z-index: 50;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: var(--r-lg);
  background: var(--marca); color: var(--marca-contraste);
  box-shadow: var(--sombra-3);
  transform: translateY(140%);
  transition: transform 220ms cubic-bezier(.4, 0, .2, 1);
  border: 0;
}
.barra-flotante--visible { transform: translateY(0); }
.barra-flotante__n {
  display: grid; place-items: center;
  min-width: 28px; height: 28px; padding: 0 7px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .22);
  font-weight: 800; font-size: .84rem;
}
.barra-flotante__texto { font-weight: 700; font-size: .9rem; }
.barra-flotante__total { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (min-width: 800px) { .barra-flotante { display: none; } }

/* --- 13. Pie ------------------------------------------------------------- */

.pie {
  margin-top: 40px; padding: 26px 0 34px;
  border-top: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto-3); font-size: .8rem;
}
.pie__fila { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; }
.pie a { color: var(--marca); font-weight: 600; text-decoration: none; }
.pie a:hover { text-decoration: underline; }

/* --- 14. Aviso de modo local --------------------------------------------- */

.aviso-modo {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px;
  background: var(--alerta-suave);
  color: var(--alerta);
  font-size: .78rem; font-weight: 600;
  border-bottom: 1px solid var(--borde);
}
.aviso-modo strong { font-weight: 800; }

/* --- 15. Compactación en móvil -------------------------------------------
   En un teléfono el encabezado se comía 306 px de 812: casi media pantalla
   antes del primer producto. Acá se reduce a lo imprescindible y solo la
   barra de búsqueda queda fija; los filtros se van con el scroll.          */

@media (max-width: 799px) {
  :root { --barra-alto: 52px; }

  /* Basta el isotipo: el nombre de la marca sigue en el pie y en el título. */
  .logo__texto { display: none; }

  .barra__fila { gap: 8px; }
  .barra .buscador input { padding-top: 8px; padding-bottom: 8px; }
  .icono-btn { width: 36px; height: 36px; }
  .icono-btn svg { width: 18px; height: 18px; }

  /* Los filtros dejan de ser pegajosos: al bajar, la lista se queda con todo. */
  .filtros { position: static; padding: 8px 0 9px; }
  .filtros__categorias { gap: 6px; }
  .filtro-cat { padding: 6px 11px; font-size: .8rem; }

  .filtros__fila2 { margin-top: 8px; }
  .filtros__mas { display: inline-flex; }
  .filtros__conteo { display: none; }   /* el chip "Todas 381" ya da el número */
  .vista-toggle { margin-left: auto; }

  /* Laboratorio y orden: ocultos hasta que se toca "Filtros". */
  .filtros__avanzados { display: none; }
  .filtros__avanzados--abierto {
    display: flex;
    order: 3; width: 100%;
    margin-top: 8px;
  }
  .filtros__avanzados--abierto .filtros__select { flex: 1 1 0; max-width: none; }
  .filtros__avanzados--abierto .filtros__limpiar { flex: 0 0 auto; }

  .catalogo { padding-top: 10px; }
  .grupo { margin: 16px 0 9px; }
}

/* --- 16. Piezas compartidas con el panel ---------------------------------- */

.rejilla-campos { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .rejilla-campos { grid-template-columns: 1fr 1fr; } }
.campo--ancho { grid-column: 1 / -1; }

.login__error {
  margin-bottom: 12px; padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--peligro-suave); color: var(--peligro);
  font-size: .82rem; font-weight: 600;
}

.estado {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 800; letter-spacing: .01em;
  border: 1px solid transparent;
}
.estado--nuevo          { background: var(--marca-suave);  color: var(--marca-fuerte); }
.estado--en_preparacion { background: var(--alerta-suave); color: var(--alerta); }
.estado--listo          { background: var(--acento-suave); color: var(--acento); }
.estado--entregado      { background: #E4F5EA; color: var(--verde); }
.estado--cancelado      { background: var(--peligro-suave); color: var(--peligro); }
:root[data-tema="oscuro"] .estado--entregado { background: #102A1C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .estado--entregado { background: #102A1C; }
}

/* --- 17. Menú de cuenta (esquina superior) -------------------------------- */

.menu-cuenta { position: relative; }

.icono-btn--sesion {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--marca-contraste);
  font-size: .74rem; font-weight: 800;
}
.icono-btn--sesion:hover { background: var(--marca-fuerte); }

.menu-cuenta__panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: min(290px, calc(100vw - 28px));
  padding: 6px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  box-shadow: var(--sombra-3);
}
.menu-cuenta__panel[hidden] { display: none; }

.menu-cuenta__cabecera {
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 6px;
}
.menu-cuenta__cabecera strong { display: block; font-size: .92rem; }
.menu-cuenta__cabecera span {
  display: block; margin-top: 3px;
  font-size: .76rem; color: var(--texto-3); line-height: 1.35;
}

.menu-cuenta__item {
  display: block; width: 100%; text-align: left;
  padding: 9px 10px;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--texto);
  font-size: .87rem; font-weight: 600; text-decoration: none;
}
.menu-cuenta__item:hover { background: var(--marca-suave); color: var(--marca-fuerte); }
.menu-cuenta__item--tenue { color: var(--texto-3); }

.menu-cuenta__separador { height: 1px; background: var(--borde); margin: 6px 0; }

.menu-cuenta__aviso {
  padding: 9px 10px; margin-bottom: 4px;
  border-radius: var(--r-sm);
  background: var(--alerta-suave); color: var(--alerta);
  font-size: .78rem; font-weight: 600;
}

/* --- 18. Aviso de vendedor ------------------------------------------------ */

.aviso-vendedor {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px;
  background: var(--acento-suave); color: var(--acento);
  font-size: .78rem; font-weight: 600;
  border-bottom: 1px solid var(--borde);
}

/* --- 19. Páginas de compra (carrito, checkout, gracias, cuenta) ----------- */

/* Estas páginas son de lectura y formulario, no de catálogo: se estrechan y
   se centran para que la vista no tenga que barrer 1240 px de ancho. */
.contenedor.pagina { max-width: 1060px; padding-top: 20px; padding-bottom: 60px; }

.pagina__titulo {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 800; letter-spacing: -.02em;
  margin-bottom: 16px;
}

.pagina__columnas {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 18px; align-items: start;
  justify-content: center;
}
@media (min-width: 900px) {
  .pagina__columnas { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); }
  .pagina__lateral { position: sticky; top: calc(var(--barra-alto) + 16px); }
}

/* Una sola columna, centrada: cuenta, registro, ingreso. */
.pagina__columnas--angosta { grid-template-columns: minmax(0, 560px); }
@media (min-width: 900px) {
  .pagina__columnas--angosta { grid-template-columns: minmax(0, 560px); }
}
.pagina--centrada .pagina__titulo { text-align: center; }
/* Las pestañas se alinean con la tarjeta de abajo, no con el ancho total:
   si no, quedan flotando sueltas sobre el formulario. */
.pagina--centrada .pestanas {
  justify-content: center;
  width: fit-content; max-width: 100%;
  margin-left: auto; margin-right: auto;
}

.tarjeta-simple {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}
.tarjeta-simple--relleno { padding: 18px; }

/* Pasos de la compra: una pastilla discreta y centrada. El paso actual se
   marca con una pastilla interior, no con color fuerte: guía sin gritar. */
.pasos-compra {
  display: flex;
  justify-content: center;
  margin: 0 auto 22px;
  padding: 4px;
  width: fit-content; max-width: 100%;
  gap: 2px;
  border: 1px solid var(--borde);
  border-radius: var(--r-pill);
  background: var(--superficie-2);
}

.pasos-compra__paso {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  color: var(--texto-3);
  font-size: .8rem; font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transicion), color var(--transicion);
}
a.pasos-compra__paso:hover { color: var(--marca); background: var(--marca-suave); }

.pasos-compra__paso--activo {
  background: var(--superficie);
  color: var(--marca-fuerte);
  box-shadow: var(--sombra-1);
}

/* El número va en su propio círculo, para leer el avance de un golpe. */
.pasos-compra__n {
  display: grid; place-items: center;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--borde); color: var(--texto-2);
  font-size: .68rem; font-weight: 800;
}
.pasos-compra__paso--activo .pasos-compra__n {
  background: var(--marca); color: var(--marca-contraste);
}
.pasos-compra__paso--hecho .pasos-compra__n {
  background: var(--acento); color: #04262A;
}

@media (max-width: 560px) {
  .pasos-compra__paso { padding: 7px 11px; font-size: .74rem; gap: 5px; }
  .pasos-compra__texto { display: none; }
  .pasos-compra__paso--activo .pasos-compra__texto { display: inline; }
}

/* Caja de resumen */
.resumen-caja {
  padding: 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  box-shadow: var(--sombra-1);
}
.resumen-caja:empty { display: none; }
.resumen-caja__titulo { font-size: 1rem; font-weight: 800; margin-bottom: 12px; }
.resumen-caja__aviso {
  margin-top: 10px; color: var(--alerta);
  font-size: .8rem; font-weight: 600;
}
.resumen-caja__nota {
  margin-top: 6px; text-align: right;
  font-size: .78rem; color: var(--texto-3);
}
.resumen-caja__lista { max-height: 320px; overflow-y: auto; }
.resumen-caja__lista li {
  display: flex; gap: 8px; align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--borde);
  font-size: .82rem;
}
.resumen-caja__lista li:last-child { border-bottom: 0; }
.resumen-caja__cant {
  flex: 0 0 auto; min-width: 24px;
  font-weight: 800; color: var(--marca-fuerte);
}
.resumen-caja__nombre { flex: 1; overflow-wrap: anywhere; color: var(--texto-2); }
.resumen-caja__monto { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Sugerencia de cuenta */
.sugerencia {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 1px solid var(--marca-borde);
  border-radius: var(--r);
  background: var(--marca-suave);
}
.sugerencia strong { display: block; font-size: .92rem; color: var(--marca-fuerte); }
.sugerencia p { margin-top: 3px; font-size: .82rem; color: var(--texto-2); }
.sugerencia > div:first-child { flex: 1; min-width: 200px; }
.sugerencia--ok { background: var(--acento-suave); border-color: transparent; }
.sugerencia--ok strong { color: var(--acento); }
.sugerencia--vendedor { background: var(--alerta-suave); border-color: transparent; }
.sugerencia--vendedor strong { color: var(--alerta); }

/* --- 20. Página de gracias ------------------------------------------------ */

.gracias {
  max-width: 520px; margin: 0 auto;
  padding: 26px 22px 22px;
  text-align: center;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
}
.gracias__titulo { font-size: 1.35rem; font-weight: 800; }
.gracias__bajada { margin-top: 6px; color: var(--texto-2); font-size: .9rem; }
.gracias__resumen {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--borde);
  text-align: left;
}
.gracias__acciones { margin-top: 18px; }

/* --- 21. Pestañas y pedidos de la cuenta --------------------------------- */

.pestanas {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
}
.pestanas__btn {
  padding: 8px 14px;
  border-radius: 6px;
  color: var(--texto-2);
  font-size: .86rem; font-weight: 700;
  text-decoration: none;
}
.pestanas__btn:hover { color: var(--texto); }
.pestanas__btn--activa {
  background: var(--superficie);
  color: var(--marca-fuerte);
  box-shadow: var(--sombra-1);
}

.pedido-cliente { border-bottom: 1px solid var(--borde); }
.pedido-cliente:last-child { border-bottom: 0; }
.pedido-cliente > summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 4px;
  cursor: pointer;
  list-style: none;
}
.pedido-cliente > summary::-webkit-details-marker { display: none; }
.pedido-cliente > summary:hover { color: var(--marca-fuerte); }
.pedido-cliente__codigo { font-weight: 800; font-size: .86rem; letter-spacing: .02em; }
.pedido-cliente__fecha { color: var(--texto-3); font-size: .78rem; }
.pedido-cliente__total {
  margin-left: auto; font-weight: 800;
  color: var(--marca-fuerte); font-variant-numeric: tabular-nums;
}
.pedido-cliente__cuerpo { padding: 4px 4px 16px; }