/* TPV de demostración · misma distribución y colores que el TPV de referencia (1280×968). */
:root {
  --marino: #1a2c6c; --marino2: #15428b; --negro: #2d2e30; --sel: #1672c0; --boton: #e8f1fc; --boton-borde: #a8c6ee;
  --cian: #0879bd; --verde: #2fbf68; --rojo: #ff6f61; --gris: #e6e6e6; --gris2: #c8c8c8; --gris3: #b4b4b4; --tinta: #1b2a5e;
}
* { box-sizing: border-box; }
html { font-size: min(1.25vw, 1.653vh); height: 100%; }
body { margin: 0; height: 100%; font-family: 'Poppins', 'Segoe UI', Arial, sans-serif; font-size: .8rem; color: #111; background: var(--gris2); overflow: hidden; user-select: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
svg { width: 1em; height: 1em; fill: currentColor; flex: none; }
svg[fill="none"], svg [fill="none"] { fill: none; }
.logo { font-weight: 600; letter-spacing: .28em; color: #fff; font-size: 1.15rem; display: inline-flex; align-items: center; gap: .5rem; }
.logo i { font-style: normal; letter-spacing: .08em; font-size: .7rem; background: radial-gradient(circle at 40% 40%, #35c8ff, #0b62c9); border-radius: 50%; width: 2.3rem; height: 2.3rem; display: inline-grid; place-items: center; }

/* ---------- inicio de sesión ---------- */
#login { height: 100%; display: grid; place-items: center; background: linear-gradient(160deg, #0b63c5, #1378d6 60%, #0a4fa3); }
.login-caja { width: 62rem; background: #e4e5e9; box-shadow: 0 .6rem 2.5rem #0007; }
.login-cab { background: var(--marino); color: #fff; height: 3.7rem; display: flex; align-items: center; padding: 0 1.2rem; gap: 1rem; }
.login-cab b { flex: 1; text-align: center; font-weight: 400; font-size: 1.15rem; }
.login-cuerpo { padding: 2.2rem 8.2rem 1.2rem; }
.login-tit { display: flex; gap: 1.4rem; align-items: center; margin-bottom: 1.6rem; }
.login-tit svg { font-size: 3.6rem; color: var(--marino); }
.login-tit b { display: block; font-size: 1.2rem; font-weight: 500; } .login-tit span { font-size: .95rem; }
.login-campo { display: flex; align-items: center; background: #fff; height: 3.2rem; margin-bottom: .25rem; border-bottom: .15rem solid transparent; }
.login-campo:focus-within { border-bottom-color: var(--marino); }
.login-campo svg { font-size: 2rem; margin: 0 .6rem; color: #e39a12; }
.login-campo input { flex: 1; border: 0; outline: 0; height: 100%; font-size: 1rem; background: transparent; user-select: text; }
.login-error { color: #c62828; min-height: 1.4rem; margin: .5rem 0; font-weight: 500; }
.login-botones { display: flex; gap: 1.1rem; align-items: center; }
.login-botones button { width: 12.4rem; height: 3.7rem; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; }
.b-verde { background: var(--verde); } .b-rojo { background: var(--rojo); }

/* ---------- estructura ---------- */
#tpv { height: 100%; display: grid; grid-template-rows: 3.5rem 1fr 1.25rem; }
.barra { background: var(--marino); color: #fff; display: flex; align-items: center; padding: 0 .3rem 0 .5rem; gap: 1.6rem; }
.barra-datos { flex: 1; font-size: .72rem; display: grid; gap: .35rem; }
.barra-datos div { display: flex; align-items: center; gap: .9rem; } .barra-datos svg { font-size: .85rem; }
.terminal { border: .09rem solid #fff; border-radius: .25rem; padding: .15rem .9rem; font-weight: 600; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
.terminales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding-bottom: 1.6rem; }
.terminales button { height: 8rem; background: var(--marino2); color: #fff; border: 0; font-size: 1.4rem; font-weight: 500; display: grid; place-content: center; gap: .3rem; }
.terminales button small { font-size: .78rem; font-weight: 400; opacity: .9; }
.terminales button.en-uso { background: #7a8499; }
.cambiar-terminal { margin-left: auto; color: var(--marino2); font-size: .85rem; }
.apagar { background: none; border: 0; color: #fff; font-size: 2.3rem; display: grid; place-items: center; padding: 0 .1rem; }
footer { background: var(--marino2); color: #fff; font-size: .68rem; display: flex; align-items: center; justify-content: center; gap: .7rem; position: relative; }
main { display: grid; grid-template-columns: 47.1% 27.2% 12.9% 12.8%; min-height: 0; background: var(--gris2); }

/* ---------- izquierda: documento ---------- */
.izq { display: grid; grid-template-rows: 1.9rem 10.6rem 1fr 4.6rem 2.3rem 4.1rem 2.1rem; min-height: 0; background: #fff; border-right: .12rem solid var(--gris2); }
.pestanas { background: var(--gris2); display: flex; align-items: flex-end; }
#pestanas { display: flex; flex: 1; overflow: hidden; gap: .1rem; }
.pestana { background: #dcdde1; border: 0; padding: .15rem .55rem; font-size: .88rem; height: 1.6rem; white-space: nowrap; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; color: #333; }
.pestana.activa { background: #f0f1f4; color: #000; }
.pest-acc button { background: none; border: 0; color: var(--marino2); font-size: .8rem; padding: 0 .6rem .25rem; }
.cab { display: grid; grid-template-columns: 39.5% 1fr; gap: .25rem; padding: .25rem .2rem; }
.cliente { border: .07rem solid #999; box-shadow: .1rem .1rem .15rem #0003; padding: .3rem .6rem; font-size: .72rem; line-height: 1.42; overflow: hidden; }
.cliente h3 { margin: 0 0 .1rem; font-weight: 500; font-size: .85rem; color: #000; display: flex; gap: .5rem; align-items: center; } .cliente h3 svg { color: var(--marino); }
.cliente u { color: var(--marino2); } .cliente div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: .4rem; }
.docinfo { display: grid; grid-template-rows: 2rem 2rem 1fr; }
.doc-tipo, .doc-fecha { text-align: right; padding: .4rem .2rem 0; font-size: .82rem; border-bottom: .06rem solid #eee; }
.doc-fecha { display: flex; justify-content: flex-end; gap: .8rem; align-items: center; padding: 0 .2rem; } .doc-fecha svg { color: var(--marino); }
.dirs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
.dirs > div { border: .07rem solid #999; padding: .3rem .5rem; font-size: .72rem; overflow: hidden; } .dirs u { color: var(--marino2); } .dirs p { margin: .3rem 0 0; }
.tabla { position: relative; overflow: auto; border-top: .06rem solid #999; }
table { border-collapse: collapse; width: 100%; }
.tabla table { table-layout: fixed; }
.tabla th:nth-child(1) { width: 2.6%; } .tabla th:nth-child(2) { width: 27%; } .tabla th:nth-child(3) { width: 8.6%; } .tabla th:nth-child(4) { width: 5.6%; }
.tabla th:nth-child(5) { width: 8.6%; } .tabla th:nth-child(6) { width: 8.6%; } .tabla th:nth-child(7) { width: 6.4%; } .tabla th:nth-child(8) { width: 10.6%; }
.tabla th:nth-child(9) { width: 6.4%; } .tabla th:nth-child(10) { width: 8.2%; } .tabla th:nth-child(11) { width: 7.4%; }
.tabla td { overflow: hidden; text-overflow: ellipsis; }
.tabla th { background: var(--negro); color: #fff; font-weight: 500; font-size: .52rem; overflow: hidden; height: 2.6rem; padding: 0 .2rem; border-right: .06rem solid #fff; position: sticky; top: 0; white-space: nowrap; }
.tabla th.i { text-align: left; }
.tabla td { height: 2.55rem; padding: 0 .16rem; font-size: .68rem; border-right: .06rem solid #e3e3e3; border-bottom: .06rem solid #eee; text-align: right; white-space: nowrap; }
.tabla td:nth-child(2) { text-align: left; white-space: normal; line-height: 1.15; }
.tabla td:nth-child(2) span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tabla td:nth-child(4), .tabla td:nth-child(9), .tabla td:nth-child(11) { text-align: left; }
.tabla tr.sel td { background: var(--sel); color: #fff; font-weight: 500; border-color: #3b8fd6; }
.tabla td.neg { color: #d32f2f; }
.vacio { position: absolute; inset: 2.6rem 0 0; display: grid; place-items: center; color: #9eb1c9; font-size: 6.5rem; pointer-events: none; }
.resumen { border-top: .2rem solid var(--gris); padding: .25rem .1rem; font-size: .8rem; display: grid; gap: .45rem; align-content: start; }
.resumen > div { display: grid; grid-template-columns: 38% 36% 1fr; } .resumen span:nth-child(2) { text-align: right; } .resumen span:nth-child(3) { text-align: right; }
.resumen u { color: var(--marino); }
.total { background: var(--gris); display: flex; justify-content: space-between; align-items: center; padding: 0 .2rem; font-size: 1.3rem; font-weight: 600; border-bottom: .15rem solid var(--gris2); }
.pagos { margin: .25rem .25rem .2rem; box-shadow: 0 .12rem .3rem #0005; padding: .25rem .4rem; font-size: .76rem; overflow: auto; display: flex; flex-wrap: wrap; gap: .1rem 1.4rem; align-content: flex-start; }
.pagos button { border: 0; background: none; padding: 0; display: flex; gap: .4rem; align-items: center; text-transform: uppercase; } .pagos button:hover { color: #c62828; text-decoration: line-through; }
.pagos .cambio { color: #1b7e3c; font-weight: 600; }
.pendiente { background: #f0f1f4; display: flex; justify-content: space-between; align-items: center; padding: 0 .3rem; font-size: .92rem; font-weight: 500; }
.pendiente b { color: #d81b1b; font-weight: 600; } .pendiente b.cero { color: #e02020; }

/* ---------- centro: acciones ---------- */
.centro { padding: .25rem .5rem .25rem .2rem; display: flex; flex-direction: column; gap: .3rem; min-height: 0; }
.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.bt { background: var(--boton); border: .07rem solid var(--boton-borde); color: var(--tinta); height: 2.65rem; font-size: .8rem; padding: 0 .3rem; }
.bt:active, .pago:active, .finalizar:active, .mod:active, .subbt:active { filter: brightness(.92); }
.bt:disabled, .pago:disabled { opacity: .45; cursor: default; }
.bt.desplegable, .bt.mini { display: flex; align-items: center; justify-content: center; position: relative; }
.bt.desplegable i { position: absolute; right: .55rem; font-style: normal; font-size: .6rem; } .bt.mini i { position: absolute; right: .3rem; font-style: normal; color: #7d8fb3; }
.bt.mini { font-size: .74rem; } .bt.aviso { border-top-color: #f0b35c; } .bt.ancho { width: 100%; flex: none; }
.buscar { height: 4.4rem; border: .09rem solid #222; text-align: center; font-size: 1.45rem; font-weight: 500; outline: 0; user-select: text; flex: none; width: 100%; }
.buscar::placeholder { color: #555; } .buscar:focus::placeholder { color: #bbb; }
.linea-actual { border: .07rem solid var(--boton-borde); margin: 0; padding: .15rem .15rem .2rem; display: grid; gap: .15rem; background: #fff; flex: 1; min-height: 0; grid-template-rows: 3.1rem 3.1rem 6.4rem 1fr; }
.linea-actual legend { font-size: .58rem; padding: 0 .3rem; margin-left: .3rem; }
.linea-actual label { border: .06rem solid #cfd6e2; font-size: .58rem; color: #444; padding: .1rem .25rem; display: block; overflow: hidden; }
.linea-actual label b { display: block; font-weight: 500; font-size: .84rem; color: #000; margin-top: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1rem; }
.linea-actual label b.d { text-align: right; }
.la2 { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem; }
.la3 { display: grid; grid-template-columns: 1fr 1fr 6.5rem; grid-template-rows: 1fr 1fr; gap: .15rem; }
.cant { grid-column: 3; grid-row: 1 / 3; border: .07rem solid #222; display: grid; grid-template-columns: 1fr 3.3rem; align-items: center; }
.cant > b { text-align: center; font-size: 1rem; font-weight: 600; }
.cant div { display: grid; height: 100%; padding: .1rem; gap: .08rem; } .cant button { background: var(--marino2); color: #fff; border: 0; font-size: 2rem; line-height: 1; font-weight: 500; }
.cobro .pago { background: var(--cian); border: 0; color: #fff; height: 2.75rem; font-size: .88rem; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 2.2rem; }
.pago svg { font-size: 1.9rem; }
.finalizar { background: var(--verde); border: 0; color: #fff; height: 3.6rem; font-size: .98rem; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: .6rem; flex: none; }
.finalizar span:first-child { font-size: 1.9rem; line-height: 1; }

/* ---------- submenú y módulos ---------- */
.sub { background: var(--gris); padding: .15rem .25rem; display: flex; flex-direction: column; gap: .3rem; border-right: .3rem solid var(--gris3); }
.subbt { background: var(--boton); border: .07rem solid var(--boton-borde); color: var(--tinta); height: 6.6rem; font-size: .82rem; padding: 0 .4rem; }
.subbt.activo { background: #d4e6fb; font-weight: 500; }
.modulos { display: grid; grid-template-rows: repeat(5, 1fr); gap: .35rem; background: var(--gris3); }
.mod { background: #e9eaee; border: 0; color: #777; font-weight: 600; letter-spacing: .06em; font-size: .9rem; border-bottom: .3rem solid transparent; }
.mod.activo { background: #fafafa; color: var(--cian); border-bottom-color: var(--cian); }

/* ---------- diálogos ---------- */
#capa { position: fixed; inset: 0; background: #0000002e; display: grid; place-items: center; z-index: 10; }
.dlg { background: #dfe1e7; box-shadow: 0 .4rem 2rem #0008; display: flex; flex-direction: column; max-height: 92vh; max-width: 96vw; }
.dlg > h2 { background: #000; color: #fff; margin: 0; height: 2.35rem; display: flex; align-items: center; padding: 0 1.5rem; font-size: 1.1rem; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; flex: none; }
.dlg-c { padding: .9rem; overflow: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .7rem; }
.dlg-b { display: flex; justify-content: flex-end; gap: .3rem; padding: 0 .9rem .9rem; flex: none; }
.dlg-b button, .btn { height: 3.2rem; min-width: 9.4rem; border: .06rem solid #0002; font-size: .9rem; padding: 0 1rem; background: var(--cian); color: #fff; }
.dlg-b button.sec, .btn.sec { background: #a9a9a9; } .dlg-b button.ok { background: var(--verde); } .dlg-b button.mal { background: var(--rojo); }
.dlg-b button:disabled { opacity: .5; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.1rem; }
.campo { display: grid; gap: .25rem; font-size: .62rem; color: #333; } .campo.todo { grid-column: 1 / -1; }
.campo input, .campo select, .campo textarea { height: 2.9rem; border: 0; background: #fff; padding: 0 .8rem; font-size: .95rem; outline: 0; user-select: text; width: 100%; }
.campo textarea { height: 5rem; padding: .5rem .8rem; resize: none; }
.campo input::placeholder { font-style: italic; color: #666; } .campo input:focus, .campo select:focus { box-shadow: inset 0 -.15rem var(--marino); }
.con-boton { display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: end; } .con-boton .btn { height: 2.9rem; min-width: 4.2rem; font-size: 1rem; }
.lista { background: #fff; overflow: auto; flex: 1; min-height: 12rem; max-height: 22.5rem; }
.lista th { background: #fff; font-weight: 400; font-size: .72rem; height: 2.7rem; border-bottom: .12rem solid #000; border-right: .06rem solid #ddd; position: sticky; top: 0; padding: 0 .4rem; white-space: nowrap; }
.lista td { height: 2.75rem; font-size: .76rem; padding: 0 .3rem; border-right: .06rem solid #ddd; white-space: nowrap; }
.lista td.d, .lista th.d { text-align: right; } .lista tr:nth-child(odd) td { background: #f0f1f4; }
.lista tr.sel td { background: var(--sel); color: #fff; font-weight: 600; }
.lista { outline: 0; } .lista:focus { box-shadow: 0 0 0 .12rem var(--marino2); }
.lista .nada { text-align: center; color: #666; height: 6rem; font-size: .8rem; }
.teclado { display: grid; grid-template-columns: repeat(3, 4.4rem); gap: .3rem; }
.teclado button { height: 3.6rem; background: #fff; border: .06rem solid #b9c2d3; font-size: 1.3rem; } .teclado button.c { background: var(--rojo); color: #fff; }
.importe { height: 3.6rem; background: #fff; border: .09rem solid #222; font-size: 1.7rem; text-align: right; padding: 0 .8rem; width: 100%; outline: 0; user-select: text; }
.dos { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; }
.grande { font-size: 1.5rem; font-weight: 600; } .verde { color: #1b7e3c; } .rojo { color: #d32f2f; }
.pares { display: grid; grid-template-columns: 1fr auto; gap: .5rem 2rem; font-size: .9rem; align-items: center; } .pares b { text-align: right; }
.opciones { display: grid; gap: .3rem; } .opciones button { height: 3rem; background: var(--boton); border: .07rem solid var(--boton-borde); color: var(--tinta); font-size: .85rem; text-align: left; padding: 0 1rem; }
.opciones button.activo { background: var(--cian); color: #fff; border-color: var(--cian); }
.conmuta { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; } .conmuta button { height: 2.8rem; background: #fff; border: .07rem solid var(--boton-borde); font-size: .85rem; } .conmuta button.activo { background: var(--marino2); color: #fff; }
.rapidos { display: flex; gap: .3rem; flex-wrap: wrap; } .rapidos button { height: 2.6rem; min-width: 4rem; background: var(--boton); border: .07rem solid var(--boton-borde); color: var(--tinta); font-size: .85rem; }
.arqueo { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 1rem; }
.arqueo h4 { margin: 0 0 .4rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; }
.monedas { display: grid; grid-template-columns: 4.5rem 4.6rem 1fr; gap: .22rem .5rem; align-items: center; font-size: .72rem; }
.monedas input { height: 1.75rem; border: 0; background: #fff; text-align: right; padding: 0 .4rem; font-size: .75rem; width: 100%; outline: 0; user-select: text; } .monedas span:nth-child(3n) { text-align: right; }
.nota-dlg { font-size: .78rem; color: #444; }
#aviso { position: fixed; left: 50%; top: 4.2rem; transform: translateX(-50%); background: #1c1c1c; color: #fff; padding: .7rem 1.4rem; font-size: .85rem; z-index: 30; box-shadow: 0 .3rem 1rem #0007; max-width: 60rem; }
#aviso.error { background: #c62828; } #aviso.bien { background: #1b7e3c; }

@media print { body { display: none; } }