@layer legado {
/* cobro-qr: la sección «Cobro por transferencia (QR)» de la ficha de una factura (ERPY-50, 6-oct-2026).
 * El QR a la izquierda, a un tamaño que un móvil lee desde la pantalla, y los datos para copiar a la
 * derecha; las propuestas del banco debajo. Solo tokens de css/tokens.css: el SVG del QR trae su propio
 * fondo blanco y su zona blanca, así que se lee igual en tema claro y oscuro. Todo cuelga de `.cqr-`. */

.cqr-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--ty-e-4);
  align-items: start;
}

@media (max-width: 640px) {
  .cqr-cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cqr-qr {
  display: block;
  width: 200px;
  height: 200px;
  max-width: 100%;
  border-radius: var(--ty-r-1, 6px);
}

.cqr-datos {
  display: flex;
  flex-direction: column;
  gap: var(--ty-e-2);
  min-width: 0;
}

.cqr-copiar {
  font-family: var(--ty-fuente-dato);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: var(--ty-e-3);
  border: 1px solid var(--ty-raya);
  border-radius: var(--ty-r-1, 6px);
  background-color: var(--ty-panel);
}

.cqr-propuestas {
  list-style: none;
  margin: var(--ty-e-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ty-e-2);
}

.cqr-propuesta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ty-e-2);
  padding: var(--ty-e-3);
  border: 1px solid var(--ty-raya);
  border-radius: var(--ty-r-2, 10px);
  background-color: var(--ty-panel);
}

.cqr-propuesta-texto {
  display: flex;
  flex-direction: column;
  gap: var(--ty-e-1);
  min-width: 0;
}

.cqr-nota {
  margin: var(--ty-e-2) 0 0;
  color: var(--ty-tinta-media);
}
}