@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fuentes/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fuentes/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  background: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

select,
textarea {
  font: inherit;
  color: inherit;
}

h3,
figure {
  margin: 0;
}

ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.icono {
  flex: none;
  width: var(--icono-s);
  height: var(--icono-s);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icono-trazo);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.muted {
  color: var(--color-tinta-suave);
}

.acceso {
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: var(--pantalla-alto);
  padding: var(--espacio-10) var(--espacio-4);
}

.acceso__logo {
  display: block;
  width: auto;
  height: var(--logo-alto-acceso);
  margin: 0 auto var(--espacio-6);
}

.acceso__formulario {
  width: 100%;
  max-width: var(--hoja-ancho);
}

.acceso__formulario .panel__body {
  gap: var(--espacio-4);
  padding: var(--espacio-6);
}

.acceso__formulario .panel__title {
  font-size: var(--texto-xl);
}

.aviso .record__concept {
  white-space: pre-line;
}

.acceso__nota {
  color: var(--color-tinta-suave);
  font-size: var(--texto-s);
}

.acceso__codigo {
  font-size: var(--texto-xl);
  font-weight: var(--peso-extra);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.acceso__error {
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-alerta-borde);
  border-radius: var(--radio-control);
  background: var(--color-peligro-fondo);
  color: var(--color-peligro);
  font-weight: var(--peso-medio);
}

.campo {
  display: grid;
  gap: var(--espacio-1);
}

.campo__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
}

.campo__entrada,
.search {
  width: 100%;
  height: var(--control-alto);
  padding: 0 var(--espacio-3);
  border: var(--borde-fino) solid var(--color-borde-control);
  border-radius: var(--radio-control);
  background: var(--color-superficie);
  font-variant-numeric: tabular-nums;
}

.campo__entrada:hover,
.search:hover,
.field:hover {
  border-color: var(--color-tinta);
}

.campo__entrada:disabled {
  border-color: var(--color-deshabilitado-fondo);
  background: var(--color-deshabilitado-fondo);
  color: var(--color-deshabilitado-texto);
}

.strip {
  gap: var(--espacio-2);
  min-height: var(--franja-alto);
  padding: var(--espacio-2) var(--espacio-3);
  border-bottom: var(--borde-fino) solid var(--color-borde);
}

.strip__logo {
  display: block;
  width: auto;
  height: var(--logo-alto);
}

.rate {
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 0;
  min-height: var(--toque-min);
  padding: 0 var(--espacio-2);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-control);
  background: var(--color-hundido);
  color: var(--color-tinta);
  line-height: var(--interlinea-ajustada);
  text-align: right;
}

.rate__label {
  white-space: nowrap;
  color: var(--color-tinta-suave);
  font-size: var(--texto-xxs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-mayus);
  text-transform: uppercase;
}

.rate__value {
  font-size: var(--texto-m);
  font-weight: var(--peso-extra);
  font-variant-numeric: tabular-nums;
}

.rate--falta .rate__value {
  color: var(--color-alerta);
}

.rate--boton:hover {
  border-color: var(--color-tinta);
}

.rate--boton:active {
  background: var(--color-presionado);
}

.nav {
  gap: var(--espacio-1);
  padding: var(--espacio-1);
  overflow: visible;
}

.nav__marca,
.persona,
.nav__grupo {
  display: none;
}

.nav__item {
  min-width: 0;
  border-radius: var(--radio-control);
  color: var(--color-tinta-suave);
}

.nav__icon {
  width: var(--icono);
  height: var(--icono);
}

.nav__item[aria-current="page"],
.nav__mas--activo {
  background: var(--color-acento-fondo);
  color: var(--color-tinta);
  font-weight: var(--peso-extra);
  box-shadow: none;
}

.nav__item:focus-visible {
  outline: var(--borde-fuerte) solid var(--color-acento-fuerte);
  outline-offset: calc(-1 * var(--borde-fuerte));
}

.nav__mas {
  display: none;
}

.nav--con-mas .nav__item--extra {
  display: none;
}

.nav--con-mas .nav__mas {
  display: flex;
}

.nav__salir {
  position: fixed;
  top: calc((var(--franja-alto) - var(--toque-min)) / 2);
  right: var(--espacio-3);
  display: grid;
  place-items: center;
  width: var(--toque-min);
  height: var(--toque-min);
  padding: 0;
  border: var(--borde-fino) solid var(--color-borde-control);
  border-radius: var(--radio-control);
  background: var(--color-superficie);
  color: var(--color-peligro);
}

.nav__salir .icono {
  width: var(--icono);
  height: var(--icono);
}

.nav__salir span {
  position: absolute;
  width: var(--borde-fino);
  height: var(--borde-fino);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nav__salir:disabled {
  color: var(--color-deshabilitado-texto);
}

.view {
  padding: var(--espacio-3);
  padding-bottom: calc(var(--barra-inferior-alto) + var(--accion-alto) + var(--espacio-10));
}

.view__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-3);
  margin-bottom: var(--espacio-3);
}

.view__title {
  margin: 0;
  font-size: var(--texto-xl);
  font-weight: var(--peso-titulo);
  line-height: var(--interlinea-ajustada);
}

.view__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
  margin-left: auto;
}

.view__acciones .rate {
  position: fixed;
  top: calc((var(--franja-alto) - var(--toque-min)) / 2);
  right: calc(var(--espacio-3) + var(--toque-min) + var(--espacio-2));
  z-index: var(--capa-barra);
}

.panel {
  overflow: hidden;
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-superficie);
}

.panel__head {
  min-height: var(--accion-alto);
  padding: var(--espacio-2) var(--espacio-4);
  border-bottom: var(--borde-fino) solid var(--color-borde);
}

.panel__title {
  font-size: var(--texto-m);
  font-weight: var(--peso-titulo);
  line-height: var(--interlinea-ajustada);
}

.panel__body {
  gap: var(--espacio-3);
  padding: var(--espacio-4);
}

.group__label {
  margin-bottom: var(--espacio-2);
  color: var(--color-tinta-suave);
  font-size: var(--texto-xxs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-mayus);
  text-transform: uppercase;
}

.empty {
  padding: var(--espacio-5) var(--espacio-4);
  color: var(--color-tinta-suave);
  font-size: var(--texto-s);
}

.count-line {
  margin: 0;
  color: var(--color-tinta-suave);
  font-size: var(--texto-s);
  font-variant-numeric: tabular-nums;
}

.nota {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-2);
  font-size: var(--texto-s);
}

.button {
  gap: var(--espacio-2);
  min-height: var(--control-alto);
  padding: 0 var(--espacio-4);
  border: var(--borde-fino) solid var(--color-tinta);
  border-radius: var(--radio-control);
  background: var(--color-superficie);
  color: var(--color-tinta);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlinea-ajustada);
}

.button:hover {
  background: var(--color-hundido);
}

.button:active {
  background: var(--color-presionado);
}

.button--small {
  min-height: var(--toque-min);
  padding: 0 var(--espacio-3);
  font-size: var(--texto-s);
}

.button--primary {
  min-height: var(--accion-alto);
  border-color: var(--color-tinta);
  background: var(--color-tinta);
  color: var(--color-sobre-tinta);
  font-size: var(--texto-m);
  font-weight: var(--peso-extra);
}

.button--primary:hover {
  border-color: var(--color-tinta-encima);
  background: var(--color-tinta-encima);
}

.button--primary:active {
  background: var(--color-tinta-presionado);
}

.button--center {
  justify-content: center;
}

.button--danger {
  min-height: var(--accion-alto);
  border-color: var(--color-peligro);
  background: var(--color-peligro-fondo);
  color: var(--color-peligro);
  font-size: var(--texto-m);
  font-weight: var(--peso-extra);
}

.button--danger:hover,
.button--danger:active {
  background: var(--color-peligro);
  color: var(--color-sobre-peligro);
}

.button--link {
  min-height: var(--toque-min);
  padding: 0 var(--espacio-2);
  border-color: transparent;
  background: none;
  font-size: var(--texto-s);
}

.button--link:hover {
  border-color: transparent;
  background: var(--color-hundido);
}

.button:disabled,
.button:disabled:hover {
  border-color: var(--color-deshabilitado-fondo);
  background: var(--color-deshabilitado-fondo);
  color: var(--color-deshabilitado-texto);
  text-decoration: none;
}

.continuar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--espacio-3);
  width: 100%;
  min-height: var(--accion-alto);
  padding: 0 var(--espacio-3);
  text-align: left;
}

.continuar__texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.continuar__flecha {
  width: var(--icono-s);
  height: var(--icono-s);
}

.count {
  min-width: var(--espacio-8);
  height: var(--espacio-8);
  border-radius: var(--radio-etiqueta);
  font-weight: var(--peso-extra);
}

.continuar:disabled .count {
  background: var(--color-superficie);
}

.buscador {
  position: relative;
  display: flex;
  align-items: center;
}

.buscador .search {
  padding-left: calc(var(--espacio-3) + var(--icono) + var(--espacio-2));
}

.buscador__lupa,
.buscador__codigo {
  position: absolute;
  top: 50%;
  width: var(--icono-s);
  height: var(--icono-s);
  transform: translateY(-50%);
  pointer-events: none;
}

.buscador__lupa {
  left: var(--espacio-3);
  color: var(--color-tinta-suave);
}

.buscador__codigo {
  display: none;
  right: var(--espacio-3);
  color: var(--color-tinta-tenue);
}

.chips {
  gap: var(--espacio-2);
  padding-block: var(--espacio-2);
  scrollbar-width: thin;
}

.chips--fila {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.chip {
  min-height: var(--toque-min);
  padding: 0 var(--espacio-3);
  border: var(--borde-fino) solid var(--color-borde-control);
  border-radius: var(--radio-control);
  background: var(--color-superficie);
  color: var(--color-tinta);
  font-size: var(--texto-s);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}

.chip:hover {
  border-color: var(--color-tinta);
}

.chip[aria-pressed="true"],
.chip[aria-pressed="true"]:hover {
  border-color: var(--color-acento);
  background: var(--color-acento);
  color: var(--color-sobre-acento);
  font-weight: var(--peso-extra);
}

.chips--segmento {
  display: inline-flex;
  justify-self: start;
  gap: 0;
  padding: var(--espacio-1);
  overflow: hidden;
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-control);
  background: var(--color-superficie);
}

.chips--segmento .chip {
  min-width: var(--valor-ancho-gramos);
  min-height: calc(var(--toque-min) - var(--espacio-2));
  border: 0;
  border-radius: var(--radio-etiqueta);
  color: var(--color-tinta-suave);
}

.chips--segmento .chip[aria-pressed="true"],
.chips--segmento .chip[aria-pressed="true"]:hover {
  background: var(--color-tinta);
  color: var(--color-sobre-tinta);
}

.tag {
  gap: var(--espacio-1);
  min-height: var(--etiqueta-alto);
  padding: 0 var(--espacio-2);
  border: var(--borde-fino) solid transparent;
  border-radius: var(--radio-etiqueta);
  font-size: var(--texto-xs);
  font-weight: var(--peso-extra);
  line-height: var(--interlinea-ajustada);
}

.tag__icono {
  width: var(--espacio-3);
  height: var(--espacio-3);
}

.tag--ok {
  background: var(--color-disponible-fondo);
  color: var(--color-disponible);
}

.tag--low {
  border-color: var(--color-alerta-borde);
  background: var(--color-alerta-fondo);
  color: var(--color-alerta);
}

.tag--out {
  border-color: var(--color-peligro);
  background: var(--color-peligro);
  color: var(--color-sobre-peligro);
}

.tag--warehouse {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-tinta-suave);
  font-weight: var(--peso-medio);
}

.aviso-bajo {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  min-height: var(--etiqueta-alto);
  padding: 0 var(--espacio-2);
  border-radius: var(--radio-etiqueta);
  background: var(--color-alerta-fondo);
  color: var(--color-alerta);
  font-size: var(--texto-xs);
  font-weight: var(--peso-extra);
  white-space: nowrap;
}

.aviso-bajo .icono {
  width: var(--espacio-3);
  height: var(--espacio-3);
}

.sin-foto {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--espacio-1);
  overflow: hidden;
  font-size: var(--texto-xxs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--tracking-mayus);
  text-transform: uppercase;
}

.sin-foto--nevera {
  background: var(--color-seccion-nevera-fondo);
  color: var(--color-seccion-nevera-tinta);
}

.sin-foto--despensa {
  background: var(--color-seccion-despensa-fondo);
  color: var(--color-seccion-despensa-tinta);
}

.sin-foto--cuidado {
  background: var(--color-seccion-cuidado-fondo);
  color: var(--color-seccion-cuidado-tinta);
}

.sin-foto--varios {
  background: var(--color-seccion-varios-fondo);
  color: var(--color-seccion-varios-tinta);
}

.sin-foto__icono {
  width: var(--icono-l);
  height: var(--icono-l);
  stroke-width: var(--icono-trazo-fino);
}

.sin-foto__nombre {
  display: none;
}

.product__photo--foto,
.inventario__miniatura--foto,
.line__foto--foto,
.detalle__foto--foto,
.vendidos__foto--foto {
  position: relative;
  overflow: hidden;
  background: var(--color-superficie);
}

.product__photo--foto img,
.inventario__miniatura--foto img,
.line__foto--foto img,
.detalle__foto--foto img,
.vendidos__foto--foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.stepper {
  display: inline-flex;
  align-items: center;
  border: var(--borde-fino) solid var(--color-borde-control);
  border-radius: var(--radio-control);
  background: var(--color-superficie);
}

.stepper__button {
  display: grid;
  place-items: center;
  width: var(--toque-min);
  height: var(--toque-min);
  border: 0;
  border-radius: var(--radio-control);
  background: none;
  color: var(--color-tinta);
}

.stepper__button .icono {
  width: var(--icono);
  height: var(--icono);
  stroke-width: var(--icono-trazo-fino);
}

.stepper__button:hover:not(:disabled) {
  background: var(--color-hundido);
}

.stepper__button:disabled {
  background: none;
  color: var(--color-borde-control);
}

.stepper__value {
  min-width: var(--espacio-6);
  font-weight: var(--peso-extra);
}

.stepper__input {
  min-width: 0;
  border: 0;
  background: transparent;
  font-weight: var(--peso-extra);
}

.field {
  height: var(--control-alto);
  border-radius: var(--radio-control);
}

.toast {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  border-radius: var(--radio-control);
  font-weight: var(--peso-fuerte);
  pointer-events: none;
}

.toast__icono {
  width: var(--icono);
  height: var(--icono);
}

.sell {
  gap: var(--espacio-3);
}

.sell__main {
  display: grid;
  align-content: start;
  gap: var(--espacio-2);
}

.sell__main .chips {
  padding-block: var(--espacio-1);
}

.catalog {
  gap: var(--espacio-2);
}

.product {
  position: relative;
  display: block;
  padding: 0;
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-superficie);
}

.product[data-picked="true"] {
  border-color: var(--color-acento-fuerte);
  box-shadow: inset 0 0 0 var(--borde-fino) var(--color-acento-fuerte);
}

.product__toque {
  display: grid;
  grid-template-columns: var(--foto) minmax(0, 1fr);
  grid-template-areas:
    "foto nombre"
    "foto meta"
    "foto precio";
  align-items: center;
  column-gap: var(--espacio-3);
  row-gap: var(--espacio-1);
  width: 100%;
  min-height: 100%;
  padding: var(--espacio-3);
  border: 0;
  border-radius: var(--radio-tarjeta);
  background: none;
  color: var(--color-tinta);
  text-align: left;
}

.product__toque:active:not(:disabled) {
  background: var(--color-hundido);
}

.product__toque:focus-visible {
  outline-offset: calc(-1 * var(--foco-ancho));
}

.product__toque:disabled {
  cursor: default;
}

.product--agotado .product__toque {
  cursor: not-allowed;
}

.product--agotado .product__photo {
  opacity: var(--opacidad-apagado);
}

.product--agotado .product__name,
.product--agotado .product__price {
  color: var(--color-tinta-tenue);
}

.product__photo {
  grid-area: foto;
  align-self: start;
  width: var(--foto);
  height: var(--foto);
  border-radius: var(--radio-control);
}

.product__name {
  grid-area: nombre;
  font-size: var(--texto-m);
  font-weight: var(--peso-normal);
  line-height: var(--interlinea-ajustada);
  overflow-wrap: anywhere;
}

.product__meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-1) var(--espacio-2);
}

.product__price {
  grid-area: precio;
  min-height: var(--toque-min);
  display: flex;
  align-items: center;
  font-size: var(--texto-m);
  font-weight: var(--peso-extra);
}

.product__unit {
  color: var(--color-tinta-suave);
  font-size: var(--texto-s);
  font-weight: var(--peso-medio);
}

.product__cuenta {
  display: none;
}

.product__stepper {
  position: absolute;
  right: var(--espacio-3);
  bottom: var(--espacio-3);
}

.product[data-picked="true"] .product__stepper {
  border-color: var(--color-acento-fuerte);
  background: var(--color-acento-fondo);
}

.canasta,
.cobro {
  display: flex;
  flex-direction: column;
}

.canasta .panel__head .button--link {
  text-decoration: underline;
  font-weight: var(--peso-fuerte);
}

.canasta__nota {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-2);
  margin: var(--espacio-3) var(--espacio-4) 0;
  padding: var(--espacio-2) var(--espacio-3);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-control);
  background: var(--color-hundido);
  color: var(--color-tinta-suave);
  font-size: var(--texto-s);
}

.canasta__vacia {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--espacio-2);
  flex: 1 1 auto;
  padding: var(--espacio-8) var(--espacio-5);
  text-align: center;
}

.canasta__codigo {
  width: var(--icono-xl);
  height: var(--icono-xl);
  color: var(--color-tinta-tenue);
  stroke-width: var(--icono-trazo-tenue);
}

.canasta__llamado {
  font-size: var(--texto-m);
  font-weight: var(--peso-titulo);
  line-height: var(--interlinea-ajustada);
}

.canasta__vacia .empty {
  padding: 0;
}

.line {
  gap: var(--espacio-2);
  padding: var(--espacio-3) var(--espacio-4);
  border-bottom: var(--borde-fino) solid var(--color-borde);
}

.line__top {
  align-items: center;
  gap: var(--espacio-2);
}

.line__foto {
  flex: none;
  width: var(--foto-s);
  height: var(--foto-s);
  border-radius: var(--radio-etiqueta);
}

.line__foto .sin-foto__icono,
.detalle__foto .sin-foto__icono {
  width: var(--icono-s);
  height: var(--icono-s);
}

.line__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--texto-s);
  font-weight: var(--peso-medio);
}

.line__quitar {
  flex: none;
  width: var(--toque-min);
  min-height: var(--toque-min);
  padding: 0;
  border-color: var(--color-peligro);
  color: var(--color-peligro);
}

.line__quitar:hover {
  background: var(--color-peligro-fondo);
}

.line__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: var(--espacio-2);
}

.line__campo {
  display: grid;
  gap: var(--espacio-1);
  min-width: 0;
}

.line__rotulo {
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
}

.line__campo .stepper {
  display: grid;
  grid-template-columns: var(--toque-min) minmax(0, 1fr) var(--toque-min);
  width: 100%;
}

.line__campo .stepper__input {
  width: 100%;
  height: var(--toque-min);
  border-inline: 0;
  text-align: center;
}

.line__campo .field {
  display: flex;
  width: 100%;
  height: calc(var(--toque-min) + 2 * var(--borde-fino));
}

.line__campo .field__input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  font-weight: var(--peso-extra);
}

.line__total {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0 var(--espacio-1);
  color: var(--color-tinta);
  font-size: var(--texto-s);
  font-weight: var(--peso-medio);
  white-space: normal;
}

.line__resultado {
  font-weight: var(--peso-extra);
  white-space: nowrap;
}

.canasta__pie {
  gap: var(--espacio-2);
  padding: var(--espacio-3) var(--espacio-4);
  border-top: var(--borde-fino) solid var(--color-borde);
  background: var(--color-superficie);
}

.cobro__cabeza {
  justify-content: flex-start;
  gap: var(--espacio-2);
}

.cobro__volver {
  width: var(--toque-min);
  padding: 0;
  border-color: transparent;
}

.cobro__volver .icono {
  width: var(--icono);
  height: var(--icono);
}

.cobro__cuerpo {
  flex: 1 1 auto;
  align-content: start;
}

.cobro__encabezado {
  display: grid;
  gap: var(--espacio-1);
  padding-bottom: var(--espacio-3);
  border-bottom: var(--borde-fino) solid var(--color-borde);
}

.cobro__total {
  align-items: center;
}

.cobro__ref {
  margin: 0;
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cobro__total .sum__value {
  font-size: var(--texto-xl);
  font-weight: var(--peso-extra);
}

.cobro__rotulo {
  margin-bottom: var(--espacio-2);
}

.methods,
.sell__side .methods {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espacio-2);
}

.method {
  position: relative;
  justify-items: center;
  align-content: center;
  gap: var(--espacio-2);
  min-height: var(--metodo-alto);
  padding: var(--espacio-2) var(--espacio-1);
  border: var(--borde-fino) solid var(--color-borde-control);
  border-radius: var(--radio-control);
  background: var(--color-superficie);
  color: var(--color-tinta);
  text-align: center;
}

.method:hover {
  border-color: var(--color-tinta);
}

.method__icon {
  width: var(--icono);
  height: var(--icono);
}

.method__nombre {
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlinea-ajustada);
}

.method__state {
  position: absolute;
  top: var(--espacio-1);
  right: var(--espacio-1);
  display: none;
  place-items: center;
  width: var(--icono-s);
  height: var(--icono-s);
  border-radius: var(--radio-pastilla);
  background: var(--color-ingresos);
  color: var(--color-sobre-ingresos);
}

.method__state .icono {
  width: var(--espacio-3);
  height: var(--espacio-3);
  stroke-width: var(--borde-marca);
}

.method[aria-pressed="true"] {
  padding: calc(var(--espacio-2) - var(--borde-fino)) calc(var(--espacio-1) - var(--borde-fino));
  border: var(--borde-fuerte) solid var(--color-ingresos);
  background: var(--color-superficie);
}

.method[aria-pressed="true"] .method__state {
  display: grid;
}

.cobro__vende {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-s);
}

.actionbar {
  border-radius: var(--radio-control);
}

.home__columnas {
  display: grid;
  gap: var(--espacio-3);
}

.home__columna {
  display: grid;
  align-content: start;
  gap: var(--espacio-3);
  min-width: 0;
}

.home .cifra {
  grid-row: auto;
  grid-template-rows: none;
  row-gap: var(--espacio-2);
}

.home .cifra > *,
.home .cifra .variacion {
  grid-row: auto;
  margin-bottom: 0;
}

.home__ventas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
}

.home__cifra {
  font-size: var(--texto-2xl);
}

.home__rotulo {
  color: var(--color-tinta-suave);
  font-size: var(--texto-s);
}

.home__hoy .button {
  margin-top: var(--espacio-1);
}

.home__cifras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-3);
  padding: var(--espacio-4);
}

.home__menor {
  padding: var(--espacio-3);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
}

.home__estrella {
  font-size: var(--texto-m);
  font-weight: var(--peso-extra);
  line-height: var(--interlinea-ajustada);
  overflow-wrap: anywhere;
}

.home__cuenta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
  padding-inline: var(--espacio-1);
}

.home__saludo {
  color: var(--color-tinta-suave);
  font-size: var(--texto-s);
}

.home__atencion .home__dato {
  padding-inline: var(--espacio-4);
  border-top: 0;
}

.home__dato {
  align-items: center;
  padding-block: var(--espacio-2);
  border-block: var(--borde-fino) solid var(--color-borde);
}

.home__dato .sum__value {
  font-size: var(--texto-2xl);
  font-weight: var(--peso-extra);
}

.home__clave {
  justify-content: center;
  color: var(--color-tinta-suave);
  text-decoration: underline;
}

.atajos li + li {
  border-top: var(--borde-fino) solid var(--color-borde);
}

.shortcut {
  display: grid;
  grid-template-columns: var(--icono-l) minmax(0, 1fr) auto var(--icono-s);
  align-items: center;
  gap: var(--espacio-3);
  min-height: var(--fila-alto);
  padding: var(--espacio-2) var(--espacio-4);
  border: 0;
  color: var(--color-tinta);
  font-weight: var(--peso-medio);
}

.shortcut:focus-visible {
  outline-offset: calc(-1 * var(--foco-ancho));
}

.shortcut__icono {
  display: grid;
  place-items: center;
  width: var(--icono-l);
  height: var(--icono-l);
  border: var(--borde-medio) solid transparent;
  border-radius: var(--radio-pastilla);
}

.shortcut--minimo .shortcut__icono {
  border-color: var(--color-alerta-borde);
  background: var(--color-alerta-fondo);
  color: var(--color-alerta);
}

.shortcut--agotado .shortcut__icono {
  border-color: var(--color-peligro);
  background: var(--color-peligro);
  color: var(--color-sobre-peligro);
}

.shortcut--almacen .shortcut__icono {
  border-style: dashed;
  border-color: var(--color-borde-control);
}

.shortcut__count {
  min-width: 0;
  padding: 0;
  background: none;
  font-size: var(--texto-l);
  font-weight: var(--peso-extra);
  text-align: right;
}

.shortcut__sigue {
  color: var(--color-tinta-tenue);
}

.balance,
.inventario-vista,
.compras,
.administrar,
.estadisticas,
.clientes,
.home {
  display: grid;
  align-content: start;
  gap: var(--espacio-3);
}

.balance .view__head,
.inventario-vista .view__head,
.compras .view__head,
.administrar .view__head,
.estadisticas .view__head,
.clientes .view__head,
.home .view__head,
.sell .view__head {
  margin-bottom: 0;
}

.barra-de-fecha {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}

.fecha-del-dia {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--toque-min);
  padding: 0 var(--espacio-3);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-control);
  background: var(--color-superficie);
  font-weight: var(--peso-fuerte);
}

.balance__fecha {
  font-variant-numeric: tabular-nums;
}

.view__head > .barra-de-fecha {
  order: 1;
  flex: 1 1 100%;
}

.barra-de-fecha .periodo__paso {
  flex: none;
}

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--tarjeta-resumen-min), 1fr));
  gap: var(--espacio-3);
}

.tarjeta {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-width: 0;
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-superficie);
}

.tarjeta__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--toque-min);
  height: var(--toque-min);
  border-radius: var(--radio-pastilla);
  background: var(--color-ingresos-fondo);
  color: var(--color-ingresos);
}

.tarjeta__icono .icono {
  width: var(--icono);
  height: var(--icono);
}

.tarjeta--egresos .tarjeta__icono {
  background: var(--color-egresos-fondo);
  color: var(--color-egresos);
}

.tarjeta__datos {
  display: grid;
  gap: 0;
  min-width: 0;
}

.tarjeta__rotulo {
  color: var(--color-tinta-suave);
  font-size: var(--texto-s);
}

.tarjeta__valor {
  font-size: var(--texto-l);
  font-weight: var(--peso-extra);
  line-height: var(--interlinea-ajustada);
  overflow-wrap: anywhere;
}

.tarjeta__valor--vacio {
  color: var(--color-tinta-suave);
}

.tarjeta__nota {
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
}

.breakdown {
  display: grid;
  gap: 0 var(--espacio-6);
  margin: 0;
  padding: var(--espacio-1) var(--espacio-4);
}

.breakdown__row {
  display: grid;
  grid-template-columns: var(--icono-s) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) 0;
  border-bottom: var(--borde-fino) solid var(--color-borde);
}

.breakdown__row:last-child {
  border-bottom: 0;
}

.breakdown__row .amount {
  font-weight: var(--peso-extra);
}

.registros__cabeza,
.inventario__cabeza,
.clientes__cabeza {
  display: none;
}

.registros > .empty {
  padding: var(--espacio-6) var(--espacio-4);
}

.registros ul > li:last-child > .record,
.registros ul > li.record:last-child {
  border-bottom: 0;
}

.registros__total {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  color: var(--color-egresos);
  font-weight: var(--peso-extra);
}

.record {
  grid-template-columns: var(--icono-l) minmax(0, 1fr) auto;
  grid-template-areas:
    "icono concepto monto"
    "icono meta meta"
    "icono estado estado";
  column-gap: var(--espacio-3);
  row-gap: var(--espacio-1);
  min-height: var(--fila-alto);
  padding: var(--espacio-3) var(--espacio-4);
  border-bottom: var(--borde-fino) solid var(--color-borde);
  color: var(--color-tinta);
}

.record:focus-visible {
  outline-offset: calc(-1 * var(--foco-ancho));
}

.record__icono {
  grid-area: icono;
  display: grid;
  place-items: center;
  width: var(--icono-l);
  height: var(--icono-l);
  border-radius: var(--radio-pastilla);
  background: var(--color-ingresos-fondo);
  color: var(--color-ingresos);
}

.record__icono--egreso {
  background: var(--color-egresos-fondo);
  color: var(--color-egresos);
}

.record--anulada .record__icono {
  background: var(--color-hundido);
  color: var(--color-tinta-suave);
}

.record__concept {
  grid-area: concepto;
  font-weight: var(--peso-fuerte);
}

.record__meta {
  grid-area: meta;
  display: block;
  min-width: 0;
  font-size: var(--texto-s);
  font-variant-numeric: tabular-nums;
}

.record__dato {
  display: inline-block;
}

.record__dato:not(:last-child)::after {
  content: " ·";
  margin-right: var(--espacio-1);
}

.record__vacio {
  color: var(--color-tinta-tenue);
}

.record__amount {
  grid-area: monto;
  justify-self: end;
  font-size: var(--texto-m);
  font-weight: var(--peso-extra);
}

.record--anulada .record__concept,
.record__amount--anulada {
  color: var(--color-tinta-suave);
  text-decoration: line-through;
}

.record__anulada {
  grid-area: estado;
  justify-self: start;
  align-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--etiqueta-alto);
  padding: 0 var(--espacio-2);
  border-radius: var(--radio-etiqueta);
  background: var(--color-peligro-fondo);
  color: var(--color-peligro);
  font-size: var(--texto-xs);
  font-weight: var(--peso-extra);
}

.referencias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-3);
  flex: 1 1 100%;
  margin: 0;
}

.referencias__dato {
  display: grid;
  align-content: start;
  gap: var(--espacio-1);
  min-width: 0;
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-superficie);
}

.referencias__dato:only-child {
  grid-column: 1 / -1;
}

.referencias__dato dt {
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
}

.referencias__dato dt .icono {
  display: none;
}

.referencias__dato dd {
  color: var(--color-tinta-suave);
  font-size: var(--texto-l);
  font-weight: var(--peso-extra);
}

.referencias__valor {
  display: grid;
  gap: var(--espacio-1);
}

.referencias__falta {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--espacio-1);
  min-height: var(--etiqueta-alto);
  padding: var(--espacio-1) var(--espacio-2);
  border-radius: var(--radio-etiqueta);
  background: var(--color-alerta-fondo);
  color: var(--color-alerta);
  font-size: var(--texto-xs);
  font-weight: var(--peso-extra);
  line-height: var(--interlinea-ajustada);
}

.referencias__falta .icono {
  width: var(--espacio-3);
  height: var(--espacio-3);
}

.filtros {
  display: grid;
}

.filtros .chips {
  padding-block: var(--espacio-1);
}

.registros--inventario {
  overflow: visible;
  border: 0;
  background: none;
}

.inventario {
  display: grid;
  gap: var(--espacio-2);
}

.inventario__fila {
  display: grid;
  grid-template-columns: var(--foto) minmax(0, 1fr) auto;
  grid-template-areas:
    "foto nombre nombre"
    "foto aviso aviso"
    "foto existencia existencia"
    "foto precio margen";
  position: relative;
  align-items: center;
  column-gap: var(--espacio-3);
  row-gap: var(--espacio-1);
  width: 100%;
  padding: var(--espacio-3);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-superficie);
  color: var(--color-tinta);
  text-align: left;
}

.inventario__fila:hover {
  border-color: var(--color-borde-control);
}

.inventario__miniatura {
  grid-area: foto;
  align-self: start;
  display: grid;
  place-items: center;
  width: var(--foto);
  height: var(--foto);
  overflow: hidden;
  border-radius: var(--radio-control);
}

.inventario__nombre {
  grid-area: nombre;
  display: grid;
  gap: 0;
  font-size: var(--texto-m);
  font-weight: var(--peso-normal);
  line-height: var(--interlinea-ajustada);
  overflow-wrap: anywhere;
}

.inventario__codigo {
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
  font-variant-numeric: tabular-nums;
}

.inventario__aviso {
  grid-area: aviso;
}

.inventario__aviso:empty {
  display: none;
}

.inventario__precio {
  grid-area: precio;
  font-size: var(--texto-m);
  font-weight: var(--peso-extra);
}

.inventario__costo,
.inventario__ganancia,
.inventario__sin-almacen {
  display: none;
}

.inventario__margen {
  grid-area: margen;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: var(--etiqueta-alto);
  padding: 0 var(--espacio-2);
  border-radius: var(--radio-etiqueta);
  background: var(--color-ganancia-fondo);
  color: var(--color-ganancia);
  font-size: var(--texto-xs);
  font-weight: var(--peso-extra);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inventario__margen--perdida {
  background: var(--color-egresos-fondo);
  color: var(--color-egresos);
}

.inventario__margen--vacio {
  background: var(--color-hundido);
  color: var(--color-tinta-suave);
}

.inventario__existencia {
  grid-area: existencia;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-1) var(--espacio-2);
}

.sheet {
  gap: var(--espacio-4);
  padding: var(--espacio-4) var(--espacio-4) var(--espacio-6);
}

.sheet__head {
  align-items: center;
  gap: var(--espacio-3);
  margin: 0 calc(-1 * var(--espacio-4));
  padding: 0 var(--espacio-4) var(--espacio-3);
  border-bottom: var(--borde-fuerte) solid var(--color-borde);
}

.sheet__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--toque-min);
  height: var(--toque-min);
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
}

.sheet__icono .icono {
  width: var(--icono);
  height: var(--icono);
}

.sheet__titulos {
  flex: 1 1 auto;
  min-width: 0;
}

.sheet__title {
  font-size: var(--texto-l);
  font-weight: var(--peso-titulo);
  overflow-wrap: anywhere;
}

.sheet__note {
  color: var(--color-tinta-suave);
  font-size: var(--texto-s);
}

.sheet__cerrar {
  flex: none;
  width: var(--toque-min);
  min-height: var(--toque-min);
  padding: 0;
  border-color: transparent;
  background: none;
}

.sheet__cerrar:hover {
  background: none;
}

.sheet__cerrar .icono {
  width: var(--icono);
  height: var(--icono);
  padding: var(--espacio-1);
  border-radius: var(--radio-pastilla);
  background: var(--color-tinta);
  color: var(--color-sobre-tinta);
  stroke-width: var(--borde-marca);
}

.sheet__actions {
  gap: var(--espacio-2);
}

#hoja-de-venta .sheet__head {
  border-bottom-color: var(--color-ingresos);
}

#hoja-de-venta .sheet__icono {
  background: var(--color-ingresos-fondo);
  color: var(--color-ingresos);
}

#hoja-de-anular .sheet__icono {
  background: var(--color-peligro-fondo);
  color: var(--color-peligro);
}

.hoja-venta__concepto {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--texto-s);
  font-weight: var(--peso-extra);
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.resumen {
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-hundido);
}

.resumen__total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding-bottom: var(--espacio-3);
  border-bottom: var(--borde-fino) solid var(--color-borde);
}

.resumen__total .sum {
  display: grid;
  gap: 0;
}

.resumen__total .sum__label {
  font-size: var(--texto-s);
}

.resumen__total .sum__value {
  font-size: var(--texto-xl);
  font-weight: var(--peso-extra);
}

.resumen--anulada .resumen__total .sum__value {
  color: var(--color-tinta-suave);
  text-decoration: line-through;
}

.details {
  gap: var(--espacio-2) var(--espacio-4);
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-tarjeta);
  font-size: var(--texto-s);
}

.resumen .details {
  padding: 0;
  background: none;
}

.details--iconos dt {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}

.details dd {
  font-weight: var(--peso-fuerte);
  overflow-wrap: anywhere;
}

.details dd.amount {
  white-space: normal;
}

.detalle__titulo,
.ficha__titulo {
  margin-bottom: var(--espacio-2);
  font-size: var(--texto-s);
  font-weight: var(--peso-extra);
}

.detalle {
  display: grid;
  gap: var(--espacio-3);
}

.detalle__linea {
  display: grid;
  grid-template-columns: var(--foto-s) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espacio-3);
}

.detalle__foto {
  width: var(--foto-s);
  height: var(--foto-s);
  border-radius: var(--radio-etiqueta);
}

.detalle__datos,
.detalle__montos {
  display: grid;
  gap: 0;
  min-width: 0;
}

.detalle__montos {
  justify-items: end;
}

.detalle__nombre {
  font-size: var(--texto-s);
  overflow-wrap: anywhere;
}

.detalle__total {
  font-size: var(--texto-s);
  font-weight: var(--peso-extra);
}

.detalle__cantidad,
.detalle__unitario {
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
  font-variant-numeric: tabular-nums;
}

.sheet__actions--redondas {
  position: sticky;
  bottom: calc(-1 * var(--espacio-6));
  display: flex;
  justify-content: space-evenly;
  gap: var(--espacio-4);
  margin: 0 calc(-1 * var(--espacio-4)) calc(-1 * var(--espacio-6));
  padding: var(--espacio-3) var(--espacio-4) var(--espacio-4);
  border-top: var(--borde-fino) solid var(--color-borde);
  background: var(--color-superficie);
}

.redonda {
  display: grid;
  justify-items: center;
  gap: var(--espacio-1);
  min-width: var(--foto);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-tinta);
  font-size: var(--texto-s);
  font-weight: var(--peso-extra);
}

.redonda__icono {
  display: grid;
  place-items: center;
  width: var(--redonda);
  height: var(--redonda);
  border: var(--borde-medio) solid var(--color-tinta);
  border-radius: var(--radio-pastilla);
  background: var(--color-superficie);
}

.redonda__icono .icono {
  width: var(--icono);
  height: var(--icono);
}

.redonda:hover .redonda__icono {
  background: var(--color-hundido);
}

.redonda:focus-visible {
  outline-offset: var(--foco-separacion);
  border-radius: var(--radio-control);
}

.redonda--peligro {
  color: var(--color-peligro);
}

.redonda--peligro .redonda__icono {
  border-color: var(--color-peligro);
  background: var(--color-peligro-fondo);
}

.anular__venta {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-alerta-borde);
  border-radius: var(--radio-control);
  background: var(--color-peligro-fondo);
  color: var(--color-peligro);
}

.anular__venta .icono {
  width: var(--icono);
  height: var(--icono);
}

.anular__venta .sheet__concept {
  color: var(--color-tinta);
  font-size: var(--texto-s);
}

.anular__rotulo {
  margin-bottom: var(--espacio-1);
}

.chips--wrap {
  flex-wrap: wrap;
  overflow-x: visible;
}

.ficha__precio {
  font-size: var(--texto-xl);
  font-weight: var(--peso-extra);
}

.ficha__nota {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-2);
  font-size: var(--texto-s);
}

.galeria__sin-foto {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}

.galeria__muestra {
  flex: none;
  width: var(--foto-l);
  height: var(--foto-l);
  border-radius: var(--radio-control);
}

.galeria__vacia,
.galeria__sin-foto .galeria__vacia {
  padding: 0;
  text-align: left;
}

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--foto-l), 1fr));
  gap: var(--espacio-3);
}

.galeria__foto {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--espacio-2);
}

.galeria__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-control);
  background: var(--color-superficie);
}

.galeria__marca {
  position: absolute;
  top: var(--espacio-1);
  left: var(--espacio-1);
}

.galeria__acciones {
  display: grid;
  gap: var(--espacio-1);
}

.galeria__agregar {
  position: relative;
  border-style: dashed;
  cursor: pointer;
}

.galeria__agregar:focus-within {
  outline: var(--foco-ancho) solid var(--color-foco);
  outline-offset: var(--foco-separacion);
}

.galeria__confirmar {
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
  border: var(--borde-fino) solid var(--color-alerta-borde);
  border-radius: var(--radio-control);
  background: var(--color-peligro-fondo);
}

.ficha__bloque {
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
}

.ficha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-2);
  margin: 0;
}

.ficha__dato {
  display: grid;
  align-content: start;
  gap: 0;
  min-width: 0;
  padding: var(--espacio-2) var(--espacio-3);
  border: var(--borde-fino) solid transparent;
  border-radius: var(--radio-control);
}

.ficha__dato dt {
  display: flex;
  align-items: center;
  gap: var(--espacio-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
}

.ficha__dato dd {
  font-size: var(--texto-xl);
  font-weight: var(--peso-extra);
  line-height: var(--interlinea-ajustada);
  overflow-wrap: anywhere;
}

.ficha__dato--tienda {
  background: var(--color-disponible-fondo);
  color: var(--color-disponible);
}

.ficha__dato--minimo {
  border-color: var(--color-alerta-borde);
  background: var(--color-alerta-fondo);
  color: var(--color-alerta);
}

.ficha__dato--agotado {
  background: var(--color-peligro);
  color: var(--color-sobre-peligro);
}

.ficha__dato--almacen {
  border-style: dashed;
  border-color: var(--color-borde-control);
}

.historial,
.ajuste,
.costo {
  display: grid;
  gap: var(--espacio-2);
}

.historial__abrir {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espacio-3);
  width: 100%;
  min-height: var(--fila-alto);
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-hundido);
  color: var(--color-tinta);
  text-align: left;
}

.historial__abrir:hover {
  border-color: var(--color-borde-control);
}

.historial__icono .icono {
  width: var(--icono);
  height: var(--icono);
}

.historial__textos {
  display: grid;
  gap: 0;
}

.historial__titulo {
  font-weight: var(--peso-extra);
  text-decoration: underline;
}

.historial__nota {
  color: var(--color-tinta-suave);
  font-size: var(--texto-s);
}

.historial__lista {
  overflow: hidden;
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
}

.historial .record {
  min-height: 0;
  padding: var(--espacio-2) var(--espacio-3);
}

.historial .record:last-child {
  border-bottom: 0;
}

.historial .record__concept {
  font-size: var(--texto-s);
}

.historial .record__meta {
  font-size: var(--texto-xs);
}

.historial .record__amount {
  font-size: var(--texto-s);
}

.historial .record__amount--income {
  color: var(--color-disponible);
}

.historial .record__amount--expense {
  color: var(--color-tinta);
}

.movimiento .record__icono {
  width: var(--foto-s);
  height: var(--foto-s);
}

.movimiento--tienda .record__icono {
  background: var(--color-disponible-fondo);
  color: var(--color-disponible);
}

.movimiento--almacen .record__icono {
  border: var(--borde-fino) dashed var(--color-borde-control);
  background: var(--color-superficie);
  color: var(--color-tinta);
}

.costo__titulo {
  margin: 0;
  color: var(--color-tinta);
  font-size: var(--texto-s);
  font-weight: var(--peso-extra);
  letter-spacing: 0;
  text-transform: none;
}

.costo .details {
  background: var(--color-hundido);
}

.costo__manual {
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
}

.ajuste__sistema {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  color: var(--color-tinta-suave);
  font-size: var(--texto-s);
}

.ajuste__sistema strong {
  color: var(--color-tinta);
  font-size: var(--texto-m);
  font-weight: var(--peso-extra);
}

.ficha__desactivar {
  justify-content: center;
  color: var(--color-peligro);
  text-decoration: underline;
}

.formulario__grupo {
  display: grid;
  gap: var(--espacio-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.formulario__grupo legend {
  margin-bottom: var(--espacio-2);
  padding: 0;
}

.formulario__grupo + .formulario__grupo {
  padding-top: var(--espacio-3);
  border-top: var(--borde-fino) solid var(--color-borde);
}

.formulario__minimos .icono {
  color: var(--color-tinta-suave);
}

.compras__columnas {
  display: grid;
  gap: var(--espacio-3);
}

.compras__buscar {
  display: grid;
  align-content: start;
  gap: var(--espacio-2);
  min-width: 0;
}

.compra__ayuda {
  padding: var(--espacio-2) var(--espacio-1);
  font-size: var(--texto-s);
}

.compra__resultados {
  display: grid;
  overflow: hidden;
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-superficie);
}

.compra__resultados--plano {
  border: 0;
  border-radius: 0;
}

.compra__resultado {
  display: grid;
  grid-template-columns: var(--miniatura-lado) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-2) var(--espacio-4);
  border-bottom: var(--borde-fino) solid var(--color-borde);
}

.compra__resultado:last-child {
  border-bottom: 0;
}

.compra__resultados--plano .compra__resultado:last-child {
  border-bottom: var(--borde-fino) solid var(--color-borde);
}

.compra__resultado .inventario__miniatura {
  grid-area: auto;
  width: var(--miniatura-lado);
  height: var(--miniatura-lado);
}

.compra__resultado .sin-foto__icono {
  width: var(--icono);
  height: var(--icono);
}

.compra__datos {
  display: grid;
  gap: var(--espacio-1);
  min-width: 0;
}

.compra__existencia {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-1) var(--espacio-3);
  font-size: var(--texto-xs);
}

.compra__lugar {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  font-variant-numeric: tabular-nums;
}

.compra__lugar .icono {
  width: var(--espacio-3);
  height: var(--espacio-3);
}

.compra__agregado:disabled,
.compra__agregado:disabled:hover {
  border-color: var(--color-borde);
  background: var(--color-hundido);
  color: var(--color-tinta);
  cursor: default;
}

.compra .panel__title,
.administrar__titulo,
.canasta__titulo {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}

.compra__campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: var(--espacio-3);
}

.compra__campos .chips {
  align-self: end;
}

.compra__iva {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--toque-min);
  font-size: var(--texto-s);
}

.compra__iva input {
  width: var(--icono-s);
  height: var(--icono-s);
  accent-color: var(--color-tinta);
}

.compra__vista {
  display: block;
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-control);
  background: var(--color-hundido);
}

.compra__pie {
  border-top: var(--borde-fino) solid var(--color-borde);
}

.compra__pie .sum__value {
  font-size: var(--texto-xl);
  font-weight: var(--peso-extra);
}

.transferencia__ruta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
  margin: 0;
  padding: var(--espacio-2) var(--espacio-4);
  border-bottom: var(--borde-fino) solid var(--color-borde);
  background: var(--color-hundido);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
}

.transferencia__lugar {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  min-height: var(--etiqueta-alto);
  padding: 0 var(--espacio-2);
  border: var(--borde-fino) solid transparent;
  border-radius: var(--radio-etiqueta);
}

.transferencia__lugar--almacen {
  border-style: dashed;
  border-color: var(--color-borde-control);
  background: var(--color-superficie);
}

.transferencia__lugar--tienda {
  background: var(--color-disponible-fondo);
  color: var(--color-disponible);
}

.transferencia__flecha {
  color: var(--color-tinta-suave);
}

.transferencia__hay {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
}

.transferencia__nota {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-2);
  font-size: var(--texto-s);
}

.administrar .chips--fila,
.estadisticas .chips--fila {
  padding-block: 0;
}

.administrar__grid {
  display: grid;
  align-items: start;
  gap: var(--espacio-3);
}

.administrar__nuevo {
  width: auto;
  min-height: var(--toque-min);
  justify-content: center;
  font-size: var(--texto-s);
}

.administrar__subtitulo {
  border-top: var(--borde-fino) solid var(--color-borde);
}

.lista > .empty {
  padding: var(--espacio-5) var(--espacio-4);
}

.lista ul > li:last-child > .record,
.lista ul > li.record:last-child {
  border-bottom: 0;
}

.usuario__icono {
  background: var(--color-hundido);
  color: var(--color-tinta);
}

.usuario__icono--administrador {
  background: var(--color-tinta);
  color: var(--color-sobre-tinta);
}

.usuario__estado {
  font-size: var(--texto-s);
}

.aviso__icono--anulacion {
  background: var(--color-hundido);
  color: var(--color-tinta-suave);
}

.categorias {
  display: grid;
}

.categoria {
  display: grid;
  grid-template-columns: var(--foto-s) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-2) var(--espacio-4);
  border-bottom: var(--borde-fino) solid var(--color-borde);
}

.categoria__muestra {
  width: var(--foto-s);
  height: var(--foto-s);
  border-radius: var(--radio-etiqueta);
}

.categoria__cuenta {
  font-weight: var(--peso-extra);
}

.en-linea {
  display: grid;
  gap: var(--espacio-2);
}

.metodo-fila__icono {
  display: grid;
  place-items: center;
  width: var(--miniatura-lado);
  height: var(--miniatura-lado);
  border-radius: var(--radio-control);
  background: var(--color-hundido);
}

.metodo-fila__icono .icono {
  width: var(--icono);
  height: var(--icono);
}

.metodo-fila--inactivo .line__name,
.metodo-fila--inactivo .metodo-fila__icono {
  color: var(--color-tinta-suave);
}

.metodo-fila__estado .tag--warehouse {
  padding: 0 var(--espacio-2);
  border: var(--borde-fino) dashed var(--color-borde-control);
}

.recibo-muestra__panel .panel__body {
  background: var(--color-hundido);
}

.telegram .costo__manual {
  border: 0;
  padding: 0;
}

.estadisticas__controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-3);
}

.estadisticas__controles .chips--segmento {
  flex: 1 1 auto;
}

.estadisticas__controles .chips--segmento .chip {
  flex: 1 1 0;
}

.periodo {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
}

.periodo__paso {
  width: var(--toque-min);
  padding: 0;
  border-color: var(--color-borde-control);
}

.periodo__paso .icono {
  width: var(--icono);
  height: var(--icono);
}

.periodo__titulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-width: var(--periodo-ancho-min);
  font-weight: var(--peso-extra);
  font-variant-numeric: tabular-nums;
}

.periodo__titulo .icono {
  color: var(--color-tinta-suave);
}

.cifras,
.estadisticas__listas,
.estadisticas__lado {
  display: grid;
  align-items: start;
  align-content: start;
  gap: var(--espacio-3);
}

.cifra {
  display: grid;
  align-content: start;
  gap: var(--espacio-2);
  padding: var(--espacio-4);
}

.cifra__titulo {
  font-size: var(--texto-s);
  font-weight: var(--peso-extra);
}

.cifra__valor {
  font-size: var(--texto-xl);
  font-weight: var(--peso-extra);
  line-height: var(--interlinea-ajustada);
}

.variacion {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--espacio-1);
  min-height: var(--etiqueta-alto);
  padding: 0 var(--espacio-2);
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-extra);
  font-variant-numeric: tabular-nums;
}

.variacion--sube {
  background: var(--color-ingresos-fondo);
  color: var(--color-ingresos);
}

.variacion--baja {
  background: var(--color-egresos-fondo);
  color: var(--color-egresos);
}

.variacion .icono {
  width: var(--espacio-3);
  height: var(--espacio-3);
  stroke-width: var(--borde-marca);
}

.cifra__nota {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--espacio-1);
  min-height: var(--etiqueta-alto);
  padding: var(--espacio-1) var(--espacio-2);
  border-radius: var(--radio-etiqueta);
  background: var(--color-alerta-fondo);
  color: var(--color-alerta);
  font-size: var(--texto-xs);
  font-weight: var(--peso-extra);
}

.cifra__nota .icono {
  width: var(--espacio-3);
  height: var(--espacio-3);
}

.cifra__grafico {
  padding-top: var(--espacio-2);
}

.cifra__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-4);
  margin: 0;
  padding-top: var(--espacio-3);
  border-top: var(--borde-fino) solid var(--color-borde);
}

.cifra__dato dt {
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
}

.cifra__dato dd {
  font-size: var(--texto-m);
  font-weight: var(--peso-extra);
}

.cifra__dato:last-child {
  text-align: right;
}

.grafico__lienzo {
  display: block;
  width: 100%;
  height: var(--grafico-alto);
  overflow: visible;
}

.grafico__barra,
.grafico__ganancia {
  fill: var(--color-grafico-barra);
}

.grafico__barra--mayor,
.grafico__ganancia--mayor {
  fill: var(--color-ingresos);
}

.grafico__perdida {
  fill: var(--color-egresos);
}

.grafico__base {
  stroke: var(--color-borde-control);
  stroke-width: var(--borde-fino);
  vector-effect: non-scaling-stroke;
}

.grafico__etiquetas {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  padding-top: var(--espacio-1);
  color: var(--color-tinta-suave);
  font-size: var(--texto-xxs);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.grafico__etiqueta--mayor {
  color: var(--color-tinta);
  font-weight: var(--peso-extra);
}

.grafico__leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-1) var(--espacio-4);
  padding-top: var(--espacio-2);
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
}

.grafico__clave {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
}

.grafico__muestra {
  width: var(--espacio-3);
  height: var(--espacio-3);
  border-radius: var(--radio-etiqueta);
  background: var(--color-ingresos);
}

.grafico__muestra--perdida {
  background: var(--color-egresos);
}

.estadisticas__vacio {
  padding-block: var(--espacio-2);
}

.top__columnas {
  display: grid;
  align-items: start;
}

.top__columna {
  min-width: 0;
}

.top__columna + .top__columna,
.top__grupo + .top__grupo {
  border-top: var(--borde-fino) solid var(--color-borde);
}

.top__grupo {
  padding: var(--espacio-3) var(--espacio-4) var(--espacio-1);
}

.top__rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  min-height: var(--etiqueta-alto);
  padding: 0 var(--espacio-2);
  border-radius: var(--radio-pastilla);
  background: var(--color-acento-fondo);
  font-size: var(--texto-xs);
  font-weight: var(--peso-extra);
}

.top__rotulo .icono {
  width: var(--espacio-3);
  height: var(--espacio-3);
  color: var(--color-acento-fuerte);
}

.top__vacio {
  padding: var(--espacio-2) 0 var(--espacio-3);
  color: var(--color-tinta-suave);
  font-size: var(--texto-s);
}

.top__total {
  display: grid;
  gap: 0;
  padding: var(--espacio-3) var(--espacio-4);
  border-bottom: var(--borde-fino) solid var(--color-borde);
}

.top__cifra {
  font-size: var(--texto-xl);
  font-weight: var(--peso-extra);
}

.top__pie {
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
}

.ranking__fila {
  display: grid;
  grid-template-columns: var(--foto-s) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-2) 0;
  border-bottom: var(--borde-fino) solid var(--color-borde);
}

.ranking__fila:last-child {
  border-bottom: 0;
}

.vendidos__foto,
.ranking__persona {
  display: grid;
  place-items: center;
  width: var(--foto-s);
  height: var(--foto-s);
  overflow: hidden;
  border-radius: var(--radio-etiqueta);
}

.vendidos__foto .sin-foto__icono {
  width: var(--icono);
  height: var(--icono);
}

.ranking__persona {
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
}

.ranking--personas {
  padding: 0 var(--espacio-4);
}

.ranking__nombre {
  display: grid;
  gap: 0;
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlinea-ajustada);
  overflow-wrap: anywhere;
}

.ranking__sub {
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-normal);
  line-height: var(--interlinea-normal);
}

.ranking__datos {
  display: grid;
  justify-items: end;
  gap: 0;
}

.ranking__principal {
  font-size: var(--texto-s);
  font-weight: var(--peso-extra);
}

.ranking__principal--dinero {
  color: var(--color-ganancia);
}

.ranking__detalle {
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
}

.reparto {
  display: grid;
  padding: var(--espacio-1) var(--espacio-4) var(--espacio-2);
}

.reparto__fila {
  display: grid;
  grid-template-columns: var(--icono-s) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-3) 0;
  border-bottom: var(--borde-fino) solid var(--color-borde);
}

.reparto__fila:last-child {
  border-bottom: 0;
}

.reparto__nombre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--espacio-2);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
}

.reparto__ventas {
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-normal);
  font-variant-numeric: tabular-nums;
}

.reparto__monto {
  font-weight: var(--peso-extra);
}

.reparto__barra {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: var(--progreso-alto);
  overflow: hidden;
  border-radius: var(--radio-pastilla);
  background: var(--color-presionado);
}

.reparto__relleno {
  fill: var(--color-ingresos);
}

.vendidos__cabeza {
  display: none;
}

.vendidos__fila {
  display: grid;
  grid-template-columns: var(--foto-s) minmax(0, 1fr) auto;
  grid-template-areas:
    "foto nombre venta"
    "foto cantidad ganancia";
  align-items: center;
  column-gap: var(--espacio-3);
  row-gap: 0;
  padding: var(--espacio-2) var(--espacio-4);
  border-bottom: var(--borde-fino) solid var(--color-borde);
}

.vendidos__fila:last-child {
  border-bottom: 0;
}

.vendidos__fila .vendidos__foto {
  grid-area: foto;
}

.vendidos__nombre {
  grid-area: nombre;
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlinea-ajustada);
  overflow-wrap: anywhere;
}

.vendidos__cantidad {
  grid-area: cantidad;
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
}

.vendidos__venta {
  grid-area: venta;
  justify-self: end;
  font-size: var(--texto-s);
  font-weight: var(--peso-extra);
}

.vendidos__ganancia {
  grid-area: ganancia;
  justify-self: end;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 var(--espacio-1);
  color: var(--color-ganancia);
  font-size: var(--texto-xs);
  font-weight: var(--peso-extra);
}

.vendidos__ganancia--perdida {
  color: var(--color-egresos);
}

.vendidos__rotulo {
  font-weight: var(--peso-normal);
}

.vendidos__incompleta {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  color: var(--color-alerta);
  white-space: nowrap;
}

.vendidos__incompleta .icono {
  width: var(--espacio-3);
  height: var(--espacio-3);
}

.chips--subrayadas {
  gap: 0;
  padding-block: 0;
  border-bottom: var(--borde-fino) solid var(--color-borde);
}

.chips--subrayadas .chip,
.chips--subrayadas .chip:hover {
  flex: 1 1 0;
  border: 0;
  border-bottom: var(--borde-marca) solid transparent;
  border-radius: 0;
  background: none;
  color: var(--color-tinta-suave);
}

.chips--subrayadas .chip:hover {
  color: var(--color-tinta);
}

.chips--subrayadas .chip[aria-pressed="true"],
.chips--subrayadas .chip[aria-pressed="true"]:hover {
  border-bottom-color: var(--color-tinta);
  background: none;
  color: var(--color-tinta);
}

.chips--subrayadas .chip:focus-visible {
  outline-offset: calc(-1 * var(--foco-ancho));
}

.secciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-3);
}

.seccion {
  display: grid;
  align-content: space-between;
  justify-items: start;
  gap: var(--espacio-2);
  width: 100%;
  min-height: var(--seccion-alto);
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-borde-control);
  border-radius: var(--radio-tarjeta);
  background: var(--color-superficie);
  color: var(--color-tinta);
  font-weight: var(--peso-fuerte);
  text-align: left;
}

.seccion__icono {
  display: grid;
  place-items: center;
  width: var(--toque-min);
  height: var(--toque-min);
  border-radius: var(--radio-control);
  background: var(--color-hundido);
}

.seccion__icono .icono {
  width: var(--icono);
  height: var(--icono);
}

.seccion[aria-current="page"] {
  border-color: var(--color-acento-fuerte);
  background: var(--color-acento-fondo);
}

.seccion[aria-current="page"] .seccion__icono {
  background: var(--color-acento);
  color: var(--color-sobre-acento);
}

@media (min-width: 30rem) {
  .en-linea {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

@media (max-width: 59.99rem) {
  .sell[data-step="confirm"] .canasta,
  .sell[data-step="pay"] .cobro {
    overflow: visible;
  }

  .sell[data-step="confirm"] .canasta__pie,
  .sell[data-step="pay"] .canasta__pie {
    position: sticky;
    bottom: calc(var(--barra-inferior-alto) + var(--espacio-5) + env(safe-area-inset-bottom, 0px));
    z-index: var(--capa-barra);
    border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta);
    box-shadow: var(--sombra-flotante);
  }

  .canasta--vacia .canasta__pie {
    display: none;
  }

  body:has(:is(input:not([type="checkbox"], [type="radio"], [type="file"]), textarea):focus) :is(.nav, .actionbar) {
    display: none;
  }

  body:has(:is(input:not([type="checkbox"], [type="radio"], [type="file"]), textarea):focus) .canasta__pie {
    position: static;
    box-shadow: none;
  }

  .grafico__etiquetas:has(li:nth-child(15)) li:nth-child(even) .grafico__dia {
    visibility: hidden;
  }
}

@media (min-width: 60rem) {
  :root {
    --control-alto: var(--control-alto-pc);
    --toque-min: var(--toque-min-pc);
    --accion-alto: var(--accion-alto-pc);
    --fila-alto: var(--fila-alto-pc);
  }

  body {
    background: var(--color-superficie);
    font-size: var(--texto-s);
  }

  .strip {
    display: none;
  }

  .shell {
    grid-template-columns: var(--menu-ancho) minmax(0, 1fr);
  }

  .nav {
    top: 0;
    gap: var(--espacio-1);
    height: var(--pantalla-alto);
    padding: var(--espacio-4) var(--espacio-3);
    overflow-y: auto;
    border-right: var(--borde-fino) solid var(--color-borde);
    background: var(--color-superficie);
  }

  .nav__marca {
    display: block;
    padding-bottom: var(--espacio-3);
  }

  .nav__logo {
    width: 100%;
    height: auto;
  }

  .persona {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-2);
    border-block: var(--borde-fino) solid var(--color-borde);
    line-height: var(--interlinea-ajustada);
  }

  .persona__icono {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--espacio-8);
    height: var(--espacio-8);
    border-radius: var(--radio-pastilla);
    background: var(--color-acento-fondo);
    color: var(--color-acento-fuerte);
  }

  .persona__datos {
    display: grid;
    min-width: 0;
  }

  .persona__nombre {
    overflow: hidden;
    font-weight: var(--peso-extra);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .persona__rol {
    color: var(--color-tinta-suave);
    font-size: var(--texto-xs);
  }

  .nav__grupo {
    display: block;
    padding: var(--espacio-3) var(--espacio-2) var(--espacio-1);
    color: var(--color-tinta-suave);
    font-size: var(--texto-xxs);
    font-weight: var(--peso-extra);
    letter-spacing: var(--tracking-mayus);
    text-transform: uppercase;
  }

  .nav__item {
    min-height: var(--menu-item-alto);
    gap: var(--espacio-3);
    padding: 0 var(--espacio-3);
    border-radius: var(--radio-etiqueta);
    color: var(--color-tinta-suave);
    font-size: var(--texto-s);
    font-weight: var(--peso-medio);
  }

  .nav__icon {
    width: var(--icono-s);
    height: var(--icono-s);
  }

  .nav__item:hover {
    background: var(--color-hundido);
    color: var(--color-tinta);
  }

  .nav__item[aria-current="page"],
  .nav__item[aria-current="page"]:hover {
    background: var(--color-acento-fondo);
    color: var(--color-tinta);
    font-weight: var(--peso-extra);
    box-shadow: inset var(--borde-marca) 0 0 var(--color-acento);
  }

  .nav--con-mas .nav__item--extra {
    display: flex;
  }

  .nav--con-mas .nav__mas {
    display: none;
  }

  .nav__salir {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--espacio-3);
    width: 100%;
    height: auto;
    min-height: var(--menu-item-alto);
    margin-top: auto;
    padding: 0 var(--espacio-3);
    border: 0;
    border-radius: var(--radio-etiqueta);
    background: none;
    font-size: var(--texto-s);
    font-weight: var(--peso-fuerte);
  }

  .nav__salir .icono {
    width: var(--icono-s);
    height: var(--icono-s);
  }

  .nav__salir span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .nav__salir:hover {
    background: var(--color-peligro-fondo);
  }

  .view {
    padding: 0 var(--espacio-6) var(--espacio-10);
  }

  .view__head {
    position: sticky;
    top: 0;
    z-index: var(--capa-barra);
    min-height: var(--cabeza-alto);
    margin: 0 calc(-1 * var(--espacio-6));
    padding: var(--espacio-2) var(--espacio-6);
    border-bottom: var(--borde-fino) solid var(--color-borde);
    background: var(--color-superficie);
  }

  .view__title {
    font-size: var(--texto-xl);
  }

  .view__acciones .rate {
    position: static;
  }

  .rate {
    grid-auto-flow: column;
    align-items: baseline;
    gap: var(--espacio-2);
    padding: 0 var(--espacio-3);
  }

  .rate__value {
    font-size: var(--texto-m);
  }

  .balance,
  .inventario-vista,
  .compras,
  .administrar,
  .estadisticas,
  .clientes,
  .home {
    gap: var(--espacio-4);
  }

  .balance > :nth-child(2),
  .inventario-vista > :nth-child(2),
  .compras > :nth-child(2),
  .administrar > :nth-child(2),
  .estadisticas > :nth-child(2),
  .clientes > :nth-child(2),
  .home > :nth-child(2) {
    margin-top: var(--espacio-1);
  }

  .panel__title {
    font-size: var(--texto-m);
  }

  .buscador__codigo {
    display: block;
  }

  .search:not(:placeholder-shown) ~ .buscador__codigo {
    display: none;
  }

  .chips {
    flex-wrap: wrap;
  }

  .chips--fila {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .chip {
    min-height: var(--chip-alto);
    padding: 0 var(--espacio-3);
    border-color: var(--color-borde-control);
    border-radius: var(--radio-etiqueta);
    font-size: var(--texto-xxs);
    font-weight: var(--peso-fuerte);
    letter-spacing: var(--tracking-mayus);
    text-transform: uppercase;
  }

  .chips--segmento .chip {
    min-height: calc(var(--toque-min) - var(--espacio-2));
    font-size: var(--texto-s);
    letter-spacing: 0;
    text-transform: none;
  }

  .chips--wrap .chip {
    min-height: var(--toque-min);
    border-radius: var(--radio-control);
    font-size: var(--texto-s);
    letter-spacing: 0;
    text-transform: none;
  }

  .home__columnas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--espacio-4);
    max-width: var(--contenido-ancho-max);
  }

  .home {
    max-width: none;
  }

  .sell {
    grid-template-columns: minmax(0, 1fr) var(--canasta-ancho);
    align-items: start;
    gap: 0;
  }

  .sell .view__head {
    grid-column: 1 / -1;
  }

  .sell__main {
    gap: var(--espacio-3);
    padding: var(--espacio-4) var(--espacio-6) 0 0;
  }

  .sell__side {
    position: sticky;
    top: var(--cabeza-alto);
    height: calc(var(--pantalla-alto) - var(--cabeza-alto));
    max-height: none;
    margin-right: calc(-1 * var(--espacio-6));
    overflow: visible;
    border-left: var(--borde-fino) solid var(--color-borde);
  }

  .sell__side .panel {
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .canasta__lineas {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .cobro__cuerpo {
    min-height: 0;
    overflow-y: auto;
  }

  .canasta__pie {
    flex: none;
  }

  .line__rotulo {
    position: absolute;
    width: var(--borde-fino);
    height: var(--borde-fino);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .actionbar,
  .only-phone {
    display: none;
  }

  .catalog {
    grid-template-columns: repeat(auto-fill, minmax(var(--tarjeta-ancho-min), 1fr));
    gap: var(--espacio-3);
  }

  .product__toque {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "foto"
      "precio"
      "nombre"
      "meta";
    justify-items: center;
    align-items: start;
    row-gap: var(--espacio-1);
    height: 100%;
    padding: var(--espacio-3) var(--espacio-2);
    text-align: center;
  }

  .product__toque:hover:not(:disabled) {
    background: var(--color-hundido);
  }

  .product__photo {
    width: var(--foto-l);
    height: var(--foto-l);
    margin-bottom: var(--espacio-1);
  }

  .product__price {
    min-height: 0;
    font-size: var(--texto-m);
  }

  .product__name {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-tinta-suave);
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .product__meta {
    flex-direction: column;
    gap: var(--espacio-1);
    padding-top: var(--espacio-1);
  }

  .product__cuenta {
    position: absolute;
    top: var(--espacio-2);
    right: var(--espacio-2);
    display: grid;
    place-items: center;
    min-width: var(--etiqueta-alto);
    height: var(--etiqueta-alto);
    padding: 0 var(--espacio-1);
    border-radius: var(--radio-etiqueta);
    background: var(--color-tinta);
    color: var(--color-sobre-tinta);
    font-size: var(--texto-xs);
    font-weight: var(--peso-extra);
  }

  .product__stepper {
    display: none;
  }

  .tarjeta {
    padding: var(--espacio-3) var(--espacio-4);
  }

  .breakdown {
    grid-template-columns: repeat(auto-fill, minmax(var(--desglose-ancho-min), 1fr));
  }

  .breakdown__row:last-child {
    border-bottom: var(--borde-fino) solid var(--color-borde);
  }

  .registros__cabeza,
  .inventario__cabeza,
  .vendidos__cabeza {
    display: grid;
    align-items: center;
    column-gap: var(--espacio-4);
    min-height: var(--toque-min);
    padding: 0 var(--espacio-4);
    border-bottom: var(--borde-fino) solid var(--color-borde);
    background: var(--color-hundido);
    color: var(--color-tinta-suave);
    font-size: var(--texto-xs);
    font-weight: var(--peso-extra);
  }

  .registros__cabeza,
  .registros .record {
    grid-template-columns: var(--espacio-8) minmax(0, 1fr) var(--columna-monto) var(--columna-metodo) var(--columna-persona) var(--columna-hora);
    column-gap: var(--espacio-4);
  }

  .registros__cabeza span:nth-child(3) {
    text-align: right;
  }

  .registros .record {
    grid-template-areas:
      "icono concepto monto metodo vendedor hora"
      "icono numero estado metodo vendedor hora";
    align-items: center;
    row-gap: 0;
    padding: var(--espacio-2) var(--espacio-4);
  }

  .registros .record__icono {
    width: var(--espacio-8);
    height: var(--espacio-8);
  }

  .registros .record__concept {
    font-size: var(--texto-s);
    font-weight: var(--peso-medio);
  }

  .registros .record__meta {
    display: contents;
  }

  .registros .record__dato:not(:last-child)::after {
    content: none;
  }

  .registros .record__anulada {
    justify-self: end;
  }

  .record__numero {
    grid-area: numero;
    color: var(--color-tinta-suave);
    font-size: var(--texto-xs);
  }

  .registros .record__metodo {
    grid-area: metodo;
  }

  .registros .record__hora {
    grid-area: hora;
  }

  .registros .record__vendedor {
    grid-area: vendedor;
  }

  .registros .record__metodo,
  .registros .record__hora,
  .registros .record__vendedor {
    overflow: hidden;
    font-size: var(--texto-s);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .registros .record__amount {
    font-size: var(--texto-s);
  }

  .referencias {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-1) var(--espacio-5);
  }

  .referencias__dato {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .referencias__dato + .referencias__dato {
    padding-left: var(--espacio-5);
    border-left: var(--borde-fino) solid var(--color-borde);
  }

  .referencias__dato dt {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--color-tinta-suave);
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
  }

  .referencias__dato dt .icono {
    display: block;
  }

  .referencias__dato dd {
    color: var(--color-tinta);
    font-size: var(--texto-xs);
  }

  .referencias__valor {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
  }

  .referencias__falta {
    padding-block: 0;
  }

  .view__head > .barra-de-fecha {
    order: 0;
    flex: 0 1 auto;
    margin-left: var(--espacio-3);
  }

  .chips--pestanas {
    gap: 0;
    padding: var(--espacio-1);
    border: var(--borde-fino) solid var(--color-borde);
    border-radius: var(--radio-control);
    background: var(--color-superficie);
  }

  .chips--pestanas .chip {
    flex: 1 1 0;
    min-height: calc(var(--toque-min) - var(--espacio-2));
    border: 0;
    color: var(--color-tinta-suave);
    font-size: var(--texto-s);
    letter-spacing: 0;
    text-transform: none;
  }

  .chips--pestanas .chip:hover {
    color: var(--color-tinta);
  }

  .chips--pestanas .chip[aria-pressed="true"],
  .chips--pestanas .chip[aria-pressed="true"]:hover {
    background: var(--color-tinta);
    color: var(--color-sobre-tinta);
  }

  .chips--pestanas .chip:focus-visible {
    outline-offset: calc(-1 * var(--foco-ancho));
  }

  .chips--pestanas .chip[aria-pressed="true"]:focus-visible {
    outline-color: var(--color-foco-sobre-tinta);
  }

  .chips--subrayadas .chip {
    min-height: var(--toque-min);
    border-radius: 0;
    font-size: var(--texto-s);
    letter-spacing: 0;
    text-transform: none;
  }

  .filtros {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--espacio-3);
  }

  .chips--estado {
    padding-right: var(--espacio-3);
    border-right: var(--borde-fino) solid var(--color-borde);
  }

  .registros--inventario {
    overflow: hidden;
    border: var(--borde-fino) solid var(--color-borde);
    background: var(--color-superficie);
  }

  .inventario {
    gap: 0;
  }

  .inventario__cabeza,
  .inventario__fila {
    grid-template-columns: var(--foto-s) minmax(0, 1fr) var(--columna-aviso) var(--columna-precio) var(--columna-cantidad) var(--columna-cantidad);
    grid-template-areas: none;
    column-gap: var(--espacio-3);
  }

  .inventario-vista--costos .inventario__cabeza,
  .inventario-vista--costos .inventario__fila {
    grid-template-columns: var(--foto-s) minmax(0, 1fr) var(--columna-aviso) var(--columna-precio) var(--columna-costo) var(--columna-cantidad) var(--columna-cantidad) var(--columna-precio) var(--columna-margen);
  }

  .inventario-vista--existencias .inventario__cabeza,
  .inventario-vista--existencias .inventario__fila {
    grid-template-columns: var(--foto-s) minmax(0, 1fr) var(--columna-aviso) var(--columna-cantidad) var(--columna-cantidad);
  }

  .inventario__numero {
    text-align: right;
  }

  .inventario__fila {
    row-gap: 0;
    min-height: var(--fila-alto);
    padding: var(--espacio-1) var(--espacio-4);
    border: 0;
    border-bottom: var(--borde-fino) solid var(--color-borde);
    border-radius: 0;
  }

  .inventario__fila:hover {
    background: var(--color-hundido);
  }

  .inventario__fila:focus-visible {
    outline-offset: calc(-1 * var(--foco-ancho));
  }

  .inventario > li:last-child > .inventario__fila {
    border-bottom: 0;
  }

  .inventario__miniatura {
    grid-area: auto;
    grid-column: 1;
    grid-row: 1;
    width: var(--foto-s);
    height: var(--foto-s);
    border-radius: var(--radio-etiqueta);
  }

  .inventario__miniatura .sin-foto__icono {
    width: var(--icono-s);
    height: var(--icono-s);
  }

  .inventario__nombre {
    display: block;
    grid-area: auto;
    grid-column: 2;
    grid-row: 1;
    font-size: var(--texto-s);
    font-weight: var(--peso-extra);
    text-decoration: underline;
    text-underline-offset: var(--borde-marca);
  }

  .inventario__codigo {
    display: inline-block;
    width: 100%;
    font-weight: var(--peso-normal);
  }

  .inventario__aviso,
  .inventario__aviso:empty {
    display: block;
    grid-area: auto;
    grid-column: 3;
    grid-row: 1;
  }

  .inventario__precio,
  .inventario__costo,
  .inventario__ganancia,
  .inventario__sin-almacen,
  .inventario__existencia .tag {
    grid-row: 1;
    justify-self: end;
    font-size: var(--texto-s);
    font-weight: var(--peso-medio);
    text-align: right;
  }

  .inventario__precio {
    grid-area: auto;
    grid-column: 4;
    grid-row: 1;
    font-weight: var(--peso-extra);
  }

  .inventario__existencia {
    display: contents;
  }

  .inventario__existencia .tag {
    grid-column: 5;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-tinta);
  }

  .inventario__existencia .tag--low,
  .inventario__existencia .tag--out {
    color: var(--color-peligro);
    font-weight: var(--peso-extra);
  }

  .inventario__existencia .tag--warehouse,
  .inventario__sin-almacen {
    grid-column: 6;
  }

  .inventario__sin-almacen {
    display: block;
    color: var(--color-tinta-tenue);
  }

  .inventario__existencia .tag__palabra,
  .inventario__existencia .tag--warehouse .tag__icono,
  .inventario__existencia .tag--ok .tag__icono {
    display: none;
  }

  .inventario-vista--costos .inventario__costo {
    display: block;
    grid-column: 5;
  }

  .inventario-vista--costos .inventario__existencia .tag {
    grid-column: 6;
  }

  .inventario-vista--costos .inventario__existencia .tag--warehouse,
  .inventario-vista--costos .inventario__sin-almacen {
    grid-column: 7;
  }

  .inventario-vista--existencias .inventario__existencia .tag {
    grid-column: 4;
  }

  .inventario-vista--existencias .inventario__existencia .tag--warehouse,
  .inventario-vista--existencias .inventario__sin-almacen {
    grid-column: 5;
  }

  .inventario-vista--costos .inventario__ganancia {
    display: block;
    grid-column: 8;
    color: var(--color-ganancia);
  }

  .inventario-vista--costos .inventario__ganancia--perdida {
    color: var(--color-egresos);
  }

  .inventario__margen {
    grid-area: auto;
    grid-column: 9;
    grid-row: 1;
  }

  .inventario__vacio {
    color: var(--color-tinta-tenue);
  }

  .sheet {
    padding: var(--espacio-4) var(--espacio-5) var(--espacio-6);
  }

  .sheet__head {
    margin: 0 calc(-1 * var(--espacio-5));
    padding: 0 var(--espacio-5) var(--espacio-3);
  }

  .sheet__actions--redondas {
    margin: 0 calc(-1 * var(--espacio-5)) calc(-1 * var(--espacio-6));
    padding-inline: var(--espacio-5);
  }

  .compras__columnas {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--hoja-ancho));
    align-items: start;
    gap: var(--espacio-4);
  }

  .compra {
    position: sticky;
    top: calc(var(--cabeza-alto) + var(--espacio-4));
  }

  .administrar__grid {
    grid-template-columns: repeat(auto-fit, minmax(var(--lista-ancho-min), 1fr));
    gap: var(--espacio-4);
  }

  .estadisticas__listas {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--espacio-4);
  }

  .estadisticas__listas > :only-child {
    grid-column: 1 / -1;
  }

  .estadisticas__lado {
    gap: var(--espacio-4);
  }

  .top__columnas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top__columna + .top__columna {
    border-top: 0;
    border-left: var(--borde-fino) solid var(--color-borde);
  }

  .vendidos__cabeza,
  .vendidos__fila {
    grid-template-columns: var(--foto-s) minmax(0, 1fr) var(--columna-monto) var(--columna-monto) var(--columna-ganancia);
    grid-template-areas: "foto nombre cantidad venta ganancia";
    column-gap: var(--espacio-4);
  }

  .vendidos__cabeza span:nth-child(n + 3) {
    text-align: right;
  }

  .vendidos__nombre {
    font-weight: var(--peso-medio);
  }

  .vendidos__cantidad,
  .vendidos__venta,
  .vendidos__ganancia {
    justify-self: end;
    font-size: var(--texto-s);
  }

  .vendidos__cantidad {
    color: var(--color-tinta);
  }

  .vendidos__rotulo {
    position: absolute;
    width: var(--borde-fino);
    height: var(--borde-fino);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .vendidos__incompleta {
    font-size: var(--texto-xs);
  }

  .categorias {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .categoria:nth-child(odd) {
    border-right: var(--borde-fino) solid var(--color-borde);
  }

  .estadisticas__controles .chips--segmento {
    flex: 0 0 auto;
  }

  .estadisticas__controles .chips--segmento .chip {
    flex: 0 0 auto;
  }

  .periodo {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  .cifras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espacio-4);
  }

  @supports (grid-template-rows: subgrid) {
    .cifras {
      grid-template-rows: repeat(6, auto);
      row-gap: 0;
    }

    .cifra {
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .cifra > * {
      margin-bottom: var(--espacio-2);
    }

    .cifra__titulo {
      grid-row: 1;
    }

    .cifra__valor {
      grid-row: 2;
    }

    .cifra .variacion {
      grid-row: 3;
    }

    .cifra__nota {
      grid-row: 4;
    }

    .cifra__grafico {
      grid-row: 5;
    }

    .cifra__pie {
      grid-row: 6;
      margin-bottom: 0;
    }
  }

  .toast {
    top: var(--espacio-4);
    left: calc(var(--menu-ancho) + var(--espacio-6));
  }
}

@media (min-width: 100rem) {
  .catalog {
    grid-template-columns: repeat(var(--catalogo-columnas), minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .nav__item,
  .record,
  .inventario__fila,
  .shortcut,
  .product__toque,
  .rate--boton,
  .field,
  .campo__entrada {
    transition: background-color var(--duracion-corta) var(--curva), border-color var(--duracion-corta) var(--curva);
  }
}

.clientes__lista,
.cuenta {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vista__nuevo {
  width: auto;
  min-height: var(--toque-min);
  justify-content: center;
  font-size: var(--texto-s);
}

.clientes__panel {
  overflow: hidden;
}

.clientes__vacio,
.cuenta__vacia {
  display: grid;
  justify-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-8) var(--espacio-4);
  text-align: center;
}

.clientes__vacio-icono,
.cuenta__vacia-icono {
  width: var(--icono-xl);
  height: var(--icono-xl);
  color: var(--color-tinta-tenue);
  stroke-width: var(--icono-trazo-tenue);
}

.cliente-fila {
  display: grid;
  grid-template-columns: var(--icono-l) minmax(0, 1fr) auto;
  grid-template-areas:
    "icono nombre saldo"
    "icono contacto limite";
  align-items: center;
  column-gap: var(--espacio-3);
  row-gap: 0;
  width: 100%;
  min-height: var(--fila-alto);
  padding: var(--espacio-3) var(--espacio-4);
  border: 0;
  border-bottom: var(--borde-fino) solid var(--color-borde);
  background: none;
  color: var(--color-tinta);
  text-align: left;
}

.clientes__lista > li:last-child > .cliente-fila {
  border-bottom: 0;
}

.cliente-fila:hover {
  background: var(--color-hundido);
}

.cliente-fila:active {
  background: var(--color-presionado);
}

.cliente-fila:focus-visible {
  outline-offset: calc(-1 * var(--foco-ancho));
}

.cliente-fila__icono {
  grid-area: icono;
  display: grid;
  place-items: center;
  width: var(--icono-l);
  height: var(--icono-l);
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  color: var(--color-tinta-suave);
}

.cliente-fila__nombre {
  grid-area: nombre;
  display: -webkit-box;
  overflow: hidden;
  font-weight: var(--peso-fuerte);
  line-height: var(--interlinea-ajustada);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cliente-fila--inactivo .cliente-fila__nombre {
  color: var(--color-tinta-suave);
}

.cliente-fila__contacto,
.cliente-fila__limite {
  color: var(--color-tinta-suave);
  font-size: var(--texto-s);
  font-variant-numeric: tabular-nums;
}

.cliente-fila__contacto {
  grid-area: contacto;
}

.cliente-fila__limite {
  grid-area: limite;
  justify-self: end;
  font-size: var(--texto-xs);
}

.cliente-fila__saldo {
  grid-area: saldo;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  font-size: var(--texto-m);
  font-weight: var(--peso-extra);
}

.cliente-fila__saldo--debe {
  color: var(--color-egresos);
}

.cliente-fila__saldo--libre {
  color: var(--color-ingresos);
}

.cliente-fila__marca {
  width: var(--icono-s);
  height: var(--icono-s);
}

.sum__value--debe {
  color: var(--color-egresos);
}

.cliente__acciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-2);
}

.cliente__abonar {
  grid-column: 1 / -1;
}

.cliente__acciones .button:nth-child(2):last-child {
  grid-column: 1 / -1;
}

.cuenta__fila {
  display: grid;
  grid-template-columns: var(--cuenta-icono) minmax(0, 1fr) auto;
  grid-template-areas:
    "icono concepto monto"
    "icono concepto saldo"
    "icono productos productos"
    "icono anular anular";
  align-items: start;
  column-gap: var(--espacio-3);
  row-gap: 0;
  padding: var(--espacio-3) 0;
  border-bottom: var(--borde-fino) solid var(--color-borde);
}

.cuenta__fila:last-child {
  border-bottom: 0;
}

.cuenta__fila--anulada {
  color: var(--color-tinta-suave);
  text-decoration: line-through;
}

.cuenta__icono {
  grid-area: icono;
  display: grid;
  place-items: center;
  width: var(--cuenta-icono);
  height: var(--cuenta-icono);
  border-radius: var(--radio-pastilla);
}

.cuenta__icono--abono {
  background: var(--color-ingresos-fondo);
  color: var(--color-ingresos);
}

.cuenta__icono--venta {
  background: var(--color-egresos-fondo);
  color: var(--color-egresos);
}

.cuenta__fila--anulada .cuenta__icono {
  background: var(--color-hundido);
  color: var(--color-tinta-suave);
}

.cuenta__concepto {
  grid-area: concepto;
  display: grid;
  overflow-wrap: anywhere;
  font-weight: var(--peso-fuerte);
}

.cuenta__fecha {
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-normal);
}

.cuenta__monto {
  grid-area: monto;
  justify-self: end;
  font-weight: var(--peso-extra);
}

.cuenta__monto--venta {
  color: var(--color-egresos);
}

.cuenta__monto--abono {
  color: var(--color-ingresos);
}

.cuenta__saldo {
  grid-area: saldo;
  justify-self: end;
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
}

.pago__resto {
  margin: 0;
  font-size: var(--texto-l);
  font-weight: var(--peso-extra);
  text-align: right;
}

.cuenta__detalle {
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-normal);
}

.cuenta__productos {
  grid-area: productos;
  display: grid;
  gap: var(--espacio-1);
  margin: var(--espacio-2) 0 0;
  padding: var(--espacio-2) 0 0;
  border-top: var(--borde-fino) dotted var(--color-borde-control);
  list-style: none;
  font-size: var(--texto-xs);
}

.cuenta__producto {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3);
}

.cuenta__producto-nombre {
  overflow-wrap: anywhere;
}

.cuenta__producto-precio {
  color: var(--color-tinta-suave);
  white-space: nowrap;
}

.cuenta__producto-importe {
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
}

.caja,
.caja__columnas,
.caja__principal,
.caja__lateral {
  display: grid;
  align-content: start;
  gap: var(--espacio-3);
  min-width: 0;
}

.caja .view__head {
  margin-bottom: 0;
}

.caja-apertura__cabeza {
  display: flex;
  align-items: center;
}

.caja-apertura__titulo {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  font-size: var(--texto-l);
  font-weight: var(--peso-extra);
}

.caja-apertura__sello {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--toque-min);
  height: var(--toque-min);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-pastilla);
  background: var(--color-hundido);
  color: var(--color-tinta);
}

.caja-apertura__sello .icono {
  width: var(--icono);
  height: var(--icono);
}

.caja-apertura__cuerpo {
  display: grid;
  gap: var(--espacio-4);
}

.gaveta {
  display: grid;
  padding: 0 var(--espacio-3);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-hundido);
}

.gaveta__compartimiento {
  gap: var(--espacio-2);
  min-width: 0;
  padding: var(--espacio-3) 0;
}

.gaveta__compartimiento + .gaveta__compartimiento {
  border-top: var(--borde-fino) solid var(--color-borde-control);
}

.gaveta__icono {
  width: var(--icono);
  height: var(--icono);
  color: var(--color-tinta-suave);
}

.gaveta__monto {
  position: relative;
  display: block;
}

.gaveta__moneda {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--espacio-3);
  display: flex;
  align-items: center;
  color: var(--color-tinta-suave);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
  pointer-events: none;
}

.gaveta__entrada {
  height: var(--accion-alto);
  padding-left: calc(var(--espacio-3) + var(--valor-ancho-min));
  font-size: var(--texto-l);
  font-weight: var(--peso-extra);
  text-align: right;
}

.gaveta__monto:has(.gaveta__entrada:disabled) .gaveta__moneda {
  color: var(--color-deshabilitado-texto);
}

.caja-efectivo {
  display: grid;
  margin: 0;
  padding: 0 var(--espacio-4) var(--espacio-3);
  list-style: none;
}

.caja-efectivo__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, auto);
  gap: var(--espacio-3);
  padding: var(--espacio-2) 0;
  border-bottom: var(--borde-fino) dotted var(--color-borde-control);
}

.caja-efectivo__fila:last-child {
  border-bottom: 0;
}

.caja-efectivo__cabeza {
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  text-align: right;
}

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

.caja-efectivo__fila--total {
  font-weight: var(--peso-extra);
}

.caja-efectivo__fila--diferencia {
  font-weight: var(--peso-fuerte);
}

.caja__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}

.caja__acciones .button {
  flex: 1 1 auto;
  justify-content: center;
}

.caja-cortes {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.caja-conteo {
  display: grid;
  gap: var(--espacio-2);
  padding: var(--espacio-3) 0;
  border-bottom: var(--borde-fino) solid var(--color-borde);
}

.caja-conteo__esperado,
.caja-conteo__diferencia {
  margin: 0;
}

.caja-conteo__diferencia {
  font-weight: var(--peso-fuerte);
}

@media (min-width: 30rem) {
  .gaveta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--espacio-3);
  }

  .gaveta__compartimiento + .gaveta__compartimiento {
    padding-left: var(--espacio-3);
    border-top: 0;
    border-left: var(--borde-fino) solid var(--color-borde-control);
  }
}

@media (min-width: 60rem) {
  .caja,
  .caja__columnas,
  .caja__principal,
  .caja__lateral {
    gap: var(--espacio-4);
  }

  .caja > .view__head {
    margin-bottom: var(--espacio-1);
  }

  .caja-apertura {
    width: 100%;
    max-width: var(--formulario-ancho);
  }

  .sell > .caja-apertura {
    margin-top: var(--espacio-4);
  }

  .caja:has(> .caja-apertura) {
    grid-template-columns: minmax(0, var(--formulario-ancho)) minmax(0, 1fr);
    align-items: start;
  }

  .caja:has(> .caja-apertura) > .view__head {
    grid-column: 1 / -1;
  }

  .caja__columnas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .caja__lateral .breakdown {
    grid-template-columns: minmax(0, 1fr);
  }

  .caja__lateral .breakdown__row:last-child {
    border-bottom: 0;
  }

  .caja__acciones .button {
    flex: none;
  }

  .caja-efectivo__fila {
    grid-template-columns: minmax(0, 1fr) var(--columna-monto) var(--columna-monto);
  }

  .view__acciones {
    min-width: 0;
    max-width: 100%;
  }

  .view__acciones .rate {
    flex: none;
    max-width: 100%;
  }

  .administrar > :not(.view__head) {
    width: 100%;
    max-width: var(--ajustes-ancho-max);
  }

  .administrar .en-linea {
    max-width: var(--formulario-ancho);
  }

  .reinicio .button--danger {
    justify-self: start;
    width: auto;
  }

  .clientes {
    grid-template-columns: minmax(var(--tarjeta-resumen-min), max-content) minmax(0, 1fr);
    column-gap: var(--espacio-4);
  }

  .clientes > :not(.tarjetas, .buscador, .clientes__filtros) {
    grid-column: 1 / -1;
  }

  .clientes > .view__head {
    margin-bottom: var(--espacio-1);
  }

  .clientes > :nth-child(2) {
    margin-top: 0;
  }

  .clientes > .tarjetas {
    grid-row: span 2;
    grid-template-columns: minmax(0, 1fr);
  }

  .clientes > .buscador,
  .clientes > .clientes__filtros {
    grid-column: 2;
  }

  .compras:has(> .registros--compras) {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--hoja-ancho));
    grid-template-rows: auto auto 1fr;
    align-items: start;
    column-gap: var(--espacio-4);
  }

  .compras:has(> .registros--compras) > .view__head {
    grid-column: 1 / -1;
    margin-bottom: var(--espacio-1);
  }

  .compras:has(> .registros--compras) > .compras__columnas {
    display: contents;
  }

  .compras:has(> .registros--compras) .compras__buscar,
  .compras:has(> .registros--compras) > .registros--compras {
    grid-column: 1;
  }

  .compras:has(> .registros--compras) .compras__buscar + * {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: stretch;
  }
}

.clientes__filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
}

.ticket__movimiento {
  padding: var(--espacio-1) 0;
}

.ticket__movimiento + .ticket__movimiento {
  border-top: var(--borde-fino) dashed currentColor;
}

.ticket__movimiento--anulado {
  text-decoration: line-through;
}

.cuenta__anular {
  grid-area: anular;
  justify-self: end;
  margin-top: var(--espacio-2);
  border-color: var(--color-peligro);
  color: var(--color-peligro);
}

.cuenta__anular:hover {
  background: var(--color-peligro-fondo);
}

.detalle__pagos {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--espacio-1);
  text-align: left;
}

.detalle__pago {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-1) 0;
  border-bottom: var(--borde-fino) dotted var(--color-borde-control);
}

.detalle__pago:last-child {
  border-bottom: 0;
}

.detalle__pago-metodo {
  min-width: 0;
}

.detalle__pago-monto {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.details__pendiente {
  color: var(--color-tinta-suave);
  font-weight: var(--peso-medio);
}

.tag--credito {
  border-color: var(--color-borde-control);
  background: var(--color-superficie);
  color: var(--color-tinta);
}

#hoja-de-abonar .sheet__head {
  border-bottom-color: var(--color-ingresos);
}

#hoja-de-abonar .sheet__icono {
  background: var(--color-ingresos-fondo);
  color: var(--color-ingresos);
}

#hoja-de-anular-abono .sheet__icono {
  background: var(--color-peligro-fondo);
  color: var(--color-peligro);
}

.campo__ayuda {
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
}

.efectos {
  display: grid;
  gap: var(--espacio-2);
  margin: 0;
  padding: var(--espacio-3) var(--espacio-4);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-hundido);
  list-style: none;
}

.efectos__item {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  font-size: var(--texto-s);
}

.efectos__item .icono {
  width: var(--icono);
  height: var(--icono);
  color: var(--color-tinta-suave);
}

.efectos__quien {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  margin: 0;
  font-size: var(--texto-m);
  font-weight: var(--peso-extra);
}

.sheet .transferencia__ruta {
  justify-content: center;
  background: var(--color-superficie);
  padding: var(--espacio-3);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-control);
}

.cambio {
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-hundido);
}

.cambio:empty {
  display: none;
}

.pago {
  display: grid;
  gap: var(--espacio-2);
  padding: var(--espacio-3);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-control);
  background: var(--color-superficie);
}

.pago__cabeza {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}

.pago__numero {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--icono);
  height: var(--icono);
  border-radius: var(--radio-pastilla);
  background: var(--color-tinta);
  color: var(--color-sobre-tinta);
  font-size: var(--texto-xs);
  font-weight: var(--peso-extra);
}

.pago__titulo {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--texto-s);
  font-weight: var(--peso-extra);
  overflow-wrap: anywhere;
}

.pago__quitar {
  flex: none;
  color: var(--color-peligro);
}

.pago__monedas {
  justify-self: start;
}

.cambio__agregar {
  border-style: dashed;
  border-color: var(--color-borde-control);
}

.cambio__pago {
  font-size: var(--texto-xl);
  font-weight: var(--peso-extra);
  font-variant-numeric: tabular-nums;
}

.cambio__resultado {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
  border: var(--borde-fino) solid var(--color-ingresos);
  border-radius: var(--radio-control);
  background: var(--color-ingresos-fondo);
  color: var(--color-ingresos);
  font-size: var(--texto-m);
  font-weight: var(--peso-fuerte);
}

.cambio__resultado > .icono {
  width: var(--icono);
  height: var(--icono);
}

.cambio__lineas {
  display: grid;
  gap: var(--espacio-1);
  min-width: 0;
}

.cambio__linea {
  overflow-wrap: anywhere;
}

.cambio__resultado strong {
  font-size: var(--texto-l);
  font-weight: var(--peso-extra);
}

.cambio__resultado--falta {
  border-color: var(--color-alerta-borde);
  background: var(--color-egresos-fondo);
  color: var(--color-egresos);
}

.cambio__resultado--aviso {
  border-color: var(--color-borde);
  background: var(--color-superficie);
  color: var(--color-tinta);
  font-weight: var(--peso-medio);
}

.cambio__resultado--aviso > .icono {
  color: var(--color-tinta-suave);
}

.credito {
  display: grid;
  gap: var(--espacio-2);
  padding: var(--espacio-3);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-tarjeta);
  background: var(--color-hundido);
}

.credito__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
}

.credito__titulo {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: var(--texto-s);
  font-weight: var(--peso-extra);
}

.method--credito {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  column-gap: var(--espacio-3);
  padding-inline: var(--espacio-4);
  text-align: left;
}

.method--credito .method__nombre {
  display: grid;
}

.method__nota {
  color: var(--color-tinta-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-normal);
}

.tarjetas--balance {
  grid-template-columns: repeat(auto-fit, minmax(var(--tarjeta-balance-min), 1fr));
}

.chips--pestanas {
  flex-wrap: wrap;
  overflow-x: visible;
}

@media (min-width: 60rem) {
  .clientes__cabeza {
    display: grid;
    grid-template-columns: var(--icono-l) minmax(0, 1fr) var(--columna-cliente-contacto) var(--columna-cliente-limite) var(--columna-cliente-saldo);
    align-items: center;
    column-gap: var(--espacio-4);
    min-height: var(--toque-min);
    padding: 0 var(--espacio-4);
    border-bottom: var(--borde-fino) solid var(--color-borde);
    background: var(--color-hundido);
    color: var(--color-tinta-suave);
    font-size: var(--texto-xs);
    font-weight: var(--peso-extra);
  }

  .clientes__cabeza-saldo {
    text-align: right;
  }

  .cliente-fila {
    grid-template-columns: var(--icono-l) minmax(0, 1fr) var(--columna-cliente-contacto) var(--columna-cliente-limite) var(--columna-cliente-saldo);
    grid-template-areas: "icono nombre contacto limite saldo";
    column-gap: var(--espacio-4);
    padding: var(--espacio-2) var(--espacio-4);
  }

  .cliente-fila__nombre {
    font-size: var(--texto-s);
  }

  .cliente-fila__limite {
    justify-self: start;
    font-size: var(--texto-s);
  }

  .cliente-fila__saldo {
    font-size: var(--texto-s);
  }
}

@media (min-width: 84rem) {
  .tarjetas--balance {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.confirmar__lista {
  display: grid;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.confirmar__linea {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--espacio-3);
  padding: var(--espacio-2) var(--espacio-3);
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio-control);
  overflow-wrap: anywhere;
}

.ticket__nota {
  margin-top: var(--espacio-1);
}

.ticket__titulo {
  font-size: var(--recibo-texto-grande);
  font-weight: var(--peso-fuerte);
  overflow-wrap: anywhere;
}

.ticket__linea {
  overflow-wrap: anywhere;
}

.ticket__blanco {
  height: var(--recibo-renglon);
}

.ticket__fecha {
  margin-top: var(--espacio-2);
}

.ticket__item {
  display: grid;
  grid-template-columns: var(--recibo-columna-cantidad) minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--espacio-2);
}

.ticket__columnas {
  margin-top: var(--espacio-2);
}

.ticket__descripcion {
  overflow-wrap: anywhere;
}

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

.ticket__doble {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: var(--borde-marca) double var(--color-recibo-tinta);
}

.ticket__articulos {
  margin-top: var(--espacio-2);
}

.ticket__pie {
  margin-top: var(--espacio-2);
}

.recibo__grupo {
  margin-top: var(--espacio-2);
  font-size: var(--texto-s);
  font-weight: var(--peso-extra);
}

.recibo__blancos .campo__entrada {
  max-width: var(--campo-corto);
}

@media print {
  @page {
    size: 80mm auto;
    margin: 0;
  }

  body:has(.sheet .ticket) {
    background: var(--color-recibo-papel);
  }

  #app:has(.sheet .ticket) > :not(.sheet),
  .sheet:has(.ticket) > :not(.ticket) {
    display: none;
  }

  .sheet:has(.ticket) {
    position: static;
    display: block;
    max-height: none;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .ticket {
    width: var(--recibo-ancho);
    margin: 0;
    border: 0;
  }
}