/* Paleta neutra hasta que haya un logo. El precio es lo que más se ve: es lo que el cliente viene a buscar. */
:root {
  color-scheme: light dark;
  --fondo: #edf0f3;
  --superficie: #ffffff;
  --tinta: #16191d;
  --tenue: #5a6370;
  --borde: #d3d8de;
  --foco: #1d5fd0;
  --nuevo: #11612f;
  --nuevo-fondo: #dcf3e4;
  --sin-stock: #7a3d00;
  --sin-stock-fondo: #fde9d4;
  --accion: #1d5fd0;
  --sobre-accion: #ffffff;
  --error: #b3261e;
}

/*
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121417;
    --superficie: #1c1f24;
    --tinta: #eceef1;
    --tenue: #9aa3ae;
    --borde: #2c3138;
    --foco: #7aa7ff;
    --nuevo: #8fe0ad;
    --nuevo-fondo: #173a25;
    --sin-stock: #ffc48a;
    --sin-stock-fondo: #3d2810;
    --accion: #7aa7ff;
    --sobre-accion: #0b1630;
    --error: #ffb4ab;
  }
}
*/

* {
  box-sizing: border-box;
}

/* Que un "display" de esta hoja no muestre lo que la página ocultó. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}

header,
#buscador,
main {
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

header {
  padding-block: 1.25rem 0.5rem;
}

h1 {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

#vigencia {
  margin: 0.25rem 0 0;
  color: var(--tenue);
  font-size: 0.9375rem;
}

/* El buscador queda a mano mientras se recorre la lista. */
#buscador {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-block: 0.5rem;
  background: var(--fondo);
}

#buscador label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#consulta {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--borde);
  border-radius: 0.625rem;
  background: var(--superficie);
  color: var(--tinta);
  /* Con menos de 16 px, el iPhone agranda la página al tocar el buscador. */
  font: inherit;
  font-size: 1rem;
}

#consulta:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
  border-color: transparent;
}

/* Abajo queda lugar para la barra de "Ver pedido", que no tiene que tapar la última tarjeta. */
main {
  padding-bottom: 6rem;
}

#estado {
  margin: 0.75rem 0;
  color: var(--tenue);
}

#estado:empty {
  display: none;
}

/* La pantalla de navegación: los rubros, las categorías de un rubro o el encabezado de una categoría. */
#volver {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--foco);
  font-size: 0.9375rem;
  text-decoration: none;
}

/* La flecha es un borde y no un carácter, para que no forme parte del nombre del enlace. */
#volver::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
}

#titulo {
  margin: 0.5rem 0 0.75rem;
  font-size: 1.25rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#volver:not([hidden]) + #titulo {
  margin-top: 0;
}

#opciones {
  margin: 0;
  padding: 0;
  list-style: none;
}

#opciones:empty {
  display: none;
}

#opciones a {
  color: var(--tinta);
  text-decoration: none;
}

#opciones a:focus-visible,
#volver:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

/* Los rubros, en baldosas de dos columnas, con el ícono arriba: entran todos en la pantalla del celular. */
.rubros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.rubros a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 100%;
  min-height: 6.5rem;
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--borde);
  border-radius: 0.625rem;
  background: var(--superficie);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.rubros img {
  width: 2.75rem;
  height: 2.75rem;
}

/* Las categorías de un rubro, en una sola lista con un renglón por categoría. */
.categorias {
  border: 1px solid var(--borde);
  border-radius: 0.625rem;
  background: var(--superficie);
  overflow: hidden;
}

.categorias li + li {
  border-top: 1px solid var(--borde);
}

.categorias a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.categorias a::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid var(--tenue);
  border-right: 2px solid var(--tenue);
  transform: rotate(45deg);
}

#tarjetas {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

#tarjetas:empty {
  display: none;
}

.producto {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.375rem 0.75rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--borde);
  border-radius: 0.625rem;
  background: var(--superficie);
  /* Con ~1.100 productos, el navegador solo dibuja las tarjetas que están en pantalla. */
  content-visibility: auto;
  contain-intrinsic-size: auto 7rem;
}

.producto p,
.producto h3 {
  margin: 0;
}

.nombre {
  grid-column: 1 / -1;
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* La descripción tal como figura en la lista y en las facturas: así reconoce el producto el vendedor. */
.descripcion {
  grid-column: 1 / -1;
  color: var(--tenue);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

/* Con color, para que salten a la vista: los productos nuevos al recorrer la lista y, en el pedido, los que ya no
   figuran en la lista vigente. La etiqueta va después del nombre, para que se lea después, pero se ve arriba. */
.nuevo,
.sin-stock {
  grid-row: 1;
  grid-column: 1 / -1;
  justify-self: start;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
}

.nuevo {
  background: var(--nuevo-fondo);
  color: var(--nuevo);
}

.sin-stock {
  background: var(--sin-stock-fondo);
  color: var(--sin-stock);
}

.codigo {
  color: var(--tenue);
  font-size: 0.875rem;
}

.precio {
  text-align: right;
  white-space: nowrap;
}

.importe {
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.unidad {
  color: var(--tenue);
  font-size: 0.875rem;
}

/* Lo que hace falta para pedir un producto, al pie de su tarjeta. */
.pedir {
  grid-column: 1 / -1;
  margin-top: 0.25rem;
}

/* "Agregar al pedido" y, en la tarjeta de un producto sin stock, "Sacar del pedido". */
.agregar,
.sacar-sin-stock {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--accion);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--accion);
  font: inherit;
  font-weight: 600;
}

/* Un producto que ya está en el pedido se distingue al recorrer la lista. */
.producto.en-el-pedido {
  border-color: var(--accion);
}

.bultos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.bultos label {
  color: var(--tenue);
  font-size: 0.9375rem;
}

.selector {
  display: flex;
  border: 1px solid var(--borde);
  border-radius: 0.5rem;
  overflow: hidden;
}

.selector button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: var(--superficie);
  color: var(--accion);
  font: inherit;
  font-size: 1.375rem;
  line-height: 1;
}

.cantidad {
  width: 3.5rem;
  height: 2.75rem;
  border: 0;
  border-inline: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  /* Con menos de 16 px, el iPhone agranda la página al tocar el campo. */
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.agregar:focus-visible,
.sacar-sin-stock:focus-visible,
.selector button:focus-visible,
.cantidad:focus-visible,
#envio input:focus-visible,
#envio textarea:focus-visible,
#envio a:focus-visible,
#ver-pedido:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: -2px;
}

/* Debajo de los productos del pedido: el nombre del comercio, las observaciones y el envío. */
#envio {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-top: 1rem;
}

#envio p {
  margin: 0;
}

.aclaracion {
  margin-bottom: 0.5rem !important;
  color: var(--tenue);
  font-size: 0.875rem;
}

#envio label {
  margin-top: 0.5rem;
  font-weight: 600;
}

.opcional {
  color: var(--tenue);
  font-weight: 400;
}

#envio input,
#envio textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--borde);
  border-radius: 0.625rem;
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  font-size: 1rem;
}

#envio textarea {
  resize: vertical;
}

#comercio[aria-invalid="true"] {
  border-color: var(--error);
}

#aviso {
  margin-top: 0.5rem;
  color: var(--error);
  font-weight: 600;
}

#aviso:empty {
  display: none;
}

#enviar,
#ver-pedido {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 3rem;
  padding: 0.625rem 1rem;
  border-radius: 0.625rem;
  background: var(--accion);
  color: var(--sobre-accion);
  font-weight: 700;
  text-decoration: none;
}

#enviar {
  margin-top: 1rem;
}

#enviar-a-otro {
  align-self: center;
  padding: 0.75rem;
  color: var(--accion);
  font-size: 0.9375rem;
}

/* "Ver pedido" queda abajo, a mano del pulgar, mientras se recorre el catálogo. */
#ver-pedido {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  left: 1rem;
  z-index: 1;
  max-width: 38rem;
  margin-inline: auto;
  box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.25);
}

#productos-del-pedido {
  font-weight: 400;
}