/* POS web. Réplica de la pantalla de venta del POS de Windows (MainWindow.xaml: «compacto de TPVSOL»): franja azul marino, marco verde de 3 px, botones oscuros con brillo,
   total en recuadro, mosaicos de colores. Las mismas medidas: encabezado 76, captura 38, columnas 24, resumen 26, columna derecha 356 (292 hasta 1024).
   El ACOMODO en tablet y celular copia las reglas de Android: «celular» = ancho < 720 o alto < 520 · «retrato» = celular y más alto que ancho (pos.js pone la clase en <body>). */
:root {
  --fondo: #f1f5f3; --superficie: #fff; --superficie2: #e3ebe7; --texto: #10130f; --suave: #3a4b44; --borde: #aec0b7;
  --primario: #c27a10; --primario-texto: #1b1e19; --exito: #1f6b49; --exito-suave: #d3e8dd; --peligro: #b3341f; --aviso: #7a4e00;
  --boton: #e3ebe7; --btn: #a0a0a0; --marco: #789c48; --oro-texto: #8a5200; --marino1: #1f3d37; --marino2: #12241f; --pino: #2e7d5b; --pino2: #2d3445;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", monospace;
  --cobrar: linear-gradient(135deg, #1fa463, #0b7a44); --entrar: linear-gradient(135deg, #3fbf8a, #1f7f58);
  --brillo: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .08));
  color-scheme: light;
}
:root[data-tema="oscuro"] { --fondo: #131b18; --superficie: #1e2b27; --superficie2: #19231f; --boton: #19231f; --texto: #e8f0ec; --suave: #a2bcb4; --borde: #31453f; --exito: #4cc38a; --exito-suave: #153326; --peligro: #ff7a66; --aviso: #f2c14e; --primario: #e0912a; --oro-texto: #e0912a; --marino1: #1b2e55; --marino2: #0c1526; --cobrar: linear-gradient(135deg, #34e08a, #0e9f4f); --entrar: linear-gradient(135deg, #4cc9f0, #3a86ff); color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] { --fondo: #131b18; --superficie: #1e2b27; --superficie2: #19231f; --boton: #19231f; --texto: #e8f0ec; --suave: #a2bcb4; --borde: #31453f; --exito: #4cc38a; --exito-suave: #153326; --peligro: #ff7a66; --aviso: #f2c14e; --primario: #e0912a; --oro-texto: #e0912a; --marino1: #1b2e55; --marino2: #0c1526; --cobrar: linear-gradient(135deg, #34e08a, #0e9f4f); --entrar: linear-gradient(135deg, #4cc9f0, #3a86ff); color-scheme: dark; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body { background: var(--fondo); color: var(--texto); font: 14px/1.3 "Segoe UI", Roboto, system-ui, -apple-system, sans-serif; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }
#app { height: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.sin-barra { scrollbar-width: none; -ms-overflow-style: none; }
.sin-barra::-webkit-scrollbar { display: none; }

/* ---------- botón TPV (TpvBtn): fondo de superficie, borde gris fino, brillo ---------- */
.tpv { position: relative; background: var(--boton); border: 1px solid var(--btn); border-radius: 7px; color: var(--texto); font-weight: 600; font-size: 13px; padding: 0; min-height: 0; }
.tpv::after { content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none; background: var(--brillo); }
.tpv:hover { filter: brightness(1.12); }
.tpv:active { filter: brightness(.82); }
.tpv:disabled { opacity: .6; cursor: default; filter: none; }
.tpv.prim { background: var(--primario); color: var(--primario-texto); border-color: transparent; }
.tpv.exito { background: var(--cobrar); color: #fff; border-color: rgba(255, 255, 255, .35); }
.tpv.entrar { background: var(--entrar); color: #fff; border-color: rgba(255, 255, 255, .35); }
.tpv.peligro { color: var(--peligro); }
.tpv.sel { background: var(--primario); color: var(--primario-texto); border-color: transparent; }
.btn { border: 1px solid var(--btn); background: var(--boton); border-radius: 7px; min-height: 38px; padding: 0 16px; font-weight: 600; }
.btn.prim { background: var(--primario); color: var(--primario-texto); border-color: transparent; }
.btn.exito { background: var(--cobrar); color: #fff; border-color: rgba(255, 255, 255, .35); font-weight: 800; }
.btn.peligro { color: var(--peligro); }
.btn.plano { background: transparent; border-color: transparent; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.sel { background: var(--primario); color: var(--primario-texto); border-color: transparent; }
.redondo { width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; }
.redondo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.campo { width: 100%; min-height: 40px; border: 1px solid var(--btn); background: var(--superficie2); border-radius: 7px; padding: 0 12px; }
.campo:focus { border-color: var(--primario); outline: none; }
label.et { display: block; font-size: 12px; font-weight: 700; color: var(--suave); margin: 10px 0 4px; }

/* ---------- armazón ---------- */
.app-v { display: flex; flex-direction: column; height: 100%; }
.venta { flex: 1; min-height: 0; display: flex; }
.riel { width: 84px; flex: none; background: linear-gradient(180deg, var(--marino1), var(--marino2)); color: #fff; display: flex; flex-direction: column; }
.riel-marca { display: flex; align-items: center; justify-content: center; height: 84px; flex: none; border-bottom: 1px solid rgba(255, 255, 255, .15); padding: 6px; }
.riel-marca svg { width: 40px; height: 24px; fill: #f5f8f7; }
.riel button { flex: none; height: 74px; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .15); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 13px; font-weight: 600; }
.riel button:hover, .riel button:focus-visible { background: rgba(255, 255, 255, .1); }
.riel button.abajo { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .15); } .riel button.abajo ~ button { margin-top: 0; }
.riel svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.marco { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 312px; border: 3px solid var(--marco); background: var(--fondo); }
.izq { display: grid; grid-template-rows: minmax(250px, 3fr) minmax(0, 2fr); min-height: 0; min-width: 0; }
.der { display: flex; flex-direction: column; min-height: 0; padding: 4px 6px 4px 4px; gap: 6px; overflow: hidden; }
@media (max-width: 1024px) { .marco { grid-template-columns: minmax(0, 1fr) 276px; } }
.estado-barra { flex: none; height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px; font-size: 12px; color: var(--suave); background: var(--superficie2); border-top: 1px solid var(--borde); white-space: nowrap; overflow: hidden; }
.estado-barra span { overflow: hidden; text-overflow: ellipsis; }

/* ---------- ticket ---------- */
.ticket { display: grid; grid-template-rows: 84px 40px 26px minmax(0, 1fr) 28px; min-height: 0; min-width: 0; }
.enc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; background: var(--superficie); border-bottom: 1px solid var(--btn); }
.logo-fto { width: 150px; height: 72px; margin: 6px; background: transparent; display: grid; place-items: center; overflow: hidden; }
.logo-fto img { max-width: 150px; max-height: 68px; width: auto; height: auto; object-fit: contain; display: block; }
.logo-fto b { width: 60px; height: 60px; border-radius: 50%; background: #2e7d5b; color: #fff; display: grid; place-items: center; font-size: 26px; font-weight: 600; }
.enc .centro { padding: 0 8px 0 6px; min-width: 0; }
.enc .tit { font-weight: 700; font-size: 16px; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enc .dat { font-size: 12.5px; margin-top: 1px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enc .fila { display: flex; gap: 8px; margin-top: 7px; }
.enc .fila .tpv { height: 30px; padding: 0 12px; font-size: 13px; }
.enc .fila .doc { min-width: 104px; }
.enc .fila .cli { flex: 0 1 auto; min-width: 150px; max-width: 380px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }      /* mide lo que dice el nombre (como en Windows); queda espacio libre a su derecha */
.lin-fila .pre { cursor: pointer; }
.enc .fila0 { display: flex; align-items: center; gap: 10px; }
.enc .fila0 .tit { flex: 1; min-width: 0; }
.enc .estado { margin: 0; display: flex; align-items: center; gap: 8px; flex: none; }
.pildora { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; background: var(--exito-suave); color: var(--exito); cursor: pointer; }
.pildora.mal { background: color-mix(in srgb, var(--peligro) 22%, transparent); color: var(--peligro); }
.punto { width: 14px; height: 14px; border-radius: 50%; background: var(--exito); flex: none; }
.punto.fuera { background: var(--peligro); }
.x-cancelar { width: 52px; height: 52px; margin-right: 10px; font-size: 28px; font-weight: 700; color: var(--peligro); }
.captura { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 2px 4px; position: relative; }
.captura input { height: 36px; min-width: 0; border: 1px solid var(--btn); background: var(--superficie2); border-radius: 7px; padding: 0 8px; font-size: 16px; align-self: center; }
.captura input:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 1px var(--primario); }
.captura .botones { display: flex; gap: 6px; }
.captura .botones .tpv { height: 36px; }
.resultados { position: absolute; left: 2px; right: 150px; top: 38px; z-index: 20; background: var(--superficie); border: 1px solid var(--btn); border-radius: 8px; box-shadow: 0 4px 18px rgba(0, 0, 0, .5); max-height: min(60vh, 420px); overflow-y: auto; }
.resultados .cab { display: flex; justify-content: space-between; background: var(--superficie2); border-radius: 8px 8px 0 0; padding: 3px 10px; font-size: 14px; }
.resultados .pie { padding: 2px 10px; font-size: 10.5px; color: var(--suave); }
.resultado { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 0; width: 100%; background: none; border: 0; height: 28px; padding: 0 8px; text-align: left; color: var(--texto); }
.resultado:hover { background: rgba(136, 136, 136, .2); }
.resultado.activo { background: var(--exito-suave); }
.resultado .nom { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultado .sku { margin: 0 10px; font: 11px Consolas, var(--mono); color: var(--suave); }
.resultado .ex { margin-right: 10px; font-size: 11px; font-weight: 600; color: var(--exito); }
.resultado .ex.sin { color: var(--peligro); }
.resultado .pre { font-weight: 700; min-width: 64px; text-align: right; }
.sin-resultados { padding: 14px; color: var(--suave); }
.cols { display: grid; grid-template-columns: var(--cols); align-items: center; font-size: 12px; font-weight: 700; color: var(--suave); padding-left: 2px; padding-right: 36px; }      /* los mismos bordes que los renglones: 2 px de la lista + la columna de ▲▼ (32) + el hueco (2) */
.lin-fila, .cols { --cols: 32px 130px minmax(60px, 1fr) 100px 92px 62px 112px 38px; }      /* Precio, Dto y Total más anchos: caben montos como $1,000.00 */
.cols > :nth-child(7) { padding-right: 22px; }      /* el título «Total» queda centrado sobre los montos de los renglones (que terminan 8 px antes del borde) */
.cols .c, .lin-fila .c { text-align: center; } .cols .d, .lin-fila .d { text-align: right; padding: 0 4px; }
.lineas-caja { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 2px; padding: 0 2px; min-height: 0; }
.lineas { border: 1px solid var(--btn); background: var(--superficie); overflow-y: auto; min-height: 0; position: relative; }
.lin-fila { display: grid; grid-template-columns: var(--cols); align-items: center; min-height: 40px; border-bottom: 1px solid var(--borde); cursor: default; }
.lin-fila.sel { background: color-mix(in srgb, var(--primario) 20%, var(--superficie)); }
.lin-fila .n { text-align: center; color: var(--suave); }
.lin-fila .cod { font-family: Consolas, var(--mono); font-size: 13px; padding: 0 10px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lin-fila .nom { padding: 0 4px; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lin-fila .dto { color: var(--exito); font-weight: 700; }
.lin-fila .tot { font-weight: 700; padding: 0 8px 0 4px; }
.cant { display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.cant .cn { min-width: 22px; text-align: center; font-weight: 600; font-size: 15px; background: none; border: 0; padding: 0; }
.cant .mm { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--btn); background: var(--superficie2); font-size: 15px; line-height: 1; display: grid; place-items: center; padding: 0; font-weight: 700; }
.cant .mm.mas { background: var(--primario); color: var(--primario-texto); border-color: #b8741a; }
.quitar { background: none; border: 0; color: var(--peligro); width: 34px; height: 30px; display: grid; place-items: center; }
.quitar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flechas { display: flex; flex-direction: column; gap: 6px; margin-left: 0; }
.flechas .tpv { width: 30px; height: 72px; font-size: 14px; }
.vacio { color: var(--suave); text-align: center; padding: 26px 12px; }
.resumen { display: flex; align-items: center; gap: 12px; margin: 2px 2px 0; padding: 0 6px; border: 1px solid var(--btn); background: var(--superficie); font-size: 12px; color: var(--suave); white-space: nowrap; overflow: hidden; }
.resumen .nota { color: var(--primario); text-decoration: underline; cursor: pointer; background: none; border: 0; padding: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.resumen .sp { flex: 1; }
.resumen .ahorro { color: var(--exito); font-weight: 700; }

/* ---------- catálogo ---------- */
.barra-cat { display: none; align-items: center; justify-content: space-between; width: 100%; min-height: 42px; border-radius: 0; padding: 0 14px; font-weight: 700; margin: 2px 0 0; }
.cat { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 3px; padding: 3px 2px 2px; min-height: 0; }
.cat-caja { border: 1px solid var(--btn); background: var(--superficie); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.fams { display: flex; align-items: center; gap: 6px; height: 42px; padding: 5px 3px 3px; border-bottom: 1px solid var(--btn); flex: none; }
.fams .tpv { height: 32px; padding: 0 12px; flex: none; }
.fams .sel-fam { width: 150px; font-weight: 700; }
.chips { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; }
.rotulo-prod { font-size: 11px; color: var(--suave); padding: 5px 4px 0; flex: none; }
.mosaico { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); grid-auto-rows: 96px; gap: 3px; padding: 3px; align-content: start; }
.celular .mosaico { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); grid-auto-rows: 92px; }
.tarjeta { position: relative; border: 0; padding: 0; border-radius: 6px; overflow: hidden; background: #2d3445; color: #fff; text-align: left; display: flex; flex-direction: column; }
.tarjeta:hover { filter: brightness(1.08); } .tarjeta:active { filter: brightness(.85); }
.tarjeta .ini { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; font-weight: 600; font-size: 40px; line-height: 1; color: #33445c; overflow: hidden; }
.celular .tarjeta .ini { font-size: 34px; }
.tarjeta .ini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }      /* ocupa justo el área sobre el nombre y el precio: la foto se ve completa (antes crecía por su alto natural y la tapaba el nombre) */
.tarjeta .n { padding: 3px 6px 0; font-size: 11.5px; line-height: 1.15; height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta .p { padding: 0 6px 3px; font-weight: 700; font-size: 12px; color: #f5b13c; }
.mostrando { grid-column: 1 / -1; text-align: center; color: var(--suave); font-size: 12px; padding: 4px; }
.cat-nav { display: flex; flex-direction: column; gap: 6px; }
.cat-nav .tpv { flex: 1; min-height: 34px; font-size: 18px; }
.cat-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- total, cobrar, botonera, teclado ---------- */
.total-caja { border: 1px solid var(--btn); background: var(--superficie); padding: 3px 12px 4px; height: 62px; flex: none; display: flex; flex-direction: column; }
.total-caja .et-total { font-size: 11px; font-weight: 700; color: var(--suave); letter-spacing: .5px; }
.total-caja .monto { flex: 1; display: flex; align-items: center; justify-content: flex-end; font-size: 38px; font-weight: 700; color: var(--primario); line-height: 1; }
.cobrar { height: 46px; flex: none; font-size: 19px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.cobrar svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cobrar small { font-size: 15px; font-weight: 700; opacity: .75; }
.botonera { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex: none; padding: 4px 2px; }
.bot { height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11.5px; font-weight: 600; }
.bot svg { width: 22px; height: 22px; color: var(--ic, var(--texto)); fill: currentColor; stroke: none; }
.bot.act { background: var(--primario); border-color: transparent; color: var(--primario-texto); }
.bot.act svg { color: #1b1e19; }
.teclado { flex: 1 1 auto; min-height: 0; max-height: 360px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(44px, 1fr); gap: 6px; padding: 4px 2px; }      /* las teclas crecen para usar el espacio que sobra bajo el teclado (antes quedaba vacío en pantallas grandes) */
.tecla { background: var(--superficie); font-size: 19px; font-weight: 500; }
.tecla.entrar { grid-row: span 2; font-size: 16px; font-weight: 600; background: var(--entrar); color: #fff; }
.tecla.cero { grid-column: span 2; }
.tecla.peq { font-size: 14px; }

/* ---------- ventanas ---------- */
.capa { position: fixed; inset: 0; background: rgba(8, 14, 12, .6); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 12px; }
.ventana { background: var(--superficie); border: 1px solid var(--btn); border-radius: 10px; box-shadow: 0 16px 48px rgba(0, 0, 0, .5); width: min(500px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.ventana.ancha { width: min(760px, 100%); }
.ventana > header { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--btn); background: var(--superficie2); }
.ventana > header h2 { flex: 1; margin: 0; font-size: 16px; }
.ventana > .cuerpo-v { padding: 10px 14px 12px; overflow-y: auto; flex: 1; min-height: 0; }
.ventana > footer { display: flex; gap: 6px; justify-content: flex-end; padding: 8px 14px 12px; flex-wrap: wrap; }
.formas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.pagos-lista { margin: 8px 0; display: grid; gap: 4px; }
.pagos-lista .p { display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--superficie2); border-radius: 7px; }
.pagos-lista .p b { flex: 1; font-weight: 600; }
.resumen-cobro { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; font-size: 15px; margin: 4px 0 2px; align-items: baseline; }
.resumen-cobro .grande { font-size: 28px; font-weight: 700; color: var(--primario); }
.error-v { color: var(--peligro); font-weight: 600; margin-top: 8px; min-height: 1.3em; }
.papel { background: #f6f7f4; color: #1b1e19; font-family: Consolas, var(--mono); font-size: 12.5px; line-height: 1.3; padding: 12px 14px; border-radius: 4px; white-space: pre; overflow-x: auto; text-align: left; margin: 0 auto; width: fit-content; max-width: 100%; }
.opc-lista { display: grid; gap: 4px; }
.opc-lista button { display: flex; justify-content: space-between; align-items: center; text-align: left; min-height: 42px; border: 1px solid var(--btn); background: var(--superficie2); border-radius: 7px; padding: 0 12px; font-weight: 600; }
.opc-lista button:hover { filter: brightness(1.12); }
.opc-lista button small { color: var(--suave); font-weight: 400; }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aviso { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 90; background: #1b1e19; color: #fff; padding: 9px 16px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); max-width: min(92vw, 520px); text-align: center; font-weight: 600; border: 1px solid #444; }
.aviso.mal { background: #a53a28; }
.cargando { display: grid; place-items: center; height: 100%; color: var(--suave); font-weight: 600; }

/* hasta 1100 px de ancho no cabe todo: sin número de línea ni código (la descripción es lo importante) */
@media (max-width: 1100px) {
  .cols, .lin-fila { --cols: minmax(60px, 1fr) 96px 76px 48px 90px 38px; }
  .cols > :nth-child(-n+2), .lin-fila > :nth-child(-n+2) { display: none; }
}
/* ---------- tablet de pie o ventana angosta (720 a 900 px): franja y columna derecha más angostas, sin código ni número de línea ---------- */
@media (min-width: 720px) and (max-width: 900px) {
  .riel { width: 66px; } .riel button { font-size: 11px; } .riel svg { width: 24px; height: 24px; }
  .marco { grid-template-columns: minmax(0, 1fr) 250px; }
  .logo-fto { display: none; } .enc { grid-template-columns: minmax(0, 1fr) auto; }
  .cols, .lin-fila { --cols: minmax(60px, 1fr) 100px 72px 46px 84px 38px; }
  .cols > :nth-child(-n+2), .lin-fila > :nth-child(-n+2) { display: none; }
  .total-caja .monto { font-size: 38px; }
  .tecla { font-size: 19px; }
}

/* ---------- celular (reglas de Android) ---------- */
.celular .riel { display: none; }
.celular .marco { border: 0; grid-template-columns: minmax(0, 1fr) 190px; }
.celular .izq { grid-template-rows: minmax(0, 1fr) auto; }
.celular .izq.cat-abierto { grid-template-rows: minmax(0, 1fr) auto minmax(0, 1.1fr); }
.celular .logo-fto, .celular .enc .dat { display: none; }
.celular .enc { grid-template-columns: minmax(0, 1fr) auto; min-height: 0; }
.celular .ticket { grid-template-rows: 44px 38px 22px minmax(0, 1fr) 24px; }
.celular .enc .fila { display: none; }
.celular .enc .tit { font-size: 14px; padding-left: 6px; }
.celular .x-cancelar { width: 36px; height: 36px; font-size: 20px; margin-right: 4px; }
.celular .cols, .celular .lin-fila { --cols: minmax(40px, 1fr) 96px 70px 34px; padding-right: 0; }
.celular .cols > :nth-child(1), .celular .cols > :nth-child(2), .celular .cols > :nth-child(5), .celular .cols > :nth-child(6),
.celular .lin-fila > :nth-child(1), .celular .lin-fila > :nth-child(2), .celular .lin-fila > :nth-child(5), .celular .lin-fila > :nth-child(6) { display: none; }
.celular .cols { padding-right: 36px; }
.celular .lineas-caja { grid-template-columns: minmax(0, 1fr); } .celular .flechas { display: none; }
.celular .lin-fila .nom { white-space: normal; font-size: 13px; line-height: 1.15; padding: 3px 4px; }
.celular .barra-cat { display: flex; }
.celular .izq:not(.cat-abierto) .cat { display: none; }

.celular .cat { grid-template-columns: minmax(0, 1fr); } .celular .cat-nav { display: none; }
.celular .teclado { display: none; }
.celular .botonera { grid-template-columns: repeat(2, 1fr); } .celular .bot { height: 50px; font-size: 11px; } .celular .bot svg { width: 20px; height: 20px; }
.celular .total-caja { height: 56px; } .celular .total-caja .monto { font-size: 28px; }
.celular .cobrar { height: 46px; font-size: 18px; } .celular .cobrar small { display: none; }
.celular .estado-barra .der-txt { display: none; }
.celular:not(.retrato) .izq.cat-abierto .enc { display: none; }
.celular:not(.retrato) .izq.cat-abierto .ticket { grid-template-rows: 38px 22px minmax(0, 1fr) 24px; }
/* celular de pie: ticket a todo el ancho, el catálogo sube como hoja y la barra de cobro va abajo */
.retrato .marco { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.retrato .der { flex-direction: row; align-items: stretch; padding: 2px; gap: 4px; }
.retrato .der .botonera { display: none; }
.retrato .der .total-caja { flex: 1; height: auto; min-height: 52px; padding: 2px 10px; }
.retrato .der .cobrar { width: auto; flex: 1.1; height: auto; min-height: 52px; }
.retrato .estado-barra { display: none; }
@media (max-height: 420px) { .retrato .enc, .retrato .resumen { display: none; } .retrato .ticket { grid-template-rows: 38px 22px minmax(0, 1fr); } .retrato .barra-cat { min-height: 34px; } }

@media print {
  body { overflow: visible; background: #fff; }
  #app, #aviso, .capa > .ventana > header, .capa > .ventana > footer { display: none !important; }
  .capa { position: static; background: none; padding: 0; display: block; }
  .ventana { box-shadow: none; border: 0; width: auto; display: block; overflow: visible; }
  .ventana > .cuerpo-v { padding: 0; overflow: visible; }
  .papel { background: #fff; padding: 0; font-size: 12px; }
  @page { margin: 4mm; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Menú / panel de opciones (tabla de una línea por opción) ---------- */
.menu-cab, .menu-fila { display: grid; grid-template-columns: 230px minmax(0, 1fr) 84px; align-items: center; gap: 10px; }
.menu-cab { margin-top: 8px; padding: 6px 10px 4px; border-bottom: 2px solid var(--btn); font-size: 12px; font-weight: 700; color: var(--suave); }
.menu-cab .d { text-align: right; }
.menu-grupo { padding: 10px 10px 3px; font-size: 12px; font-weight: 800; color: var(--primario); letter-spacing: .4px; }
.menu-fila { width: 100%; min-height: 38px; padding: 0 10px; background: none; border: 0; border-bottom: 1px solid var(--borde); text-align: left; color: var(--texto); }
.menu-fila:hover:not(:disabled), .menu-fila:focus-visible { background: var(--superficie2); }
.menu-fila:disabled { opacity: .45; cursor: default; }
.menu-fila b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-fila span { font-size: 12.5px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-fila kbd { justify-self: end; font: 600 11.5px var(--font, inherit); background: var(--superficie2); color: var(--suave); border-radius: 5px; padding: 1px 7px; }
.menu-fila kbd:empty { display: none; }
.celular .menu-cab { display: none; } .celular .menu-fila { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 10px; } .celular .menu-fila span { display: none; }

/* ---------- resumen de la venta (llena el hueco de la columna derecha en pantallas altas) ---------- */
.resumen-venta { flex: 1; min-height: 0; overflow: hidden; border: 1px solid var(--btn); background: var(--superficie); padding: 6px 12px; display: flex; flex-direction: column; justify-content: center; gap: 3px; font-size: 13px; }
.resumen-venta .rv { display: flex; justify-content: space-between; gap: 8px; color: var(--suave); }
.resumen-venta .rv b { color: var(--texto); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; }
.resumen-venta .rv.ahorro b { color: var(--exito); }
.resumen-venta .rv.gran { font-size: 15px; border-top: 1px solid var(--borde); padding-top: 5px; margin-top: 2px; }
.resumen-venta .rv.gran b { font-weight: 800; }
.celular .resumen-venta { display: none; }
/* Con la escala (ventana más baja que 1366 × 768) el diseño ya cabe entero y el resumen se queda; sin escala (táctil, tablets) se oculta en alturas bajas. */
@media (max-height: 760px) { html:not(.con-escala) .resumen-venta { display: none; } }

/* marca SOL & LUNA (símbolos de /admin/marca.js): colores de la marca sobre fondo claro y oscuro */
.m-flor { fill: #284c4d; } .m-nombre { fill: #c67c14; } .m-sub { fill: #4a6159; }
:root[data-tema="oscuro"] .m-flor { fill: #f5f8f7; } :root[data-tema="oscuro"] .m-nombre { fill: #e0912a; } :root[data-tema="oscuro"] .m-sub { fill: #a2bcb4; }
@media (prefers-color-scheme: dark) { :root[data-tema="auto"] .m-flor { fill: #f5f8f7; } :root[data-tema="auto"] .m-nombre { fill: #e0912a; } :root[data-tema="auto"] .m-sub { fill: #a2bcb4; } }
.logo-fto svg { width: 100%; height: 100%; }
.logo-fto b { background: var(--exito); }
.riel-marca .placa { width: 100%; padding: 6px 4px 4px; }
.riel-marca .placa svg { width: 100%; height: auto; display: block; }

/* marca discreta de la plataforma en la barra de abajo (el logo del encabezado es el del cliente) */
.estado-barra .hecho { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--borde); font-weight: 700; letter-spacing: .6px; }
.estado-barra .hecho svg { width: 22px; height: 13px; } .estado-barra .hecho .m-flor { fill: var(--suave); }

/* logo OFICIAL del TPV (flor carbón sobre oro, marca/iconos/icono-TPV_oficial_*): arriba de la franja y pequeño en la barra de abajo */
.riel-marca { flex-direction: column; gap: 4px; align-content: center; justify-items: center; }
.riel-marca img { width: 50px; height: 50px; display: block; border-radius: 12px; }
.riel-marca span { font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px; color: #e0912a; white-space: nowrap; }
.estado-barra .hecho img { width: 18px; height: 18px; border-radius: 5px; display: block; }
.estado-barra .hecho { gap: 7px; }

/* ---------- efectos al pasar el mouse, al enfocar con el teclado y al tocar: ningún botón se siente tieso ---------- */
.tpv, .btn, .tarjeta, .bot, .tecla, .resultado, .menu-fila, .opc-lista button, .riel button, .lin-fila, .quitar, .cant .mm {
  transition: filter .12s ease, transform .1s ease, background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
@media (hover: hover) {
  .tpv:hover:not(:disabled), .btn:hover:not(:disabled) { filter: brightness(1.28); border-color: var(--primario); box-shadow: 0 3px 10px rgba(0, 0, 0, .35); transform: translateY(-1px); }
  .tpv.prim:hover:not(:disabled), .tpv.exito:hover:not(:disabled), .btn.prim:hover:not(:disabled), .btn.exito:hover:not(:disabled), .tpv.entrar:hover:not(:disabled), .bot.act:hover:not(:disabled) { filter: brightness(1.1); border-color: rgba(255, 255, 255, .7); }
  .tarjeta:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .45); }
  .riel button:hover { background: rgba(255, 255, 255, .16); } .riel button:hover svg, .riel button:hover span { transform: scale(1.06); }
  .lin-fila:hover:not(.sel) { background: color-mix(in srgb, var(--primario) 9%, var(--superficie)); }
  .quitar:hover { background: color-mix(in srgb, var(--peligro) 20%, transparent); border-radius: 8px; }
  .cant .mm:hover { filter: brightness(1.35); border-color: var(--primario); transform: scale(1.12); }
  .resultado:hover:not(.activo), .menu-fila:hover:not(:disabled), .opc-lista button:hover { background: color-mix(in srgb, var(--primario) 13%, var(--superficie2)); }
}
.tpv:active:not(:disabled), .btn:active:not(:disabled), .bot:active, .tecla:active { transform: translateY(0) scale(.96); filter: brightness(.82); box-shadow: none; }
.tarjeta:active { transform: scale(.97); filter: brightness(.88); }
.riel button:active { background: rgba(255, 255, 255, .24); }
.riel svg, .riel span { transition: transform .12s ease; }
@media (prefers-reduced-motion: reduce) { .tpv:hover, .btn:hover, .tarjeta:hover, .cant .mm:hover { transform: none !important; } }

/* precio unitario bajo el nombre cuando no caben las columnas Precio y Dto (tablet de pie y celular) */
.lin-fila .nom .pu { display: none; color: var(--suave); font-size: 11.5px; font-weight: 400; line-height: 1.1; }
@media (min-width: 720px) and (max-width: 900px) {
  .cols, .lin-fila { --cols: minmax(60px, 1fr) 104px 86px 38px; }
  .cols > :nth-child(-n+2), .lin-fila > :nth-child(-n+2), .cols > :nth-child(5), .cols > :nth-child(6), .lin-fila > :nth-child(5), .lin-fila > :nth-child(6) { display: none; }
  .lin-fila .nom { white-space: normal; padding: 3px 4px; line-height: 1.15; }
  .lin-fila .nom .pu { display: block; }
  .riel-marca span { font-size: 8px; letter-spacing: 1px; }
}
.celular .lin-fila .nom .pu { display: block; }
/* campo de captura: el texto de ayuda con el tono suave del tema */
.captura input::placeholder, .campo::placeholder { color: var(--suave); opacity: .85; }

/* celular horizontal: la botonera de la derecha se desplaza con el dedo (sin barra visible) y no se corta */
.celular:not(.retrato) .botonera { flex: 1; min-height: 0; overflow-y: auto; align-content: start; scrollbar-width: none; gap: 4px; padding: 2px; -webkit-overflow-scrolling: touch; }
.celular:not(.retrato) .botonera::-webkit-scrollbar { display: none; }
.celular:not(.retrato) .bot { height: 42px; flex: none; }
.celular:not(.retrato) .der { padding: 2px 4px 2px 2px; gap: 4px; }

/* ---------- globos de ayuda (nombre, qué hace y atajo; los textos son los de Windows) ---------- */
.globo { position: fixed; z-index: 120; max-width: 320px; padding: 8px 12px 9px; border-radius: 8px; background: #101a17; color: #eef6f2; border: 1px solid #4a7470; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); font-size: 12.5px; line-height: 1.35; pointer-events: none; display: block; }
.globo[hidden] { display: none; }
.globo b { font-size: 13px; margin-right: 8px; }
.globo kbd { font: 700 11px/1 inherit; background: #284c4d; color: #e8f0ec; border-radius: 4px; padding: 2px 6px; }
.globo span { display: block; margin-top: 3px; color: #cfe0d9; }

/* ---------- ajustes finos del carrito ---------- */
/* la línea «N línea(s) · Agregar nota · Mostrando…» mide lo mismo que la lista del carrito (no se mete bajo las flechas ▲▼) */
.resumen { margin: 2px 38px 0 2px; padding: 0 10px; height: 100%; align-self: stretch; }
.celular .resumen { margin-right: 2px; }
/* la X de cancelar la venta: más chica, centrada en el encabezado y sin tanto bloque de color */
.x-cancelar { width: 40px; height: 40px; margin: 0 14px 0 4px; font-size: 20px; align-self: center; color: var(--peligro); background: color-mix(in srgb, var(--peligro) 12%, var(--boton)); border-color: color-mix(in srgb, var(--peligro) 55%, var(--btn)); }
.celular .x-cancelar { width: 34px; height: 34px; font-size: 17px; margin-right: 4px; }

#e-ultimo { cursor: pointer; } #e-ultimo:hover { color: var(--texto); text-decoration: underline; }

/* ---------- pulido del celular (6-nov): encabezado con aire, estado corto y sin cosas pegadas al borde ---------- */
.celular .enc { padding: 0 6px 0 2px; }
.celular .enc .centro { padding: 0 4px 0 4px; }
.celular .enc .fila0 { gap: 8px; }
.celular .enc .tit { font-size: 14px; padding-left: 4px; }
.celular .enc .estado { gap: 8px; }
.celular .pildora { padding: 4px 10px; font-size: 12px; max-width: none; }
.celular .pildora .mas-txt { display: none; }
.celular .punto { width: 10px; height: 10px; }
.celular #b-menu { width: 38px !important; height: 34px !important; }
.celular .x-cancelar { width: 38px; height: 34px; margin: 0 0 0 2px; font-size: 17px; }
.celular .captura { gap: 8px; padding: 4px 6px; }
.celular .captura .botones { gap: 8px; }
.celular .captura .botones .tpv { height: 38px; }
.celular .captura input { height: 38px; }
.celular .ticket { grid-template-rows: 46px 48px 22px minmax(0, 1fr) 24px; }
.celular:not(.retrato) .izq.cat-abierto .ticket { grid-template-rows: 48px 22px minmax(0, 1fr) 24px; }

/* ---------- tablet de pie (6-nov): sin franja izquierda (todo sale del botón de menú del encabezado) y botones CUADRADOS, no estirados;
   la columna derecha se ensancha para que los cuadros sean cómodos y lo que sobra de alto lo toma el resumen de la venta ---------- */
body.tablet-pie .riel { display: none; }
body.tablet-pie .marco { grid-template-columns: minmax(0, 1fr) 300px; }
body.tablet-pie .izq { grid-template-rows: minmax(230px, 1fr) minmax(0, 1fr); }
body.tablet-pie .enc .estado { gap: 8px; }
body.tablet-pie #b-menu { width: 40px !important; height: 34px !important; }
body.tablet-pie .der .botonera { flex: none; grid-auto-rows: auto; gap: 8px; }
body.tablet-pie .der .bot { height: auto; aspect-ratio: 1.55; min-height: 0; }
body.tablet-pie .der .teclado { flex: none; grid-auto-rows: auto; gap: 8px; }
body.tablet-pie .der .teclado .tecla { height: auto; min-height: 0; }
body.tablet-pie .der .teclado .tecla:not(.cero):not(.entrar) { aspect-ratio: 1; font-size: 22px; }
body.tablet-pie .der .teclado .tecla.peq { font-size: 15px; }
body.tablet-pie .der .teclado .tecla.entrar { font-size: 18px; }
body.tablet-pie .der .resumen-venta { flex: 1; min-height: 0; }
body.tablet-pie .cat { grid-template-columns: minmax(0, 1fr); }
body.tablet-pie .der .cat-nav { flex: none; flex-direction: row; gap: 8px; padding: 0 2px; }
body.tablet-pie .der .cat-nav .tpv { flex: 1; min-width: 0; width: auto; height: auto; aspect-ratio: 1; min-height: 0; }
body.tablet-pie .der .cat-nav svg { width: 22px; height: 22px; }
body.tablet-pie .lineas-caja { grid-template-columns: minmax(0, 1fr); } body.tablet-pie .flechas { display: none; }
body.tablet-pie .pildora .mas-txt { display: none; }
body.tablet-pie .enc .tit { font-size: 15px; }
/* tablet de pie: el botón del menú va en la esquina superior izquierda (donde estaba la franja) */
body.tablet-pie .enc .estado { display: contents; }
body.tablet-pie .enc .fila0 { gap: 10px; }
body.tablet-pie #b-menu { order: -1; }
body.tablet-pie .enc .tit { order: 0; }
body.tablet-pie .enc .pildora, body.tablet-pie .enc .punto { order: 1; }

/* Barra lateral izquierda más compacta (escritorio): menos ancha, botones y logo más bajos para dejar más espacio al carrito. En tablet/celular ya tiene sus propias medidas. */
@media (min-width: 901px) {
  .riel { width: 66px; }
  .riel-marca { height: 64px; padding: 4px; } .riel-marca img { width: 38px; height: 38px; border-radius: 10px; } .riel-marca span { font-size: 8.5px; letter-spacing: 1.1px; }
  .riel button { height: 58px; gap: 3px; font-size: 11.5px; } .riel svg { width: 24px; height: 24px; }
}

/* Demostración terminada: pantalla de bloqueo */
.bloqueo-demo { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: rgba(10, 16, 18, .82); }
.bloqueo-demo-caja { margin: auto; width: min(100%, 460px); padding: 26px 22px; border-radius: 16px; background: var(--panel, #fff); color: var(--texto, #111); box-shadow: 0 20px 60px rgba(0,0,0,.4); text-align: center; }
.bloqueo-demo-caja h2 { margin: 0 0 10px; font-size: 1.4rem; }
.bloqueo-demo-caja p { margin: 0 0 12px; line-height: 1.45; }
.bloqueo-demo-caja .suave { opacity: .75; font-size: .94rem; }
.bloqueo-demo-caja .btn { min-height: 48px; min-width: 140px; }
@media (max-width: 300px), (max-height: 420px) { .bloqueo-demo { padding: 8px; } .bloqueo-demo-caja { padding: 14px 12px; } .bloqueo-demo-caja h2 { font-size: 1.1rem; } .bloqueo-demo-caja p { font-size: .84rem; margin-bottom: 8px; } .bloqueo-demo-caja .suave { font-size: .78rem; } }