/* Réplica de la pantalla "Punto de Venta" del POS real (WinForms).
   Medidas y colores tomados del diseño real; 1946 x 1097 px (pantalla maximizada al 150%). */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #202020; overflow: hidden; font-family: "Microsoft Sans Serif", Tahoma, "Segoe UI", Arial, sans-serif; }
#stage { position: relative; width: 100%; height: calc(100% - 30px); overflow: hidden; background: #202020; }
#desk { position: absolute; left: 0; top: 0; width: 1946px; height: 1097px; transform-origin: 0 0; background: #f0f0f0; font-size: 24px; color: #000; overflow: hidden; }
#hint { height: 30px; line-height: 30px; text-align: center; font: 13px system-ui, sans-serif; color: #cfc6bb; background: #2a1f18; }
[hidden] { display: none !important; }

/* ---- menú de la ventana principal ---- */
#menubar { position: absolute; left: 0; top: 0; width: 1946px; height: 48px; background: #99b4d1; display: flex; align-items: stretch; font: 700 24px "Segoe UI", Tahoma, sans-serif; z-index: 20; }
#menubar .mi { position: relative; padding: 0 20px; display: flex; align-items: center; cursor: default; }
#menubar .mi:hover:not(.static), #menubar .mi.open { background: #7b9dc4; }
#menubar .mi.static { margin-left: auto; font-weight: 600; padding-right: 30px; }
#menubar .dd { display: none; position: absolute; left: 0; top: 48px; min-width: 360px; background: #f2f2f2; border: 1px solid #8a8a8a; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); font-weight: 400; }
#menubar .mi.open .dd { display: block; }
#menubar .dd div { padding: 10px 22px; white-space: nowrap; }
#menubar .dd div:hover { background: #91c9f7; }

/* ---- formulario ---- */
#pv { position: absolute; left: 0; top: 48px; width: 1946px; height: 1049px; background: #ffe4b5; }
#panelTop { position: absolute; left: 0; top: 0; width: 1946px; height: 94px; background: #daa520; }
#panelTop > * { position: absolute; }
#lblScan { left: 18px; top: 14px; font-weight: 700; font-size: 21px; }
#txtScan { left: 23px; top: 44px; width: 382px; height: 35px; }
#lblCantidad { left: 406px; top: 15px; font-weight: 700; font-size: 21px; }
#nudCantidad { left: 411px; top: 44px; width: 108px; height: 35px; }
#btnAgregarLinea { left: 564px; top: 18px; width: 228px; height: 61px; }
#lblAtajos { right: 15px; top: 12px; height: 70px; line-height: 70px; font: 700 20px "Segoe UI", Tahoma, sans-serif; text-align: right; white-space: nowrap; }
#panelMid { position: absolute; left: 0; top: 94px; width: 1946px; height: 955px; background: #ffe4b5; }
#panelHeader { position: absolute; left: 10px; top: 10px; width: 1926px; height: 165px; }
#panelHeader > * { position: absolute; }
#btnBuscarArticuloF3 { left: 4px; top: 5px; width: 393px; height: 64px; }
#btnGeneral { left: 4px; top: 87px; width: 393px; height: 64px; }
#lblContador { left: 1608px; top: 39px; width: 308px; height: 30px; background: #daa520; border: 1px solid #555; font: 700 18px "Microsoft Sans Serif", sans-serif; text-align: center; line-height: 28px; }
#titleBar { position: absolute; left: 10px; top: 175px; width: 1926px; height: 28px; background: #008000; color: #fff; text-align: center; font-size: 24px; line-height: 28px; }
#panelGrid { position: absolute; left: 10px; top: 203px; width: 1926px; height: 414px; background: #fff; border: 1px solid #888; overflow: auto; }
#panelBottom { position: absolute; left: 10px; top: 623px; width: 1926px; height: 322px; }

/* ---- controles tipo WinForms ---- */
.gb { position: absolute; font-weight: 700; font-size: 24px; }
.gb::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; bottom: 0; border: 2px solid #dcdcdc; border-radius: 4px; pointer-events: none; }
.gb > * { position: absolute; }
.gbt { left: 12px; top: -2px; padding: 0 4px; background: inherit; z-index: 1; line-height: 32px; }
.lbl { font-weight: 400; font-size: 24px; white-space: nowrap; line-height: 29px; }
.lbl.sm { font-weight: 700; font-size: 22.5px; }
.lbl.reg { font-weight: 400; }
.tb, input[type=text], input[type=number], input:not([type]), select {
  font: 400 24px "Microsoft Sans Serif", Tahoma, sans-serif; color: #000; background: #fff; border: 1px solid #7a7a7a; padding: 0 6px; border-radius: 0;
}
input.tb.ro { background: #fff; }
input.tb:disabled { background: #f0f0f0; color: #6d6d6d; }
.r { text-align: right; }
select { padding-right: 4px; }
.std { font: 700 24px "Microsoft Sans Serif", Tahoma, sans-serif; color: #000; background: #e1e1e1; border: 1px solid #adadad; cursor: pointer; }
.std:hover { background: #e5f1fb; border-color: #0078d7; }
.std:active { background: #cce4f7; }
.flat { font-family: "Microsoft Sans Serif", Tahoma, sans-serif; cursor: pointer; border: 1px solid #000; }
.flat.gray { background: #b4b4b4; color: #fff; font-weight: 700; font-size: 28px; }
.flat.silver { background: #c0c0c0; color: #000; font-weight: 700; font-size: 18px; border-color: #555; }
.flat.blue { background: #add8e6; color: #000; font-weight: 700; font-size: 24px; }
.flat:hover { filter: brightness(1.06); }
.flat:active { filter: brightness(.92); }
button#btnQuitarVale { background: #f0f0f0; font-size: 20px; border: 1px solid #555; }
.chk { font-weight: 700; font-size: 24px; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.chk.reg { font-weight: 400; }
.chk input, .radio input { width: 24px; height: 24px; margin: 0; }
.radio { display: flex; align-items: center; gap: 8px; font: 400 20px "Microsoft Sans Serif", sans-serif; height: 32px; }
#pnlTipoPago, #pnlFila { position: absolute; display: grid; align-content: start; gap: 0; }
#pnlFila .chk { height: 35px; font-size: 20px; }
#pnlVale > * { position: absolute; }

/* ---- cuadrícula ---- */
#dgv { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 20px; }
#dgv th { background: #f0f0f0; font: 700 24px "Microsoft Sans Serif", sans-serif; text-align: left; padding: 6px 8px; border: 1px solid #d0d0d0; position: sticky; top: 0; z-index: 1; }
#dgv td { height: 28px; padding: 0 8px; border: 1px solid #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dgv td.num { text-align: right; }
#dgv tr.sel td { background: #0078d7; color: #fff; }
#dgv td input { width: 100%; height: 26px; font: 400 20px "Microsoft Sans Serif", sans-serif; border: 1px solid #0078d7; padding: 0 4px; background: #fff; color: #000; }
#dgv tbody tr:hover:not(.sel) td { background: #f3f9ff; }

/* ---- diálogos tipo Windows ---- */
#modalRoot { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.veil { position: absolute; inset: 0; background: rgba(0, 0, 0, .28); pointer-events: auto; display: grid; place-items: center; }
.win { background: #f0f0f0; border: 1px solid #5a7aa5; box-shadow: 0 16px 50px rgba(0, 0, 0, .5); font: 400 22px "Segoe UI", Tahoma, sans-serif; color: #000; max-width: 1700px; }
.win .tt { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 0 0 16px; font-size: 22px; border-bottom: 1px solid #ddd; }
.win .tt .x { width: 56px; height: 44px; display: grid; place-items: center; cursor: pointer; font-size: 26px; }
.win .tt .x:hover { background: #e81123; color: #fff; }
.win .body { padding: 22px 26px; }
.win .btns { display: flex; justify-content: flex-end; gap: 12px; padding: 0 26px 22px; }
.win .btns button, .win button.w { font: 400 22px "Segoe UI", sans-serif; min-width: 120px; height: 44px; background: #e1e1e1; border: 1px solid #adadad; cursor: pointer; padding: 0 16px; }
.win .btns button.def { border: 2px solid #0078d7; }
.win .btns button:hover { background: #e5f1fb; border-color: #0078d7; }
.win label { display: grid; gap: 4px; font-size: 21px; margin-bottom: 14px; }
.win input, .win select { font: 400 22px "Segoe UI", sans-serif; height: 42px; border: 1px solid #7a7a7a; padding: 0 8px; background: #fff; }
.win table { border-collapse: collapse; width: 100%; font-size: 20px; }
.win th { text-align: left; background: #f0f0f0; border: 1px solid #d0d0d0; padding: 6px 8px; font-weight: 700; }
.win td { border: 1px solid #e0e0e0; padding: 5px 8px; }
.win tr.row:hover td { background: #cce8ff; cursor: pointer; }
.msg { display: flex; gap: 18px; align-items: flex-start; }
.msg .ico { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 30px; }
.ico.i { background: #1e88e5; } .ico.w { background: #f9a825; color: #000; } .ico.e { background: #d32f2f; } .ico.q { background: #1e88e5; }
.ticket { width: 470px; background: #fff; font: 400 20px "Courier New", monospace; padding: 22px 26px; color: #000; line-height: 1.25; }
.ticket h4 { margin: 0; text-align: center; font-size: 24px; }
.ticket .c { text-align: center; }
.ticket hr { border: 0; border-top: 2px dashed #000; margin: 8px 0; }
.ticket .row { display: flex; justify-content: space-between; gap: 10px; }
.ticket .ln { margin: 4px 0; }
.ticket .big { font-size: 26px; font-weight: 700; }
.toastw { position: absolute; right: 24px; bottom: 24px; background: #fff7d6; border: 1px solid #c9a227; border-left: 8px solid #daa520; padding: 14px 18px; font: 400 22px "Segoe UI", sans-serif; max-width: 760px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); z-index: 60; }