:root {
    --azul-oscuro: #10366d;
    --azul-medio: #235cac;
    --azul-head: #0c3f89;
    --fondo-base: #a6bfd8;
    --verde-campo: #4eb47f;
    --verde-borde: #1e7d4c;
    --boton-azul: #0d4fa5;
    --boton-azul-borde: #06316b;
    --texto-claro: #ebf4ff;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: Verdana, sans-serif, "Calibri", "Segoe UI", Tahoma, Geneva;
    background: radial-gradient(circle at top right, #b8cde2 0%, var(--fondo-base) 38%, #8eaeca 100%);
    color: #173962;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: bold;
}

.pos-shell {
    width: 100%;
    height: 100dvh;
    border: 1px solid #2c5f96;
    background: #9db8d2;
    display: grid;
    grid-template-rows: auto minmax(220px, 1fr) auto;
    overflow: hidden;
}

.top-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(250px, 20vw, 320px);
    gap: 6px;
    background: var(--azul-medio);
    padding: 5px 8px 7px;
    padding-top: 5px;
}

.top-campos-container {
    min-width: 0;
}

.top-marca-container {
    min-width: 250px;
}

.cabecera-form {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.campos-row {
    display: grid;
    gap: 5px;
    align-items: end;
}

.row-1 {
    grid-template-columns: 0.45fr 0.5fr 1.7fr 0.35fr 0.7fr 1.2fr 0.7fr;
}

.row-2 {
    grid-template-columns: minmax(260px, 1.2fr) minmax(180px, 0.8fr) minmax(140px, 0.55fr) 30px;
    margin-top: 0;
    gap: 5px;
    justify-content: start;
}

.campos-row label {
    display: grid;
    gap: 3px;
    color: var(--texto-claro);
    font-size: clamp(10px, 0.58vw, 11px);
    font-weight: 700;
    min-width: 0;
}

.campos-row input,
.campos-row select {
    width: 100%;
    height: clamp(30px, 1.8vw, 35px);
    border: 2px solid #1f5fae;
    border-radius: 5px;
    background: var(--verde-campo);
    color: #084294;
    font-weight: 800;
    font-size: clamp(13px, 0.8vw, 16px);
    line-height: 1;
    padding: 5px 10px 5px 10px;
    min-width: 0;
}


.btn-icono {
    height: clamp(30px, 1.8vw, 35px);
    border: 0;
    border-radius: 7px;
    border: 2px solid #0a4a94;
    background: linear-gradient(180deg, #ffffff 0%, #f0f4fa 100%);
    cursor: pointer;
    font-size: clamp(16px, 0.95vw, 19px);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 1px 3px rgba(6, 40, 83, 0.25);
}

.btn-icono i {
    font-size: clamp(16px, 0.95vw, 19px);
    line-height: 1;
}

/* segunda fila compacta al 60% y elevada 20px */
.row-2 label input,
.row-2 label select {
    width: 100%;
    justify-self: stretch;
}

#btnSeleccionCliente {
    width: 100%;
    justify-self: stretch;
}

.panel-derecho {
    display: grid;
    gap: 7px;
    align-content: start;
}

.logo-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    width: min(100%, 300px);
    justify-self: end;
}

.logo-epos-img {
    display: block;
    width: 100%;
    max-height: 84px;
    height: auto;
    object-fit: contain;
}

.reloj-card {
    background: #b9c7d9;
    border: 1px solid #7b95b5;
    border-radius: 8px;
    font-size: clamp(31px, 2.2vw, 45px);
    text-align: center;
    color: #1f2a37;
    font-weight: 300;
    padding: 5px 0;
    line-height: 1.05;
    width: min(100%, 300px);
    justify-self: end;
}

.monitor-linea {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.monitor-boton {
    flex: 0 0 auto;
    min-width: 0;
    border-radius: 7px;
    padding: 4px 8px;
    border: 1px solid #2b4a74;
    font-size: clamp(10px, 0.62vw, 11.5px);
    font-weight: 800;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.monitor-boton.verde { background: #197846; border-color: #105d35; }
.monitor-boton.rojo { background: #a03737; border-color: #7b2929; }

.monitores-caja {
    margin-top: 4px;
    width: 100%;
}

.monitores-caja .monitor-linea {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
}

.monitores-caja .monitor-boton {
    flex: 0 0 auto;
}

.mensaje-operacion {
    min-height: 20px;
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: clamp(11px, 0.74vw, 13px);
    font-weight: 700;
    color: #244568;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(36, 69, 104, 0.24);
}

.mensaje-operacion-success {
    color: #0d6033;
    border-color: #2f9d66;
    background: rgba(47, 157, 102, 0.14);
}

.mensaje-operacion-warn {
    color: #7a4d00;
    border-color: #d5962a;
    background: rgba(213, 150, 42, 0.16);
}

.mensaje-operacion-error {
    color: #7b1f1f;
    border-color: #ca5b5b;
    background: rgba(202, 91, 91, 0.16);
}

.mensaje-operacion-loading {
    color: #17477d;
    border-color: #4b8fd6;
    background: rgba(75, 143, 214, 0.16);
}

.toast-operacion-caja {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 4600;
    display: grid;
    gap: 8px;
    pointer-events: none;
}

.toast-operacion-caja .toast-item {
    min-width: 260px;
    max-width: 520px;
    border-radius: 7px;
    padding: 8px 10px;
    font-size: clamp(12px, 0.8vw, 14px);
    font-weight: 700;
    border: 1px solid rgba(36, 69, 104, 0.24);
    background: rgba(255, 255, 255, 0.96);
    color: #244568;
    box-shadow: 0 8px 20px rgba(8, 33, 64, 0.22);
    pointer-events: auto;
}

.toast-operacion-caja .toast-item-success {
    color: #0d6033;
    border-color: #2f9d66;
    background: #eaf8f0;
}

.toast-operacion-caja .toast-item-warn {
    color: #7a4d00;
    border-color: #d5962a;
    background: #fff7e9;
}

.toast-operacion-caja .toast-item-error {
    color: #7b1f1f;
    border-color: #ca5b5b;
    background: #fdeeee;
}

.toast-operacion-caja .toast-item-loading {
    color: #17477d;
    border-color: #4b8fd6;
    background: #eef5ff;
}

/* Regla global ePOS: botones y modales con radio 7px */
button,
.btn-icono,
.modal-contenido button,
.acciones-modal button,
.btn-mini-seleccionar,
.btn-modal-close {
    border-radius: 7px !important;
}

.modal-contenido,
.modal-contenido.modal-compacto,
.modal-cliente {
    border-radius: 7px !important;
}

.grilla {
    margin: 0;
    border-top: 2px solid #1a4f8f;
    border-bottom: 2px solid #1a4f8f;
    background: #fff;
    overflow: hidden;
    min-height: 0;
}

.grilla-head {
    display: grid;
    grid-template-columns: 4% 8% 21% 6% 13% 9% 7% 12% 5% 6% 9%;
    background: var(--azul-head);
    color: #fff;
    font-family: "Segoe UI Variable Text", "Segoe UI", Tahoma, Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(10px, 0.68vw, 12px);
    padding: 5px 8px;
    border-bottom: 2px solid #134684;
}

.grilla-body {
    height: 100%;
    overflow: auto;
    background: #d9d9d9;
}

.grilla-row {
    display: grid;
    grid-template-columns: 4% 8% 21% 6% 13% 9% 7% 12% 5% 6% 9%;
    gap: 0;
    padding: 3px 8px;
    border-bottom: 1px solid #c0c9d3;
    background: #f7f8fa;
}

.grilla-row:nth-child(even) { background: #edf1f6; }

.grilla-row span {
    font-family: "Segoe UI Variable Text", "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: clamp(11px, 0.78vw, 13px);
    font-weight: 500;
    color: #0d2e59;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.grilla-head span:nth-child(5),
.grilla-row span:nth-child(5) {
    text-align: left;
}

.grilla-head span:nth-child(6),
.grilla-head span:nth-child(7),
.grilla-head span:nth-child(8),
.grilla-head span:nth-child(9),
.grilla-head span:nth-child(10),
.grilla-head span:nth-child(11),
.grilla-row span:nth-child(6),
.grilla-row span:nth-child(7),
.grilla-row span:nth-child(8),
.grilla-row span:nth-child(9),
.grilla-row span:nth-child(10),
.grilla-row span:nth-child(11) {
    text-align: right;
}

.grilla-row span:nth-child(5) {
    overflow: visible;
    text-overflow: clip;
}

.fila-vacia {
    padding: 14px;
    color: #516176;
    font-size: clamp(14px, 0.95vw, 18px);
}

.pie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 9px 10px 10px;
    align-items: start;
}

.pie-izq { display: grid; gap: 8px; min-width: 0; }

.entrada {
    display: grid;
    grid-template-columns: minmax(320px, 500px) minmax(120px, 150px);
    gap: 10px;
    justify-content: start;
}

.entrada label {
    display: grid;
    gap: 3px;
    color: #1e4f89;
    font-size: clamp(12px, 0.72vw, 14px);
    font-weight: 700;
}

.entrada input {
    height: clamp(44px, 2.7vw, 52px);
    border-radius: 9px;
    border: 2px solid var(--verde-borde);
    background: #fff;
    font-size: clamp(18px, 1.05vw, 24px);
    font-weight: 800;
    color: #5f6b79;
    padding: 0 12px;
}

#inputCantidad { background: var(--verde-campo); color: #0c3f76; }

#inputCodigo {
    width: 100%;
    max-width: 500px;
}

#inputCantidad {
    width: 100%;
    max-width: 150px;
}

.atajos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.atajos button {
    width: clamp(96px, 7.2vw, 126px);
    min-height: clamp(94px, 6.9vw, 116px);
    border-radius: 9px;
    border: 2px solid var(--boton-azul-borde);
    background: var(--boton-azul);
    color: #fff;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    cursor: pointer;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 1px 4px rgba(8, 34, 75, 0.28);
    transition: transform .05s ease, filter .12s ease;
}

.atajos button strong {
    font-size: clamp(23px, 1.7vw, 30px);
    line-height: 1;
    color: #58c084;
}

.atajos button i {
    font-size: clamp(24px, 1.55vw, 28px);
    line-height: 1;
    color: #ffffff;
    opacity: 0.95;
}

.atajos button span {
    font-size: clamp(13px, 0.84vw, 15px);
    line-height: 1.08;
    font-weight: 800;
    text-align: center;
}

.atajos button:hover { filter: brightness(1.06); }
.atajos button:active { transform: translateY(1px); }

.totales {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.titulo-total {
    background: var(--azul-head);
    color: #fff;
    text-align: center;
    font-size: clamp(25px, 1.55vw, 34px);
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 5px;
}

.importe-total {
    color: var(--azul-head);
    font-weight: 900;
    line-height: 1;
    padding: 10px 12px 8px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
}

.importe-total .signo_peso {
    font-size: clamp(42px, 2.9vw, 66px);
    line-height: 1;
    font-weight: 900;
    color: var(--azul-head);
    flex: 0 0 auto;
}

.importe-total-valor {
    font-size: clamp(66px, 6vw, 114px);
    line-height: .92;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-align: center;
    flex: 0 1 auto;
    min-width: 0;
}

.importe-total-valor.total-largo {
    font-size: clamp(44px, 4vw, 76px);
}

.importe-total-valor.total-xl {
    font-size: clamp(36px, 3.4vw, 62px);
}

.importe-total-valor.total-xxl {
    font-size: clamp(30px, 2.8vw, 52px);
}

#modalMediosCobro .modal-contenido.modal-compacto {
    width: min(760px, 94vw);
}

#modalMediosCobro .cliente-resultados {
    max-height: 240px;
    min-height: 120px;
}

#resultadoMediosCobro .tabla-clientes {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

#resultadoMediosCobro .tabla-clientes th,
#resultadoMediosCobro .tabla-clientes td {
    border: 1px solid #c8d6e8;
    padding: 6px 8px;
    text-align: left;
}

#resultadoMediosCobro .tabla-clientes th {
    background: #e8eff9;
    color: #123f76;
    font-weight: 800;
}

#resultadoMediosCobro .tabla-clientes td:last-child,
#resultadoMediosCobro .tabla-clientes th:last-child {
    text-align: center;
    width: 88px;
}

#resultadoMediosCobro .tabla-clientes tr.fila-seleccionada {
    background: #dce9fb;
    outline: 2px solid #1f5fae;
    outline-offset: -2px;
}

#resultadoMediosCobro .tabla-clientes button {
    min-width: 60px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid #0b2f64;
    background: #0d5db3;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    border-radius: 7px;
}

.grilla_totales {
    width: min(100%, 600px);
    max-width: 600px;
    justify-self: end;
}

/* Regla fija solicitada: bloque totales con 600px de ancho */
div.totales.grilla_totales {
    width: 600px !important;
    min-width: 600px !important;
    max-width: 600px !important;
}

.box_total {
    width: 100%;
    background: var(--verde-campo);
    border: 2px solid var(--verde-borde);
    border-radius: 7px 7px 0 0;
    padding: 8px;
    min-height: 148px;
}

.detalle-total {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    background: var(--boton-azul);
    color: #dbeafe;
    padding: 7px 8px 8px;
    font-size: clamp(12px, 0.75vw, 14px);
    font-weight: 700;
    border-radius: 0 0 7px 7px;
    border: 2px solid var(--verde-borde);
    border-top: 0;
}

.detalle-total span {
    background: #d9e4f3;
    color: #0b3770;
    border-radius: 4px;
    padding: 2px 7px;
    font-weight: 900;
}

.detalle-total span b {
    margin-left: 4px;
    display: inline-grid;
    grid-template-columns: 20px auto;
    border: 1px solid #5f7ea8;
    border-radius: 6px;
    overflow: hidden;
    vertical-align: middle;
}

.detalle-monto-prefijo {
    background: linear-gradient(180deg, #3f8f6d 0%, #2f6f55 100%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.detalle-monto-valor {
    background: linear-gradient(180deg, #3d7c66 0%, #2d5f4f 100%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    padding: 2px 7px;
    line-height: 1;
}

.celda-editable {
    display: inline-grid;
    grid-template-columns: 22px minmax(68px, auto);
    align-items: center;
    border: 1px solid #7fa4d4;
    border-radius: 7px;
    overflow: hidden;
    min-height: 24px;
    vertical-align: middle;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(12, 49, 99, 0.12);
}

.celda-prefijo {
    background: #0d4fa5;
    color: #ffffff !important;
    font-weight: 900;
    font-size: 12px;
    text-align: center;
    line-height: 1;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #8aaad2;
    border-radius: 6px 0 0 6px;
}

.celda-valor {
    background: #ffffff;
    color: #1f4e87;
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    padding: 3px 6px;
}

.celda-fija {
    display: inline-grid;
    grid-template-columns: 22px minmax(68px, auto);
    align-items: center;
    border: 1px solid #8ea2bb;
    border-radius: 7px;
    overflow: hidden;
    min-height: 24px;
    vertical-align: middle;
    background: #f3f6fa;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.celda-fija-prefijo {
    background: #4eb47f;
    color: #ffffff;
    font-weight: 900;
    font-size: 12px;
    text-align: center;
    line-height: 1;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #a7b5c8;
    border-radius: 6px 0 0 6px;
}

.celda-fija-valor {
    background: #ffffff;
    color: #4d5f78;
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    padding: 3px 6px;
}

.celda-total {
    display: inline-grid;
    grid-template-columns: 22px minmax(74px, auto);
    align-items: center;
    border: 1px solid #3f8f6d;
    border-radius: 7px;
    overflow: hidden;
    min-height: 24px;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(53, 28, 117, 0.15);
}

.celda-total-prefijo {
    background: #4eb47f;
    color: #ffffff !important;
    font-weight: 900;
    font-size: 12px;
    text-align: center;
    line-height: 1;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #63a88a;
    border-radius: 6px 0 0 6px;
}

.celda-total-valor {
    background: #ffffff;
    color: #51389c;
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    padding: 3px 6px;
}

.celda-total-diferencial {
    border-color: #1e7d4c;
}

.celda-total-diferencial .celda-total-prefijo {
    background: #4eb47f;
    border-right-color: #1e7d4c;
}

.celda-total-habilitada {
    border-color: #0d4fa5;
}

.celda-total-habilitada .celda-total-prefijo {
    background: #0d4fa5;
    border-right-color: #084294;
}

.celda-imp-interno {
    display: inline-grid;
    grid-template-columns: 12px minmax(40px, auto) 12px 12px minmax(54px, auto);
    align-items: center;
    justify-content: end;
    gap: 2px;
    font-size: clamp(10px, 0.7vw, 12px) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.celda-imp-interno .imp-pref {
    color: #2e5e9e;
    font-weight: 900;
    text-align: center;
}

.celda-imp-interno .imp-val {
    text-align: right;
}

.celda-imp-interno .imp-sep {
    text-align: center;
    color: #5a6f8a;
    font-weight: 900;
}

.modal-bloqueo {
    position: fixed;
    inset: 0;
    background: rgba(4, 21, 45, .52);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 30px;
    padding-left: 12px;
    padding-right: 12px;
    z-index: 3000;
}

.modal-contenido {
    width: min(560px, 92vw);
    border: 1px solid #7ea1c5;
    border-radius: 12px;
    background: #fff;
    padding: 14px;
    max-height: calc(100dvh - 42px);
    overflow: auto;
}

.modal-contenido h3 {
    margin-top: 0;
    color: #1c4176;
    font-size: clamp(18px, 1.3vw, 24px);
}

.modal-contenido button {
    border: 1px solid #0b2f64;
    background: var(--boton-azul);
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: clamp(14px, 1vw, 18px);
}

.modal-atencion h3 { color: #f0a210; margin-bottom: 6px; }
#modalAvisoOperacion #tituloModalAvisoOperacion {
    color: #b21616;
    font-weight: 900;
    text-align: center;
}
#modalAvisoOperacion #textoModalAvisoOperacion {
    text-align: center;
    font-size: clamp(18px, 1.3vw, 24px);
    font-weight: 800;
    margin: 8px 0 6px;
}
#modalAvisoOperacion #textoModalAvisoOperacionDetalle {
    text-align: center;
    font-size: clamp(14px, 1vw, 17px);
    color: #5b6677;
    margin: 0 0 8px;
}
.titulo-grande {
    font-size: clamp(34px, 3.8vw, 64px);
    color: #9a1212;
    font-weight: 900;
    margin: 6px 0 14px;
    text-align: center;
}

.acciones-modal-caja-cerrada {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.acciones-modal-caja-cerrada #btnAbrirCaja {
    min-width: 220px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.acciones-modal-caja-cerrada #btnAbrirCaja i {
    font-size: 16px;
    line-height: 1;
}

.modal-contenido label {
    display: block;
    margin-top: 8px;
    font-size: clamp(13px, 0.9vw, 15px);
}

.modal-contenido input {
    width: 100%;
    border: 2px solid var(--verde-borde);
    border-radius: 6px;
    background: var(--verde-campo);
    color: #083a74;
    font-weight: 700;
    padding: 7px 9px;
    font-size: clamp(15px, 1.1vw, 18px);
}

.modal-contenido select {
    width: 100%;
    border: 2px solid var(--verde-borde);
    border-radius: 6px;
    background: #ffffff;
    color: #083a74;
    font-weight: 700;
    padding: 7px 9px;
    font-size: clamp(15px, 1.1vw, 18px);
}

.input-group-epos {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group-epos .input-group-prepend {
    display: flex;
}

.input-group-epos .input-group-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 0 10px;
    background: linear-gradient(180deg, #2f69ba 0%, #1d4f94 100%);
    color: #eef5ff;
    border: 2px solid var(--verde-borde);
    border-right: 0;
    border-radius: 7px 0 0 7px;
    font-weight: 800;
    font-size: 14px;
}

.input-group-epos .form-control {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 0 7px 7px 0 !important;
}

.mensaje-ayuda {
    margin: 6px 0 0;
    color: #35506f;
    font-size: 13px;
    line-height: 1.35;
}

.mensaje-error {
    min-height: 20px;
    color: #9a1212;
    font-weight: 700;
    font-size: clamp(12px, 0.84vw, 14px);
}

.acciones-modal {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 8px;
}

.acciones-modal .secundario { background: #6c7f97; border-color: #4f5f74; }

.modal-cliente {
    width: min(850px, 92vw);
    padding: 0;
}

.modal-cliente h3 {
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #d8dde7;
    color: #1f2a37;
    font-size: clamp(24px, 2vw, 36px);
    font-weight: 700;
}

.cliente-buscador {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 12px;
    padding: 14px 20px 10px;
}

.cliente-buscador input {
    height: clamp(42px, 3vw, 52px);
    font-size: clamp(18px, 1.45vw, 28px);
    border: 2px solid #1a57aa;
    background: var(--verde-campo);
}

.cliente-buscador button {
    height: clamp(42px, 3vw, 52px);
    font-size: clamp(16px, 1.2vw, 23px);
    padding: 0;
}

.cliente-resultados {
    max-height: 300px;
    min-height: 56px;
    overflow: auto;
    border-top: 1px solid #d8dde7;
    border-bottom: 1px solid #d8dde7;
    padding: 6px 20px;
}

.btn-mini-seleccionar {
    border: 1px solid #0b2f64;
    background: #0d5db3;
    color: #fff;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.btn-mini-seleccionar:hover {
    background: #0a4a8d;
}

.cliente-listado {
    width: 100%;
    border-collapse: collapse;
}

.cliente-listado th,
.cliente-listado td {
    font-size: clamp(13px, 0.95vw, 17px);
    padding: 8px 10px;
    border-bottom: 1px solid #e8edf5;
    text-align: left;
}

.cliente-listado th {
    font-size: clamp(12px, 0.86vw, 15px);
    color: #174178;
}

.cliente-listado tbody tr { cursor: pointer; }
.cliente-listado tbody tr:hover,
.cliente-listado tbody tr.activa { background: #dce9fb; }
.cliente-listado tbody tr.fila-seleccionada {
    background: #cfe2ff;
    outline: 2px solid #1f5fae;
    outline-offset: -2px;
}

.cliente-footer {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 140px;
    align-items: center;
    gap: 12px;
    padding: 14px 20px 10px;
}

.cliente-footer label {
    font-size: clamp(17px, 1.2vw, 24px);
    color: #2b3543;
}

.cliente-footer input {
    height: clamp(42px, 3vw, 52px);
    border: 2px solid #2d2d2d;
    border-radius: 6px;
    background: #fff;
    color: #083a74;
    font-size: clamp(20px, 1.5vw, 30px);
    font-weight: 800;
    padding: 0 10px;
}

.cliente-footer button {
    height: clamp(42px, 3vw, 52px);
    font-size: clamp(15px, 1.1vw, 21px);
    padding: 0;
}

.modal-cliente .mensaje-error {
    margin: 0;
    padding: 0 20px 14px;
    min-height: 30px;
}

.modal-cliente .modal-titulo-wrap {
    padding: 16px 20px;
    border-bottom: 1px solid #d8dde7;
}

.modal-cliente .modal-titulo-wrap h3 {
    padding: 0;
    border: 0;
    font-size: clamp(24px, 2vw, 36px);
    color: #1f2a37;
    font-weight: 700;
}

.modal-titulo-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.modal-titulo-wrap h3 {
    margin: 0;
}

.btn-modal-close {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #123b72;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform .08s ease, color .12s ease;
    margin-left: auto;
    align-self: center;
}

.btn-modal-close:hover {
    color: #0b2f64;
    transform: scale(1.08);
}

.btn-modal-close.btn-modal-close-texto {
    border: 1px solid #a22d2d;
    background: #bb3939;
    color: #fff;
    border-radius: 7px;
    width: auto;
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
}

.btn-modal-close.btn-modal-close-texto:hover {
    color: #fff;
    background: #992929;
    transform: none;
}

.modal-contenido.modal-compacto {
    width: min(460px, 92vw);
    padding: 12px 14px;
}

#modalCobrar .modal-contenido.modal-compacto {
    width: min(920px, 96vw);
}

.modal-contenido.modal-compacto .acciones-modal button {
    min-width: 120px;
}

.acciones-modal-supervisor {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    justify-items: stretch;
}

.acciones-modal-supervisor button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    text-align: left;
    border-width: 2px;
}

.acciones-modal-supervisor button i {
    font-size: 16px;
    line-height: 1;
    min-width: 16px;
}

.acciones-modal-supervisor button span {
    line-height: 1.2;
    font-weight: 700;
}

.consulta-precio-card {
    border: 2px solid #8ea9cb;
    border-radius: 7px;
    background: #f7fbff;
    padding: 10px;
}

.consulta-precio-card__head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.consulta-precio-card__desc {
    font-weight: 800;
    color: #0d2f5f;
    font-size: 20px;
    line-height: 1.2;
}

.consulta-precio-card__cod {
    color: #31537e;
    font-weight: 700;
    white-space: nowrap;
    align-self: flex-end;
}

.consulta-precio-card__precios {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.consulta-precio-card__celda {
    border-radius: 7px;
    border: 2px solid #adc0db;
    background: #fff;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.consulta-precio-card__celda span {
    font-size: 13px;
    font-weight: 700;
    color: #49698f;
}

.consulta-precio-card__celda strong {
    font-size: 30px;
    line-height: 1;
    color: #0d2f5f;
}

.consulta-precio-card__celda--normal {
    border-color: #8fb2dc;
}

.consulta-precio-card__celda--oferta {
    border-color: #5cbf7e;
    background: #effbf3;
}

.consulta-precio-card__celda--oferta strong {
    color: #0b7a36;
}

.consulta-precio-card__celda--oferta-inactiva {
    border-color: #d0d5dd;
    background: #f8f9fb;
}

.consulta-precio-card__celda--oferta-inactiva strong {
    color: #6a7889;
    font-size: 20px;
}

.consulta-precio-card__celda--mayorista {
    border-color: #6fa7a4;
    background: #eefaf9;
}

.consulta-precio-card__celda--mayorista strong {
    color: #0a6d6a;
}

#modalSupervisorAnularTicket p {
    margin: 6px 0;
    color: #244568;
    font-weight: 700;
}

.modal-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    align-items: end;
}

.modal-grid-2 label {
    margin-top: 0;
}

.cobro-resumen-box {
    border: 1px solid #c7d6ea;
    border-radius: 7px;
    padding: 8px 10px;
    background: #f5f9ff;
    margin-bottom: 10px;
}

#textoCobroResumen {
    margin: 0;
    text-align: center;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.3;
    color: #10366d;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

#textoCobroResumen .cobro-resumen-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 4px 10px;
    background: #eef4ff;
    font-size: 15px;
}

#textoCobroResumen .cobro-resumen-badge-total {
    background: #eef4ff;
    border-color: #bfd2f4;
}

#textoCobroResumen .cobro-resumen-badge-pagado {
    background: #ecfff4;
    border-color: #b8e8cb;
}

#textoCobroResumen .cobro-resumen-badge-saldo {
    background: #ffeef1;
    border-color: #f4b9c3;
}

#textoCobroResumen .cobro-resumen-badge-vuelto {
    background: #fff4e8;
    border-color: #efcfab;
}

#textoCobroResumen .res-total { color: #0b4fb3; }
#textoCobroResumen .res-pagado { color: #0f8a3d; }
#textoCobroResumen .res-saldo { color: #b00020; }
#textoCobroResumen .res-vuelto { color: #7b3f00; }

.cobro-promos-vacio {
    color: #35567f;
    font-size: 13px;
    font-weight: 700;
}

.cobro-promos-titulo {
    font-weight: 800;
    color: #123f76;
    margin-bottom: 4px;
}

.tabla-promos-cobro {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.tabla-promos-cobro th,
.tabla-promos-cobro td {
    border: 1px solid #c8d6e8;
    padding: 4px 6px;
    text-align: left;
}

.tabla-promos-cobro th {
    background: #e8eff9;
    color: #123f76;
}

.cobro-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 6px;
}

.cobro-form-grid label {
    margin-top: 0;
}

.monto-cobro-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
}

#inputMontoConInteresCobro {
    text-align: right;
    font-weight: 800;
    color: #0d4fa5;
    background: #eef5ff;
}

.input-lupa-wrap {
    display: grid;
    grid-template-columns: 80px 42px 1fr;
    grid-template-areas: "id btn medio";
    gap: 6px;
    align-items: center;
}

.input-lupa-wrap button {
    height: 36px;
    min-height: 36px;
    padding: 0;
}

#inputCuotasCobro {
    width: 100%;
}

#modalCobrar .acciones-modal {
    justify-content: flex-end;
}

#modalCobrar #btnConfirmarCobrar[disabled] {
    opacity: 0.55;
}

#inputMedioCobroId {
    grid-area: id;
    text-align: center;
    font-weight: 800;
}

#btnBuscarMedioCobro {
    grid-area: btn;
}

#inputMedioCobro {
    grid-area: medio;
}

.cuotas-wrap {
    display: grid;
    gap: 6px;
}

.cuotas-disponibles-box {
    border: 1px solid #bed0e6;
    border-radius: 7px;
    background: #f6fbff;
    padding: 6px 8px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
}

.cuotas-disponibles-box strong {
    color: #0d4fa5;
    font-size: 13px;
}

.cuotas-disponibles-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.btn-cuota-cobro {
    min-width: 44px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid #1f64bc;
    background: #e9f3ff;
    color: #0d4fa5;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-cuota-cobro.activo {
    background: #0d4fa5;
    color: #fff;
}

.cobro-tabla-resumen {
    margin-top: 10px;
}

.cobro-tabla-resumen .tabla-pagos-cobro th,
.cobro-tabla-resumen .tabla-pagos-cobro td {
    font-size: 12px;
    white-space: nowrap;
}

.tabla-pagos-cobro .btn-eliminar-pago {
    border: 1px solid #ad2a2a;
    background: #c73636;
    color: #fff;
    border-radius: 7px;
    width: 28px;
    height: 26px;
    padding: 0;
    line-height: 1;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.tabla-pagos-cobro .btn-eliminar-pago:hover {
    background: #a91f1f;
}

.alerta-centro-epos {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(8, 22, 40, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
}

.alerta-centro-epos.oculto {
    display: none;
}

.alerta-centro-epos__box {
    width: min(440px, 92vw);
    background: #fff8f8;
    border: 3px solid #b01d1d;
    border-radius: 7px;
    padding: 14px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

.alerta-centro-epos__box p {
    margin: 0 0 12px 0;
    color: #8f1111;
    font-weight: 800;
    text-align: center;
    font-size: 16px;
}

.alerta-centro-epos__box button {
    width: 100%;
    border: 2px solid #8d1212;
    background: #c11f1f;
    color: #fff;
    font-weight: 800;
    border-radius: 7px;
}

.alerta-centro-epos__box button:hover,
.alerta-centro-epos__box button:focus {
    background: #8f1111;
    outline: none;
    box-shadow: 0 0 0 2px rgba(193, 31, 31, 0.28);
}

#modalEditarItem .modal-contenido {
    width: min(470px, 94vw);
    padding: 14px 16px;
}

#modalEditarItem label {
    margin-top: 4px;
    margin-bottom: 6px;
    text-align: left;
    width: min(320px, 100%);
    justify-self: center;
}

#modalEditarItem input {
    margin-bottom: 4px;
}

#modalEditarItem #grupoEditarPrecio,
#modalEditarItem #grupoEditarDescuento {
    display: grid;
    justify-items: center;
    align-items: start;
}

#modalEditarItem .input-group-epos {
    width: min(320px, 100%);
}

#modalEditarItem .input-group-epos .input-group-text {
    height: 42px;
    min-width: 40px;
    font-size: 15px;
}

#modalEditarItem .input-group-epos .form-control {
    height: 42px;
    border: 2px solid var(--verde-borde);
    border-left: 0;
    background: #ffffff;
    color: #103f76;
    font-weight: 800;
    font-size: 18px;
    padding: 0 12px;
    line-height: 1;
    margin: 0;
}

#modalEditarItem .acciones-modal {
    margin-top: 10px;
    justify-content: center;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid #f0a210;
    outline-offset: 2px;
}

.oculto { display: none !important; }

input[disabled],
select[disabled],
button[disabled] {
    opacity: 0.72;
    cursor: not-allowed;
}

button.btn-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.spinner-mini {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: epos-spin 0.8s linear infinite;
}

@keyframes epos-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 1360px) {
    .top-panel { grid-template-columns: 1fr; }
    .panel-derecho { grid-template-columns: 1fr 1fr; align-items: start; }
    .pie { grid-template-columns: 1fr; }
}

@media (max-width: 1080px) {
    .pos-shell { height: auto; min-height: 100vh; }
    .row-1 { grid-template-columns: repeat(4, minmax(130px, 1fr)); }
    .row-2 { grid-template-columns: repeat(3, minmax(130px, 1fr)) 42px; }
    .panel-derecho { grid-template-columns: 1fr; }
    .grilla-head,
    .grilla-row {
        grid-template-columns: 7% 12% 28% 6% 16% 14% 10% 0 0 0 7%;
    }
    .grilla-head span:nth-child(8),
    .grilla-head span:nth-child(9),
    .grilla-head span:nth-child(10),
    .grilla-row span:nth-child(8),
    .grilla-row span:nth-child(9),
    .grilla-row span:nth-child(10) { display: none; }
    .grilla-head span:nth-child(11),
    .grilla-row span:nth-child(11) {
        text-align: right;
    }
}

@media (max-width: 760px) {
    .grilla-head,
    .grilla-row {
        grid-template-columns: 10% 22% 40% 0 14% 0 0 0 0 0 14%;
    }
    .grilla-head span:nth-child(4),
    .grilla-head span:nth-child(6),
    .grilla-head span:nth-child(7),
    .grilla-head span:nth-child(8),
    .grilla-head span:nth-child(9),
    .grilla-head span:nth-child(10),
    .grilla-row span:nth-child(4),
    .grilla-row span:nth-child(6),
    .grilla-row span:nth-child(7),
    .grilla-row span:nth-child(8),
    .grilla-row span:nth-child(9),
    .grilla-row span:nth-child(10) { display: none; }
    .entrada { grid-template-columns: 1fr; }
    .atajos button { width: calc(33.33% - 6px); }
    .monitor-linea { flex-wrap: wrap; }
    .monitor-boton { flex: 1 1 100%; }
    .cliente-buscador { grid-template-columns: 1fr; }
    .cliente-footer { grid-template-columns: 1fr; }
}