@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(mg-archivo-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(mg-archivo-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;
}

/* Panel de caja y stock de Millo Gang. Móvil primero (iPhone de pie en la tienda). */
:root {
  --papel: #F7F2EA;
  --tinta: #121010;
  --linea: rgba(18, 16, 16, .14);
  --blanco: #FFFDF9;
  --suave: #5C5650;          /* 6,4:1 sobre papel */
  --rojo: #8A1F14;  --rojo-bg: #F6DAD5;   /* 6,9:1 */
  --ambar: #6B4A00; --ambar-bg: #F7E6BE;  /* 6,5:1 */
  --ok: #1E5130;    --ok-bg: #DEEAD6;     /* 7,4:1 */
  --gris: #635D56;  --gris-bg: #E8E2D8;   /* 5,1:1 */
  --radio: 14px;
  --titular: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --texto: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 16px/1.45 var(--texto); }
img { display: block; max-width: 100%; }
a { color: var(--tinta); }
[hidden] { display: none !important; }
h1, h2 { font-family: var(--titular); font-weight: 400; letter-spacing: .01em; margin: 0; }
h1 { font-size: 30px; line-height: 1.1; }
h2 { font-size: 19px; line-height: 1.25; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 16px; top: 8px; z-index: 30; background: var(--tinta); color: var(--papel); padding: 8px 12px; border-radius: 8px; }
.suave { color: var(--suave); }
.nota { color: var(--suave); font-size: 14px; margin-top: 10px; }
.en-linea { display: inline; margin: 0; }
.vacio { color: var(--suave); padding: 24px 0; text-align: center; }

/* ------------------------------------------------------------------ cabecera */
.cabecera { padding: 10px 16px 0; border-bottom: 1px solid var(--linea); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1100px; margin: 0 auto; }
.logo img { height: 46px; width: auto; }
.cabecera-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.actualizado { color: var(--suave); font-size: 12px; }
.chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--linea); white-space: nowrap; }
.chip-prueba, .chip-tienda { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.chip-aviso { background: var(--ambar-bg); color: var(--ambar); border-color: transparent; }
.chip-ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.chip-web { background: transparent; color: var(--tinta); }
.pestanas { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1100px; margin: 8px auto 0; }
.pestana { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; color: var(--suave); text-decoration: none; font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pestana[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--tinta); }

/* --------------------------------------------------------------------- avisos */
.aviso { display: flex; gap: 10px; align-items: flex-start; width: calc(100% - 32px); max-width: 1068px; margin: 12px auto 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; border: 1px solid var(--linea); background: var(--blanco); }
.aviso .ico { margin-top: 1px; }
.aviso-prueba { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.aviso-alerta { background: var(--ambar-bg); color: var(--ambar); border-color: transparent; }
.aviso-texto form { margin-top: 8px; }
.aviso-alerta .boton-borde { color: var(--ambar); border-color: var(--ambar); }

/* ------------------------------------------------------------------ estructura */
.principal { max-width: 1100px; margin: 0 auto; padding: 16px 16px 40px; }
.principal-sola { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.titulo-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.leyenda { color: var(--suave); font-size: 14px; margin: 4px 0 14px; }
.eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); font-weight: 600; }
.pie { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; align-items: center; padding: 22px 16px 120px; border-top: 1px solid var(--linea); color: var(--suave); font-size: 13px; }

/* ------------------------------------------------------------------- botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1.5px solid var(--tinta); background: var(--tinta); color: var(--papel); font: 600 16px/1.1 var(--texto); text-decoration: none; cursor: pointer; touch-action: manipulation; }
.boton-grande { width: 100%; min-height: 58px; font-size: 18px; margin-top: 6px; }
.boton-borde { background: transparent; color: var(--tinta); }
.boton-pequeno { min-height: 40px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.boton:disabled { opacity: .55; cursor: wait; }
.enlace { background: none; border: 0; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; font: 500 15px var(--texto); cursor: pointer; padding: 10px; min-height: 44px; }
.enlace-centro { display: block; margin: 6px auto 0; }
.icono-boton { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea); background: transparent; color: var(--tinta); display: grid; place-items: center; cursor: pointer; }

/* ---------------------------------------------------------------------- caja */
.caja-lista { display: grid; grid-template-columns: 1fr; gap: 10px; }
.prenda { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 10px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
.prenda-foto { width: 64px; height: 80px; object-fit: cover; border-radius: 10px; background: #EDE6DB; }
.prenda-nombre { font-size: 17px; line-height: 1.2; }
.prenda-precio { color: var(--suave); font-size: 14px; margin: 2px 0 8px; }
.prenda-agotada .prenda-foto { filter: grayscale(1); opacity: .6; }
.tallas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.talla { height: 48px; padding: 0 2px; border-radius: 10px; border: 1.5px solid var(--tinta); background: var(--papel); color: var(--tinta); font: 700 15px/1 var(--texto); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; touch-action: manipulation; transition: transform .1s ease; }
.talla small { font-size: 11px; font-weight: 500; color: var(--suave); }
.talla.en-carrito { background: var(--tinta); color: var(--papel); }
.talla.en-carrito small { color: var(--papel); }
.talla.pulsado { transform: scale(.94); }
.talla:disabled { background: var(--gris-bg); border: 1.5px dashed rgba(18, 16, 16, .28); color: var(--gris); text-decoration: line-through; cursor: not-allowed; }
.barra-carrito { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 14px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(247, 242, 234, 0), var(--papel) 35%); }
.barra-carrito-boton { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 640px; min-height: 60px; margin: 0 auto; padding: 0 16px; border: 0; border-radius: 16px; background: var(--tinta); color: var(--papel); font: 600 16px var(--texto); cursor: pointer; box-shadow: 0 10px 28px rgba(18, 16, 16, .28); }
.barra-carrito-boton strong { margin-left: auto; font-family: var(--titular); font-weight: 400; font-size: 21px; }
.barra-carrito-ir { display: inline-flex; align-items: center; gap: 4px; padding-left: 12px; border-left: 1px solid rgba(247, 242, 234, .35); }
.tostada { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 40; max-width: calc(100% - 32px); background: var(--tinta); color: var(--papel); padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 20px rgba(18, 16, 16, .25); }

/* ------------------------------------------------------------- hojas (dialog) */
.hoja { width: 100%; max-width: min(560px, 100%); max-height: 92vh; margin: auto auto 0; padding: 0 18px calc(20px + env(safe-area-inset-bottom)); border: 0; border-radius: 22px 22px 0 0; background: var(--papel); color: var(--tinta); overflow: auto; overscroll-behavior: contain; }
.hoja::backdrop { background: rgba(18, 16, 16, .5); }
.hoja-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 1; background: var(--papel); padding: 16px 0 10px; }
.lineas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.linea { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.linea-nombre { font-weight: 600; }
.linea-sub { color: var(--suave); font-size: 14px; }
.lineas-fijas .linea { grid-template-columns: minmax(0, 1fr) auto; }
.contador { display: flex; align-items: center; gap: 4px; }
.contador button { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--tinta); background: transparent; color: var(--tinta); display: grid; place-items: center; cursor: pointer; }
.contador button:disabled { border-color: var(--linea); color: var(--gris); cursor: not-allowed; }
.contador output { min-width: 28px; text-align: center; font-weight: 700; font-size: 17px; }
.total-fila { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 6px; font-size: 17px; }
.total-fila strong { font-family: var(--titular); font-weight: 400; font-size: 30px; }
.metodos { display: flex; gap: 8px; margin-top: 10px; }
.metodo { flex: 1 1 0; min-width: 0; flex-direction: column; min-height: 66px; gap: 4px; padding: 6px; font-size: 15px; text-align: center; line-height: 1.15; }
.hoja-qr { text-align: center; }
.hoja-qr .eyebrow { margin-top: 18px; }
.qr-codigo { width: min(76vw, 340px); margin: 14px auto 8px; }
.qr-codigo svg { display: block; width: 100%; height: auto; border-radius: 10px; }
.qr-total { font-family: var(--titular); font-size: 36px; line-height: 1.1; margin-top: 4px; }
.esperando { font-weight: 700; margin-top: 8px; }
.esperando::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--tinta); animation: latido 1.2s ease-in-out infinite; vertical-align: middle; }
.hoja-qr .boton-borde { width: 100%; margin-top: 12px; }
.nota-abrir { margin-top: 6px; font-size: 13px; }
.qr-confirmar { text-align: left; }
.qr-confirmar .form-control { grid-template-columns: 110px minmax(0, 1fr); }
.conf-total { font-family: var(--titular); font-size: 46px; line-height: 1.05; margin: 0 0 12px; }
.hoja-hecho { text-align: center; padding-top: 30px; }
.hecho-icono { width: 76px; height: 76px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; margin: 0 auto; }
.hecho-icono .ico { width: 42px; height: 42px; stroke-width: 2.4; }
.hecho-titulo { font-size: 42px; margin-top: 14px; }
.hecho-numero { font-family: var(--titular); font-size: 48px; line-height: 1.1; margin: 2px 0 4px; }
.error { background: var(--rojo-bg); color: var(--rojo); padding: 10px 12px; border-radius: 10px; font-size: 15px; margin: 10px 0; }
.error-texto { color: var(--rojo); }
.exito { background: var(--ok-bg); color: var(--ok); padding: 10px 12px; border-radius: 10px; font-size: 15px; margin: 10px 0; font-weight: 600; }
@keyframes latido { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* --------------------------------------------------------------------- cifras */
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.cifra { display: flex; flex-direction: column; gap: 2px; padding: 12px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); min-width: 0; }
.cifra-valor { font-family: var(--titular); font-size: 28px; line-height: 1.1; overflow-wrap: anywhere; }
.cifra-grande .cifra-valor { font-size: 34px; margin: 2px 0; }
.cifras-ventas { grid-template-columns: 1fr; }
.cifra-etiqueta { color: var(--suave); font-size: 13px; }
.sem-rojo-texto { color: var(--rojo); }
.sem-ambar-texto { color: var(--ambar); }

/* ---------------------------------------------------------------------- stock */
.stock-lista, .ubic-lista, .rejilla-dos { display: grid; grid-template-columns: 1fr; gap: 10px; }
.stock-tarjeta, .tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px; min-width: 0; }
.tarjeta { margin: 10px 0; }
.rejilla-dos .tarjeta, .ubic-lista .tarjeta { margin: 0; }
.rejilla-dos { margin: 10px 0; }
.tarjeta h2 { margin-bottom: 8px; }
.stock-cabeza { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.stock-cabeza img { width: 40px; height: 50px; object-fit: cover; border-radius: 6px; }
.stock-cabeza h2 { font-size: 17px; }
.stock-cabeza .suave { font-size: 13px; }
.tabla-envoltorio { overflow-x: auto; }
.tabla-tallas { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; font-size: 14px; }
.tabla-tallas th, .tabla-tallas td { padding: 0; text-align: center; }
.tabla-tallas thead th { font-size: 12px; font-weight: 700; color: var(--suave); padding-bottom: 2px; }
.tabla-tallas th[scope="row"], .tabla-tallas thead th:first-child { width: 28%; text-align: left; font-weight: 500; font-size: 13px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabla-publica th[scope="row"], .tabla-publica thead th:first-child { width: 14%; }
.fila-total th[scope="row"] { color: var(--tinta); font-weight: 700; }
.celda { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 8px; border: 1px solid var(--linea); font-weight: 700; font-size: 16px; color: var(--tinta); text-decoration: none; }
a.celda:active { transform: scale(.96); }
.tabla-publica .celda { font-size: 12px; height: 36px; padding: 0 2px; }
.celda-sub { display: block; padding: 6px 0; font-size: 14px; }
.es-cero { color: var(--suave); }
.sem-rojo { background: var(--rojo-bg); color: var(--rojo); border-color: transparent; }
.sem-ambar { background: var(--ambar-bg); color: var(--ambar); border-color: transparent; }
.sem-ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.punto { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 6px; border-radius: 50%; vertical-align: -1px; }
.punto:first-child { margin-left: 0; }
.punto.sem-rojo { background: var(--rojo); }
.punto.sem-ambar { background: #B07A00; }
.punto.sem-ok { background: var(--ok); }
.lista-enlaces { list-style: none; margin: 0; padding: 0; }
.lista-enlaces li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linea); font-size: 15px; }
.lista-enlaces a { font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.volver { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; text-decoration: none; }
.talla-cabeza { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.talla-cabeza img { width: 64px; height: 80px; object-fit: cover; border-radius: 10px; }
.talla-cabeza h1 { font-size: 26px; margin: 2px 0; }
.ubic-tarjeta .cifras { margin: 0; }
.ubic-tarjeta .cifra { background: var(--papel); }
.form-fila { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
.form-fila label { font-weight: 600; font-size: 14px; }
.form-control { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
.form-control .boton { width: 100%; padding: 0 10px; }
input { font: 500 18px var(--texto); color: var(--tinta); }
input[type="number"], input[type="password"], input:not([type]) { width: 100%; min-height: 48px; padding: 0 12px; border: 1.5px solid rgba(18, 16, 16, .35); border-radius: 12px; background: var(--blanco); }

/* --------------------------------------------------------------------- ventas */
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: 10px 6px; border-bottom: 1px solid var(--linea); }
.tabla thead th { font-size: 12px; font-weight: 700; color: var(--suave); padding-top: 0; }
.tabla tbody th { font-weight: 600; }
.num { display: block; font-weight: 700; white-space: nowrap; }
.sub { display: block; color: var(--suave); font-size: 13px; }
.barra { display: block; width: 100%; height: 6px; margin-top: 6px; }
.barra-fondo { fill: rgba(18, 16, 16, .1); }
.barra-valor { fill: var(--tinta); }
.tarjeta-cierre { border: 1.5px solid var(--tinta); }
.cierre-sub { font-family: var(--texto); font-size: 14px; font-weight: 700; margin: 16px 0 2px; }
.tabla-cierre td, .tabla-cierre th { padding: 8px 6px; }
.tabla-cierre td:nth-child(2) { color: var(--suave); }
.tabla-cierre tfoot th, .tabla-cierre tfoot td { font-weight: 700; color: var(--tinta); border-bottom: 0; }
.liquidar { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 10px; padding: 12px; border-radius: 10px; background: var(--tinta); color: var(--papel); font-weight: 600; }
.liquidar strong { font-family: var(--titular); font-weight: 400; font-size: 24px; white-space: nowrap; }
.cierre { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 12px; }
.cierre-valor { font-family: var(--titular); font-size: 44px; line-height: 1.1; overflow-wrap: anywhere; }
.lista-cierre { list-style: none; margin: 0; padding: 0; }
.lista-cierre li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linea); font-size: 15px; }
.cuadrar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.cuadrar div { background: var(--papel); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.cuadrar dt { font-size: 12px; color: var(--suave); }
.cuadrar dd { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.pedidos { list-style: none; margin: 0; padding: 0; }
.pedido, .registro-item { padding: 11px 0; border-bottom: 1px solid var(--linea); }
.pedido:last-child, .registro-item:last-child { border-bottom: 0; }
.pedido-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pedido-total { margin-left: auto; font-weight: 700; }
.pedido-sub { color: var(--suave); font-size: 13px; margin-top: 2px; }
.pedido-detalle { font-size: 14px; margin-top: 2px; overflow-wrap: anywhere; }
.pedido-anulado .pedido-total { text-decoration: line-through; color: var(--suave); }
.registro-error { border-left: 3px solid var(--rojo); padding-left: 10px; }

/* --------------------------------------------------------------------- acceso */
.acceso { width: 100%; max-width: 400px; text-align: center; }
.acceso-logo { width: 170px; height: auto; margin: 0 auto 22px; }
.acceso-tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; padding: 22px; text-align: left; }
.acceso-tarjeta h1 { font-size: 30px; }
.acceso-tarjeta label { display: block; margin: 14px 0 6px; font-weight: 600; font-size: 14px; }
.acceso-tarjeta .boton-grande { margin-top: 18px; }
.acceso-tarjeta .error { margin-top: 12px; }
.acceso-nota { color: var(--suave); font-size: 13px; margin-top: 16px; }
.mensaje { max-width: 520px; text-align: center; background: var(--blanco); padding: 26px 22px; border: 1px solid var(--linea); border-radius: 18px; }
.mensaje h2 { font-size: 24px; margin-bottom: 8px; }
.mensaje p { color: var(--suave); margin-bottom: 16px; }

/* --------------------------------------------------------------- pantallas anchas */
@media (min-width: 769px) {
  .caja-lista, .stock-lista, .ubic-lista, .rejilla-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ubic-tarjeta .cifras, .cifras-ventas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hoja { margin: auto; border-radius: 22px; }
  .principal { padding-top: 22px; }
}
@media (min-width: 1100px) {
  .caja-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Móvil: ninguna rejilla hereda un span de escritorio (aprendizaje MAXODY 2026-04-17). */
@media (max-width: 768px) {
  .caja-lista > *, .stock-lista > *, .ubic-lista > *, .rejilla-dos > * { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .metodos { flex-direction: column; }
  .cuadrar { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------- hoja del QR: cabe entera sin scroll (v7) */
.hoja-qr { padding-top: 4px; }
.hoja-qr .eyebrow { margin-top: 12px; }
.qr-codigo { width: min(62vw, 34dvh, 300px); margin: 8px auto 4px; }
.qr-total { font-size: 30px; margin-top: 2px; }
.esperando { margin-top: 2px; font-size: 15px; }
.qr-nota { margin-top: 6px; font-size: 13px; }
.hoja-qr .boton-borde { margin-top: 8px; min-height: 46px; }
.nota-abrir { margin-top: 4px; font-size: 12px; line-height: 1.35; }
.hoja-qr .qr-confirmar { margin-top: 10px; padding-top: 10px; gap: 4px; }
.hoja-qr .qr-confirmar label { font-size: 13px; }
.hoja-qr .qr-confirmar .form-control { grid-template-columns: 96px minmax(0, 1fr); }
.hoja-qr .qr-confirmar .form-control > * { min-height: 46px; }
.hoja-qr .qr-confirmar .error { margin: 6px 0 0; font-size: 13px; padding: 8px 10px; }
.hoja-qr #qr-cancelar { margin-top: 4px; padding: 8px; }
.hoja-qr .boton#qr-simular { margin-top: 8px; }
/* pantallas anchas (ordenador, iPad en horizontal): QR a la izquierda, acciones a la derecha */
@media (min-width: 769px) {
  .hoja.hoja-qr { max-width: min(860px, 100%); max-height: 96dvh; }
  .qr-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 8px 6px 4px; }
  .qr-codigo { width: min(42dvh, 340px); }
  .qr-col-acciones { text-align: left; }
  .qr-col-acciones .enlace-centro { display: block; margin-left: auto; margin-right: auto; }
}
/* teléfonos bajitos (iPhone SE): un poco más de compresión */
@media (max-height: 640px) {
  .hoja.hoja-qr { max-height: 98dvh; }
  .qr-codigo { width: min(52vw, 27dvh); margin-top: 4px; }
  .qr-total { font-size: 24px; }
  .esperando { font-size: 14px; }
  .hoja-qr .eyebrow { margin-top: 8px; }
  .qr-nota { display: none; }
  .hoja-qr .boton-borde, .hoja-qr .qr-confirmar .form-control > * { min-height: 42px; }
  .hoja-qr .qr-confirmar label { font-size: 12px; }
}