/* Estilos del POS calcando el lenguaje visual de la APP del ERP:
   fuente compacta 13px, plano (sin esquinas redondeadas), sidebar navy + top-row gris, btn-dark. */

html, body { font-size: 13px; }
a, .btn-link { color: #0071c1; }

/* FocusOnNavigate (App.razor) enfoca el h1 de cada pagina al navegar: ocultamos el contorno de foco
   del titulo para que no quede marcado, sin perder el comportamiento de foco por accesibilidad. */
h1:focus, h1:focus-visible { outline: none; }

/* Botones tactiles: tamano comodo y uniforme en toda la app (POS movil/tablet). Evitamos btn-sm/btn-lg. */
.btn { padding: 0.7rem 1rem; }

/* ===== Shell autenticado ===== */
.pos-page {
    display: flex;
    min-height: 100vh;
}

.pos-sidebar {
    background-color: #071a3a;
    width: 240px;
    min-width: 240px;
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pos-brand {
    height: 49px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
}

.pos-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 12px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.pos-nav a {
    color: #fff;
    text-decoration: none;
    height: 3rem;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    font-size: 1rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.033);
}
.pos-nav a:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}
.pos-nav a.active {
    background-color: rgba(255, 255, 255, 0.18);
}

/* Pie del menu: agrupa el usuario y el boton de cerrar sesion, anclados al fondo del sidebar. */
.pos-nav-pie {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pos-nav-usuario {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
}
.pos-nav-usuario .bi { font-size: 1.1rem; }
.pos-nav-usuario-nombre {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cerrar sesion: ultimo item del menu (dentro del pie), con el mismo look que los enlaces. */
.pos-nav-salir {
    color: #fff;
    text-align: left;
    height: 3rem;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    font-size: 1rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.033);
    cursor: pointer;
}
.pos-nav-salir:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}

.pos-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pos-topbar {
    height: 50px;
    flex: 0 0 auto;
    background-color: #f2f2f2;
    border-bottom: 1px solid #d6d5d5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 10;
}
.pos-spacer { flex: 1 1 auto; }
.pos-hamburger { display: none; }

.pos-article {
    flex: 1 1 auto;
    padding: 1.1rem 1.5rem;
    background-color: #fff;
    overflow: auto;
}

/* ===== Aviso de nueva version (PWA) ===== */
/* Overlay bloqueante: tapa toda la app (incluido el sidebar) hasta que el usuario actualice o posponga.
   Centrado, sirve igual en escritorio y movil. */
.pos-update-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(3, 23, 61, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.pos-update-card {
    background: #fff;
    color: #071a3a;
    width: 100%;
    max-width: 420px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.pos-update-icono {
    font-size: 2.4rem;
    line-height: 1;
    color: #dc3545;
    margin-bottom: .75rem;
}
.pos-update-titulo {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .5rem;
}
.pos-update-texto {
    font-size: .95rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
}
.pos-update-acciones {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* Boton de actualizar en el sidebar: rojo (alerta), arriba del menu, visible mientras haya version nueva. */
.pos-nav-actualizar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 3rem;
    padding: 0 12px;
    width: 100%;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background-color: #b02a37;
    border: 1px solid #b02a37;
    cursor: pointer;
}
.pos-nav-actualizar:hover {
    background-color: #9a242f;
    border-color: #9a242f;
}

/* Aviso rojo sobre el boton del menu (hamburguesa): marca que hay version nueva sin tener que abrir el menu. */
.pos-hamburger { position: relative; }
.pos-hamburger-alerta {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #fff;
    color: #dc3545;
    font-size: .7rem;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 1px #dc3545;
    animation: pos-alerta-pulso 1.6s ease-in-out infinite;
}
@keyframes pos-alerta-pulso {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

/* ===== Login / registro (card como la APP) ===== */
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #eef1f5;
    padding: 16px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    animation: posFadeIn 0.4s;
}

.login-head {
    background-color: #071a3a;
    color: #fff;
    text-align: center;
    padding: 18px;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 3px;
}

.login-body { padding: 22px 22px 26px; }

@keyframes posFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== Spinners (CSS puro; no usar spinner-border de Bootstrap por el bug de nuestro build) ===== */
@keyframes posSpin { to { transform: rotate(360deg); } }
.pos-badge-spinner {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.35rem;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: posSpin 0.6s linear infinite;
    vertical-align: -1px;
}
/* Chip de progreso del import en frio: el badge "Sincronizando N/M" con una barra fina debajo. */
.pos-sync-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
}
.pos-sync-progreso {
    height: 3px;
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    overflow: hidden;
}
.pos-sync-progreso > span {
    display: block;
    height: 100%;
    background-color: #fff;
    transition: width 0.3s ease;
}
.pos-spinner-lg {
    width: 44px;
    height: 44px;
    border: 4px solid #d6d5d5;
    border-top-color: #071a3a;
    border-radius: 50%;
    animation: posSpin 0.7s linear infinite;
    margin-bottom: 14px;
}

.pos-spinner-sm {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    vertical-align: -0.1em;
    border: 0.14em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: posSpin 0.7s linear infinite;
}

/* ===== Overlay que bloquea Ventas mientras carga o sin conexion ===== */
.vender-bloqueo {
    position: fixed;
    top: 50px;
    left: 240px;
    right: 0;
    bottom: 0;
    z-index: 1035;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: rgba(255, 255, 255, 0.92);
    animation: posFadeIn 0.2s ease;
}
.vender-bloqueo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 320px;
}
.vender-bloqueo-icon { font-size: 2.4rem; color: #842029; margin-bottom: 10px; }
.vender-bloqueo-txt { font-size: 1.25rem; font-weight: 700; color: #1f2a44; }
.vender-bloqueo-sub { color: #6b7689; margin: 6px 0 14px; }

/* Overlay bloqueante del listado de Ventas mientras se reconcilia/actualiza (p.ej. tras anular). */
.ventas-actualizando {
    position: fixed;
    top: 50px;
    left: 240px;
    right: 0;
    bottom: 0;
    z-index: 1035;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: rgba(255, 255, 255, 0.92);
    animation: posFadeIn 0.2s ease;
    color: #03173d;
    font-weight: 600;
}

/* ===== Pantalla de venta ===== */
.vender {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.vender-catalogo { flex: 1 1 auto; min-width: 0; }
/* Reserva espacio para que la barra flotante del carrito no tape la ultima fila. */
.vender.con-barra { padding-bottom: 84px; }

/* Buscador del catalogo: input alto, con lupa dibujada en CSS y boton para limpiar. */
.vender-buscador { position: relative; margin-bottom: 14px; }
.vender-buscador-input {
    height: 48px;
    padding-left: 40px;
    padding-right: 42px;
    font-size: 1rem;
}
.vender-buscador-lupa {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -9px;
    border: 2px solid #6b7689;
    border-radius: 50%;
    pointer-events: none;
}
.vender-buscador-lupa::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: -4px;
    width: 7px;
    height: 2px;
    background-color: #6b7689;
    transform: rotate(45deg);
}
.vender-buscador-x {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    color: #6b7689;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vender-buscador-x:hover { color: #1f2a44; }

/* Skeleton de carga del catalogo (shimmer), con la misma silueta de los tiles. */
.prod-skeleton { border: 1px solid #e9e9e9; background-color: #fff; overflow: hidden; }
.prod-skeleton-thumb { aspect-ratio: 1 / 1; }
.prod-skeleton-line { height: 11px; margin: 9px 10px; }
.prod-skeleton-line.corto { width: 55%; }
.prod-skeleton-thumb,
.prod-skeleton-line {
    background-image: linear-gradient(90deg, #eef1f5 0%, #e1e6ec 50%, #eef1f5 100%);
    background-size: 200% 100%;
    animation: posShimmer 1.2s ease-in-out infinite;
}
@keyframes posShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Estado vacio del catalogo / busqueda sin resultados. */
.vender-vacio {
    border: 1px dashed #c7cedb;
    background-color: #fff;
    padding: 40px 24px;
    text-align: center;
}
.vender-vacio-titulo { font-weight: 700; color: #1f2a44; font-size: 1.05rem; }
.vender-vacio-sub { color: #6b7689; margin: 6px 0 14px; }

.prod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.prod-tile {
    position: relative;
    background-color: #fff;
    border: 1px solid #d6d5d5;
    padding: 0;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    touch-action: manipulation;
    user-select: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.prod-tile:hover { border-color: #071a3a; box-shadow: 0 6px 16px rgba(7, 26, 58, 0.14); transform: translateY(-2px); }
.prod-tile:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(7, 26, 58, 0.12); }
.prod-tile:focus-visible { outline: 2px solid #071a3a; outline-offset: 2px; }
.prod-tile.en-carro { border-color: #071a3a; box-shadow: inset 0 0 0 1px #071a3a; }
.prod-tile.en-carro .prod-thumb { background-color: #e3e9f3; }
.prod-cant {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    background-color: #071a3a;
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.prod-tile.agregado { animation: posTilePop 0.3s ease; }
@keyframes posTilePop {
    0% { transform: scale(1); }
    45% { transform: scale(0.92); }
    75% { transform: scale(1.02); }
    100% { transform: scale(1); }
}
.prod-thumb {
    aspect-ratio: 1 / 1;
    background-color: #eef1f5;
    overflow: hidden;
}
.prod-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.prod-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 10px;
}
.prod-cod {
    font-size: 0.78rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prod-nombre {
    font-weight: 600;
    color: #1f2a44;
    line-height: 1.25;
    min-height: 2.5em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.prod-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
}
.prod-precio { font-weight: 700; color: #071a3a; font-size: 1.15rem; }
.prod-stock { font-size: 0.78rem; white-space: nowrap; color: #6b7689; }
.prod-stock.agotado { color: #842029; font-weight: 600; }

.carrito-lista {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    flex: 1 1 auto;
    overflow: auto;
}
.carrito-lista li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #eee;
}
/* Las lineas de Vender se apilan en bloque (fila principal + chips + editores). Otras listas que reusan
   .carrito-lista (p.ej. la devolucion parcial) mantienen el layout flex de arriba. */
.carrito-lista li.ci-row {
    display: block;
    padding: 10px 0;
}
/* Fila principal de la linea: datos a la izquierda, stepper + subtotal a la derecha. */
.ci-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.ci-nombre { font-weight: 600; color: #1f2a44; line-height: 1.25; }
.ci-info { min-width: 0; }
.ci-precio { margin-top: 2px; }
.ci-precio-tachado { text-decoration: line-through; margin-right: 4px; }
.ci-acc { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; white-space: nowrap; }
.ci-sub { font-size: 1.05rem; color: #071a3a; }
.ci-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #c7cedb;
    border-radius: 10px;
    overflow: hidden;
}
.ci-step {
    width: 44px;
    height: 40px;
    border: none;
    background-color: #fff;
    color: #071a3a;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}
.ci-step:hover { background-color: #eef1f5; }
.ci-step:active { background-color: #e1e6ec; }
/* La cantidad es un campo editable directamente entre - y +. Se reestiliza el MontoInput para que se vea
   como la celda central del stepper: sin borde propio, centrado y con las mismas dimensiones que los botones. */
.ci-step-campo { display: inline-flex; }
.ci-step-campo .form-control {
    width: 64px;
    height: 40px;
    padding: 0 4px;
    border: none;
    border-left: 1px solid #c7cedb;
    border-right: 1px solid #c7cedb;
    border-radius: 0;
    text-align: center !important;
    font-weight: 700;
    font-size: 1.05rem;
    color: #1f2a44;
    background-color: #fff;
}
.ci-step-campo .form-control:focus {
    outline: none;
    box-shadow: none;
    background-color: #f4f6f9;
}

/* Chips de accion bajo cada linea (cantidad / descuento), con area tactil comoda. */
.ci-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ci-chip {
    min-height: 38px;
    padding: 7px 16px;
    border: 1px solid #c7cedb;
    border-radius: 999px;
    background-color: #fff;
    color: #1f2a44;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ci-chip:hover { border-color: #071a3a; }
.ci-chip.activo { background-color: #071a3a; border-color: #071a3a; color: #fff; }
.ci-chip.con-valor { border-color: #071a3a; color: #071a3a; }
.ci-chip.con-valor.activo { color: #fff; }

/* Editor inline de cantidad / descuento: panel amplio con controles grandes. */
.ci-editor {
    margin-top: 10px;
    padding: 12px;
    background-color: #f4f6f9;
    border: 1px solid #e1e6ec;
    border-radius: 12px;
}
.ci-editor-titulo { font-weight: 700; color: #1f2a44; margin-bottom: 8px; }
.ci-editor-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ci-editor-unidad { color: #6b7689; font-weight: 600; }
.ci-editor-hint { margin-top: 8px; font-size: 0.82rem; color: #6b7689; }
.ci-campo { flex: 0 0 auto; }
.ci-campo-pct { width: 6rem; }
.ci-campo .form-control { height: 44px; font-size: 1.05rem; }
.ci-editor-ok { min-height: 44px; padding: 0 18px; }
.ci-editor-quitar { min-height: 44px; padding: 0 14px; }

/* Chips de porcentaje sugerido para el descuento (respetan el tope configurado). */
.ci-pcts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ci-pct {
    min-width: 56px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #c7cedb;
    border-radius: 10px;
    background-color: #fff;
    color: #1f2a44;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ci-pct:hover { border-color: #071a3a; }
.ci-pct.sel { background-color: #071a3a; border-color: #071a3a; color: #fff; }
.carrito-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.35rem;
    padding: 8px 0;
    border-top: 2px solid #071a3a;
    margin-bottom: 8px;
}

/* ===== Hub de secciones / placeholders ===== */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}
.hub-card {
    background-color: #fff;
    border: 1px solid #d6d5d5;
    padding: 14px;
}
.hub-card h2 { font-size: 1.1rem; margin: 0 0 3px; color: #1f2a44; }
.hub-card p { margin: 0; color: #6b7689; }

.placeholder-box {
    background-color: #fff;
    border: 1px dashed #c7cedb;
    padding: 26px;
    text-align: center;
    color: #6b7689;
}

/* ===== Responsive: sidebar off-canvas en movil ===== */
@media (max-width: 767.98px) {
    .pos-hamburger { display: inline-flex; align-items: center; }
    .pos-sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }
    .pos-sidebar.abierta { transform: translateX(0); }
    .pos-backdrop {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 1040;
    }
    .pos-topbar { padding: 0 0.6rem; gap: 8px; }
    .pos-article { padding: 0.75rem 0.6rem; }
    .vender { flex-direction: column; align-items: stretch; }
    /* Sidebar off-canvas en movil: el overlay cubre todo el ancho del contenido. */
    .vender-bloqueo { left: 0; }
    .ventas-actualizando { left: 0; }
    /* Columnas del catálogo en movil: configurable vía --pos-cols-movil (placeholder en Configuración). */
    .prod-grid {
        grid-template-columns: repeat(var(--pos-cols-movil, 2), minmax(0, 1fr));
        gap: 6px;
    }
    .prod-info { padding: 7px 8px 9px; }
    .prod-precio { font-size: 1.05rem; }

    /* Bottom-sheet: barra de "agarre" arriba, como en apps moviles. */
    .carrito-modal-head { position: relative; padding-top: 18px; }
    .carrito-modal-head::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: 2px;
        background-color: #cdd3dd;
    }
}

/* ===== Barra flotante del carrito + modal de venta actual ===== */
.carrito-bar {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1030;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background-color: #071a3a;
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    animation: posBarUp 0.25s ease;
    touch-action: manipulation;
    transition: background-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.carrito-bar:hover { background-color: #0a2350; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28); }
.carrito-bar-badge {
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    background-color: #fff;
    color: #071a3a;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: posPop 0.3s ease;
}
.carrito-bar-txt { font-weight: 700; }
.carrito-bar-total { margin-left: auto; font-weight: 700; font-size: 1.2rem; }

.carrito-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1055;
    animation: posFadeIn 0.2s ease;
}
.carrito-modal {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1056;
    max-height: 85vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.2);
    animation: posSheetUp 0.25s ease;
}
.carrito-modal-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #d6d5d5;
}
.carrito-modal-x {
    background: none;
    border: none;
    font-size: 1.9rem;
    line-height: 1;
    color: #6b7689;
    cursor: pointer;
    width: 44px;
    height: 44px;
    margin: -6px -8px -6px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}
.carrito-modal .carrito-lista { padding: 0 16px; margin: 0; }
.carrito-modal-foot {
    flex: 0 0 auto;
    padding: 12px 16px 16px;
    border-top: 1px solid #d6d5d5;
}
/* Limpiar usa una fraccion del ancho para no estorbar; Cobrar se lleva el resto. */
.carrito-acciones .btn:first-child { flex: 0 0 32%; }
.carrito-acciones .btn:last-child { flex: 1 1 auto; }

/* Paso de pago dentro del modal */
.pago-cuerpo,
.boleta {
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px;
}
.pago-resumen {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0 12px;
    border-bottom: 2px solid #071a3a;
    margin-bottom: 12px;
}
.pago-resumen > div { display: flex; flex-direction: column; }
.pago-resumen strong { font-size: 1.1rem; color: #071a3a; }
/* "Falta" es el numero que el cajero vigila: rojo si falta plata, verde cuando ya esta cubierto. */
.pago-resumen-falta strong { color: #842029; }
.pago-resumen-falta.ok strong { color: #0f5132; }
.pago-lista {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}
.pago-lista li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}
/* Medios de pago como tarjetas grandes (tactiles), con nombre + descripcion y chevron. */
.pago-medios { display: flex; flex-direction: column; gap: 8px; }
.pago-medio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 10px 14px;
    background-color: #fff;
    border: 1px solid #c7cedb;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.pago-medio:hover { border-color: #071a3a; box-shadow: 0 4px 12px rgba(7, 26, 58, 0.12); }
.pago-medio:active { transform: translateY(1px); }
.pago-medio-info { display: flex; flex-direction: column; min-width: 0; }
.pago-medio-nombre { font-weight: 700; color: #1f2a44; }
.pago-medio-desc { font-size: 0.8rem; color: #6b7689; }
.pago-medio-chevron { color: #9aa3b2; font-size: 1.5rem; line-height: 1; }

/* Efectivo: input de monto grande + botones de monto rapido (Exacto / billetes). */
.pago-monto .form-control { height: 50px; font-size: 1.3rem; font-weight: 700; }
.pago-rapido { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pago-rapido-btn {
    height: 42px;
    border: 1px solid #c7cedb;
    background-color: #fff;
    color: #071a3a;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}
.pago-rapido-btn:hover { background-color: #eef1f5; border-color: #071a3a; }
.pago-rapido-btn:active { background-color: #e1e6ec; }

/* Linea de vuelto: se resalta en verde cuando hay cambio que entregar. */
.pago-vuelto {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
    padding: 8px 10px;
    font-size: 0.85rem;
    border: 1px solid #e9e9e9;
}
.pago-vuelto.con-vuelto { background-color: #e8f3ec; border-color: #cfe6d8; }
.pago-vuelto-monto { font-weight: 700; color: #0f5132; font-size: 1.05rem; }

.pago-agregar { height: 50px; font-size: 1.05rem; }

/* Estado de pago cubierto: confirmacion clara + vuelto total. */
.pago-completo {
    text-align: center;
    padding: 18px;
    border: 1px solid #cfe6d8;
    background-color: #e8f3ec;
}
.pago-completo-txt { font-weight: 700; color: #0f5132; font-size: 1.1rem; }
.pago-completo-vuelto { color: #0f5132; margin-top: 2px; }
.pago-form {
    border: 1px solid #d6d5d5;
    padding: 12px;
    margin-bottom: 12px;
}
.pago-form-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.pago-foot {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.pago-foot .btn { flex: 1 1 0; }

/* Pie de sub-modal: botones tradicionales (tamano normal, no estirados), alineados a la derecha. */
.submodal-foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #d6d5d5;
}

/* Vista previa de boleta: aspecto de comprobante (papel angosto, centrado, separadores punteados). */
.boleta-doc {
    border: 1px solid #d6d5d5;
    padding: 16px 18px;
    margin: 0 auto 12px;
    max-width: 360px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
    font-variant-numeric: tabular-nums;
}
.boleta-cab {
    text-align: center;
    border-bottom: 1px dashed #c7cedb;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.boleta-titulo { font-weight: 700; font-size: 1.05rem; color: #1f2a44; letter-spacing: 0.4px; }
.boleta-items {
    list-style: none;
    padding: 0;
    margin: 8px 0;
    border-bottom: 1px dashed #c7cedb;
    padding-bottom: 8px;
}
.boleta-items li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
}
.boleta-desglose {
    margin-top: 8px;
}
.boleta-desglose > div {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}
.boleta-total {
    display: flex;
    justify-content: space-between;
    border-top: 2px solid #071a3a;
    padding-top: 8px;
    margin-top: 8px;
    font-size: 1.2rem;
}
.boleta-pagos {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}
.boleta-pagos > div { display: flex; justify-content: space-between; }

/* Toast de confirmacion de venta */
.pos-toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1060;
    max-width: 90vw;
    background-color: #0f5132;
    color: #fff;
    font-weight: 700;
    padding: 10px 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    animation: posFadeIn 0.2s ease;
}

@keyframes posBarUp {
    from { transform: translateY(120%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes posPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.4); }
    100% { transform: scale(1); }
}
@keyframes posSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Sub-modales apilados sobre el modal de venta (documento, pagos, vista previa). */
.pos-submodal-backdrop { z-index: 1065; }
.pos-submodal { z-index: 1066; }

/* Resumen de cobro: filas con accion Editar a la derecha. */
.cobro-fila {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #eee;
}
.cobro-fila-cuerpo { flex: 1 1 auto; min-width: 0; }
.cobro-fila-label { font-size: 0.78rem; color: #6b7689; }

/* Selector de documento: dos botones 50/50 a todo el ancho (no btn-group, que los dejaba comprimidos). */
.doc-toggle { display: flex; gap: 8px; }
.doc-toggle .btn { flex: 1 1 0; }

/* El formulario de factura vive SIEMPRE en el DOM y se expande/colapsa por altura (grid 0fr->1fr), para
   que el modal crezca/encoja de forma fluida al cambiar boleta<->factura, sin saltos de tamano. */
.doc-factura {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}
.doc-factura.abierto { grid-template-rows: 1fr; }
.doc-factura-inner { overflow: hidden; min-height: 0; }

/* Sugerencias del buscador de clientes guardados: dropdown FLOTANTE sobre el formulario, para que los
   resultados no empujen hacia abajo los inputs (RUT, razon social, etc). */
.cliente-buscador { position: relative; }
.cliente-sugerencias-pop {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 20;
    background-color: #fff;
    border: 1px solid #d6d5d5;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    max-height: 220px;
    overflow: auto;
}
.cliente-sugerencias {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cliente-sugerencias li {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.cliente-sugerencias li:last-child { border-bottom: none; }
.cliente-sugerencias li:hover { background-color: #eef1f5; }
.cliente-sugerencias-vacio { padding: 8px 10px; }

/* En pantalla grande la barra flota abajo a la derecha y el modal se centra como dialogo. */
@media (min-width: 768px) {
    .carrito-bar {
        left: auto;
        right: 24px;
        width: 320px;
    }
    .carrito-modal {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        width: 420px;
        max-height: 80vh;
        transform: translate(-50%, -50%);
        animation: posFadeIn 0.2s ease;
    }
}

/* ===== Clientes (CRUD local + detalle con documentos) ===== */
.clientes-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.cliente-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border: 1px solid #d6d5d5;
}
.cliente-lista li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.cliente-lista li:last-child { border-bottom: none; }
.cliente-lista li:hover { background-color: #eef1f5; }
.cliente-row-cuerpo { flex: 1 1 auto; min-width: 0; }
.cliente-row-chevron { color: #9aa3b2; font-size: 1.4rem; line-height: 1; }

.cliente-volver {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 10px;
    color: #1f2a44;
    font-weight: 600;
    cursor: pointer;
}

.cliente-detalle {
    background-color: #fff;
    border: 1px solid #d6d5d5;
    padding: 14px;
    margin-bottom: 14px;
}
.cliente-detalle-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.cliente-detalle-id { min-width: 0; }
.cliente-detalle-acc { display: flex; gap: 8px; white-space: nowrap; }
.cliente-datos {
    margin: 12px 0 0;
    display: grid;
    gap: 8px;
}
.cliente-datos > div { display: flex; justify-content: space-between; gap: 10px; }
.cliente-datos dt { font-size: 0.78rem; color: #6b7689; margin: 0; font-weight: 400; }
.cliente-datos dd { margin: 0; text-align: right; color: #1f2a44; }

.cliente-docs-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}
.doc-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border: 1px solid #d6d5d5;
}
.doc-lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
}
.doc-lista li:last-child { border-bottom: none; }
.doc-row-cuerpo { min-width: 0; }
.doc-tipo { font-weight: 600; color: #1f2a44; }
.doc-row-fin { text-align: right; white-space: nowrap; }
.doc-total { font-weight: 700; color: #1f2a44; }

.cliente-confirm { max-height: none; }

/* ===== Inventario ===== */
/* No dibujar el anillo de foco al clickear con mouse/táctil dentro de Inventario (pestañas, botones y
   acciones de los modales): molestaba en el uso diario. Se conserva el foco de teclado (:focus-visible)
   por accesibilidad y el de los campos de texto, que siguen marcando el campo activo al escribir. */
.inv-tabs :focus:not(:focus-visible),
.inv-cuerpo :focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}

.inv-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid #d6d5d5;
    margin-bottom: 14px;
}
.inv-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 14px;
    color: #6b7689;
    font-weight: 600;
    cursor: pointer;
}
.inv-tab:hover { color: #1f2a44; }
.inv-tab.activa {
    color: #1f2a44;
    border-bottom-color: #1f2a44;
}

.inv-sub-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.inv-sub-ayuda {
    flex: 1 1 240px;
    margin: 0;
    font-size: 0.82rem;
    color: #6b7689;
}
.inv-sub-head .btn { flex: 0 0 auto; }
.inv-buscador { margin-bottom: 12px; }
.inv-prod-ayuda { margin: 0 0 12px; font-size: 0.82rem; color: #6b7689; }

.inv-prod-stock {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    white-space: nowrap;
    line-height: 1.2;
}
.inv-stock-sala { font-weight: 600; color: #1f2a44; }
.inv-stock-sala.agotado { color: #b3261e; }

.inv-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.inv-form-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    color: #6b7689;
}
.inv-form-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}
.carrito-modal-ancho { max-width: 520px; }

.inv-stock-actual {
    margin-top: 10px;
    font-size: 0.85rem;
    color: #6b7689;
}
.inv-mov-fin {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    white-space: nowrap;
}
.inv-mov-cant { font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-mov-cant.pos { color: #1f7a3d; }
.inv-mov-cant.neg { color: #b3261e; }

/* Meta del kardex: en desktop va en una linea (bodega/fecha · vendedor/tipo); en movil se parte en dos
   lineas, bodega y fecha arriba, vendedor y tipo de venta abajo. */
.inv-mov-meta-b::before { content: " · "; }
@media (max-width: 575.98px) {
    .inv-mov-meta-a, .inv-mov-meta-b { display: block; }
    .inv-mov-meta-b::before { content: ""; }
}

.inv-stock-global { font-weight: 600; color: #1f2a44; font-variant-numeric: tabular-nums; }
.inv-stock-global.agotado { color: #b3261e; }
/* "Ver ubicacion" es un boton Bootstrap (btn-outline-secondary) en tamano normal para que sea comodo de
   tocar en el telefono; aqui solo se le da la separacion superior dentro de la columna de stock. */
.inv-stock-ubic { margin-top: 6px; }

/* Modal "stock por bodega" */
.inv-ubic-lista { list-style: none; margin: 0; padding: 0; }
.inv-ubic-lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #ececec;
}
.inv-ubic-lista li:last-child { border-bottom: none; }
.inv-ubic-cant { font-weight: 600; color: #1f2a44; font-variant-numeric: tabular-nums; }
.inv-ubic-cant.agotado { color: #9aa3b2; }

/* Filtros de Movimientos: texto + bodega, y chip del producto en seguimiento */
.inv-mov-filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-mov-filtros .inv-buscador { flex: 1 1 200px; margin-bottom: 0; }
.inv-mov-filtros .form-select { flex: 0 0 auto; width: auto; min-width: 160px; }
.inv-mov-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #eef1f5;
    border: 1px solid #d6d5d5;
    border-radius: 14px;
    padding: 4px 6px 4px 12px;
    font-size: 0.82rem;
    color: #1f2a44;
}
.inv-mov-chip-x {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: #6b7689;
    padding: 0 4px;
}
.inv-mov-chip-x:hover { color: #1f2a44; }

/* ===== Ventas (historial) ===== */
.ventas-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.ventas-fecha { width: auto; min-width: 160px; }
.ventas-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.ventas-kpi {
    background-color: #fff;
    border: 1px solid #d6d5d5;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ventas-kpi-num { font-size: 1.2rem; font-weight: 700; color: #071a3a; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ventas-kpi-lbl { font-size: 0.78rem; color: #6b7689; }
.doc-clic { cursor: pointer; }
.doc-clic:hover { background-color: #eef1f5; }

/* --- Ventas: barra de navegacion por dias --- */
.ventas-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.ventas-daynav { display: flex; align-items: stretch; gap: 8px; }
.ventas-nav-btn {
    width: 48px;
    border: 1px solid #d6d5d5;
    background-color: #fff;
    color: #1f2a44;
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ventas-nav-btn:hover:not(:disabled) { background-color: #eef1f5; }
.ventas-nav-btn:disabled { opacity: 0.4; cursor: default; }
.ventas-fecha-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #d6d5d5;
    background-color: #fff;
    padding: 8px 18px;
    min-width: 195px;
    cursor: pointer;
    margin: 0;
}
.ventas-fecha-rel { font-weight: 700; color: #071a3a; font-size: 1.12rem; line-height: 1.3; }
.ventas-fecha-input {
    border: none;
    background: transparent;
    color: #6b7689;
    font-size: 0.86rem;
    padding: 0;
    width: 100%;
    text-align: center;
    cursor: pointer;
}
.ventas-hoy { flex-shrink: 0; }
.ventas-caption {
    font-size: 0.82rem;
    color: #6b7689;
    margin-bottom: 8px;
}
.ventas-kpi-hero { background-color: #f4f7fb; border-color: #c7d4e6; }
.ventas-kpi-hero .ventas-kpi-num { color: #0a2a6b; }

/* --- Ventas: lista con arbol de notas de credito --- */
.ventas-lista { background-color: #fff; border: 1px solid #d6d5d5; }
.venta-grupo { border-bottom: 1px solid #eee; }
.venta-grupo:last-child { border-bottom: none; }
.venta-grupo.con-nc { background-color: #fffdf7; }
.venta-doc {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}
.venta-doc-info { min-width: 0; }
.venta-doc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.venta-doc-nombre { font-weight: 600; color: #1f2a44; }
.venta-doc-meta { font-size: 0.82rem; color: #6b7689; margin-top: 3px; }
.venta-doc-montos { text-align: right; white-space: nowrap; }
.venta-monto-orig {
    display: block;
    text-decoration: line-through;
    color: #9aa3b2;
    font-weight: 500;
    font-size: 0.78rem;
}
.venta-monto-final { font-weight: 700; color: #1f2a44; font-variant-numeric: tabular-nums; }
/* Notas de credito anidadas: bloque inset con conector y realce ambar. */
.venta-nc-cont { padding: 0 14px 10px 28px; }
.venta-nc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background-color: #fbf7ec;
    border-left: 3px solid #e0a800;
    position: relative;
}
.venta-nc + .venta-nc { margin-top: 6px; }
.venta-nc::before {
    content: "\21B3";
    position: absolute;
    left: -17px;
    top: 7px;
    color: #b99a3e;
    font-size: 0.95rem;
}
.venta-nc-info { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.venta-nc-nombre { font-weight: 600; color: #5b6577; font-size: 0.9rem; }
.venta-nc-meta { font-size: 0.76rem; color: #9aa3b2; }
.venta-nc-monto { color: #b02a37; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Badge ambar propio para "NC parcial" (no se usa la variante Bootstrap warning). */
.badge.badge-nc-parcial { background-color: #e0a800; color: #2a2100; }
.boleta-detalle { max-width: 460px; margin: 8px auto 0; }
.boleta-empresa { font-weight: 700; color: #071a3a; }
/* Aviso de carga mientras se reconstruye el detalle del documento desde el XML (ventas importadas). */
.ventas-cargando-detalle {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0;
    color: #03173d;
    font-size: .9rem;
}
.ventas-estado-detalle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}
/* Acciones de documento (ver PDF / descargar XML) de una venta emitida. */
.ventas-doc-acciones {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}
.ventas-doc-acciones .btn {
    flex: 1;
}
/* Selector de formato de impresion del comprobante (modal tras emitir). */
.print-opts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.print-opt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
    border: 1px solid #c7ccd6;
    border-radius: 8px;
    background: #fff;
    padding: 10px 12px;
    cursor: pointer;
}
.print-opt.sel {
    border-color: #03173d;
    box-shadow: inset 0 0 0 1px #03173d;
}
.print-opt-nombre {
    font-weight: 600;
}
.print-opt-desc {
    font-size: .8rem;
    color: #6c757d;
}
/* Vista previa del comprobante, fiel al formato del PDF termico (monoespaciado, separadores punteados). */
.cp {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 1rem;
    line-height: 1.4;
    color: #1b1b1b;
    max-width: 360px;
    margin: 0 auto;
    padding: 4px 0;
}
.cp-cab {
    text-align: center;
}
.cp-emisor {
    font-weight: 700;
}
.cp-chico {
    font-size: .85rem;
}
.cp-center {
    text-align: center;
}
.cp-tipo {
    text-align: center;
    font-weight: 700;
}
.cp-sep {
    border-top: 1px dashed #9aa0aa;
    margin: 6px 0;
}
.cp-item {
    word-break: break-word;
}
.cp-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.cp-row span:last-child {
    white-space: nowrap;
}
.cp-total {
    font-weight: 700;
    font-size: 1.1rem;
}
.cp-anulada {
    text-align: center;
    font-weight: 700;
    color: #b3261e;
}
/* Overlay de carga mientras se genera/obtiene el comprobante (tapa el selector). */
.print-cargando {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(255, 255, 255, .9);
    border-radius: inherit;
    z-index: 5;
}
.print-cargando-txt {
    font-size: .9rem;
    color: #03173d;
}
/* Visor PDF a pantalla completa dentro de la app (comprobante). */
.visor-pdf {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    background: #525659;
}
.visor-pdf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: #03173d;
    color: #fff;
}
.visor-pdf-titulo {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.visor-pdf-acc {
    display: flex;
    align-items: center;
    gap: 8px;
}
.visor-pdf-x {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.visor-pdf-frame {
    flex: 1;
    width: 100%;
    border: 0;
}
.visor-pdf-cargando {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Sello de anulacion dentro de la boleta: NC, fecha y motivo. */
.boleta-anulada {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #c7ccd6;
    text-align: center;
    color: #b3261e;
}
.boleta-anulada-sello {
    display: inline-block;
    border: 2px solid #b3261e;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 4px 12px;
    margin-bottom: 6px;
}

/* ===== Soporte ===== */
/* Tarjetas a todo el ancho disponible: lado a lado cuando hay espacio (cada una pide >=320px) y se
   apilan solas en pantallas angostas/movil gracias al flex-wrap. El boton se alinea al fondo para que
   queden parejas entre si aunque el texto sea de distinto largo. */
.soporte {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.soporte-card {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #e2e4e9;
    border-top: 3px solid #1f2a44;
    padding: 22px 22px 24px;
    box-shadow: 0 1px 3px rgba(7, 26, 58, 0.06);
}
.soporte-card h2 { color: #1f2a44; font-weight: 700; }
.soporte-card p { flex: 1 1 auto; }
.soporte-card .btn { align-self: flex-start; }

/* ===== Caja ===== */
.caja-card {
    background-color: #fff;
    border: 1px solid #d6d5d5;
    padding: 18px;
    max-width: 460px;
    margin: 0 auto 14px;
}
.caja-estado {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.caja-estado-tit { font-weight: 700; color: #1f2a44; }
.caja-punto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.caja-punto.abierta { background-color: #1f7a3d; }
.caja-punto.cerrada { background-color: #9aa3b2; }
.caja-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.caja-kpi {
    background-color: #f5f6f8;
    border: 1px solid #e6e7ea;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.caja-kpi-num { font-weight: 700; color: #071a3a; font-variant-numeric: tabular-nums; }
.caja-kpi-lbl { font-size: 0.74rem; color: #6b7689; }
.caja-linea {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}
.caja-linea:last-child { border-bottom: none; }
.caja-linea-fuerte { font-size: 1.05rem; color: #071a3a; padding-top: 10px; }
.caja-monto input { font-size: 1.25rem; }
.caja-dif {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #d6d5d5;
    font-weight: 600;
}
.caja-dif .caja-sobrante { color: #1f7a3d; }
.caja-dif .caja-faltante, .caja-faltante { color: #b3261e; }
.caja-sobrante { color: #1f7a3d; }
.caja-cierre-resumen { border-color: #c9ccd2; }

/* Movimientos de efectivo del turno (apertura + ventas en efectivo, con vuelto). */
.caja-movs {
    margin-top: 14px;
    border-top: 1px solid #e2e4e9;
    padding-top: 10px;
    max-height: 280px;
    overflow: auto;
}
.caja-movs-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-weight: 600;
    color: #1f2a44;
    margin-bottom: 6px;
}
.caja-mov {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #f0f1f3;
}
.caja-mov:last-child { border-bottom: none; }
.caja-mov-tit { font-weight: 600; color: #1f2a44; }
.caja-mov-monto { color: #1f7a3d; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== Configuracion ===== */
.cfg-card {
    background-color: #fff;
    border: 1px solid #d6d5d5;
    padding: 18px;
    max-width: 520px;
    margin: 0 auto 14px;
}
.cfg-titulo { font-size: 1.05rem; color: #1f2a44; margin: 0 0 4px; }
.cfg-foot { margin-top: 14px; text-align: right; }
.cfg-cuenta { margin-top: 6px; }
.cfg-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.cfg-card-head .cfg-titulo { margin: 0; }
.cfg-lock {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: #6b7689;
    border: 1px solid #d6d5d5;
    padding: 2px 8px;
    white-space: nowrap;
}
.cfg-ro { display: grid; gap: 6px; margin: 8px 0 10px; }
.cfg-ro > div { display: flex; justify-content: space-between; gap: 10px; }
.cfg-ro dt { font-size: 0.78rem; color: #6b7689; margin: 0; font-weight: 400; }
.cfg-ro dd { margin: 0; text-align: right; color: #1f2a44; }
.cfg-integ {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 12px;
}
.cfg-integ-logo {
    flex: 0 0 auto;
    height: 28px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}
.cfg-integ-txt { font-size: 0.82rem; color: #6b7689; }
.cfg-integ-txt a { color: #014d41; text-decoration: underline; }
.cfg-soon {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: #6b7689;
    background: #eef0f4;
    border: 1px solid #d6d5d5;
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.cfg-card-soon { opacity: 0.9; }

/* ===== Inventario: pulido UI ===== */
.inv-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}
.inv-toolbar .form-control { flex: 1 1 auto; min-width: 0; }
.inv-toolbar .btn { flex: 0 0 auto; white-space: nowrap; }
.inv-stock-bajo { font-size: 0.72rem; color: #b3261e; font-weight: 600; }
/* Listas solo informativas (no se hace clic en la fila): sin cursor/hover de clic. */
.inv-lista-info li { cursor: default; }
.inv-lista-info li:hover { background-color: transparent; }
@media (min-width: 768px) {
    .carrito-modal-ancho { width: 520px; }
}

/* ===== Paginador reutilizable ===== */
.pos-paginador {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    color: #6b7689;
    font-size: 0.82rem;
}
.pos-paginador-info { font-variant-numeric: tabular-nums; }
.pos-paginador-botones { display: flex; align-items: center; gap: 10px; }
.pos-paginador-pag { color: #1f2a44; font-weight: 600; font-variant-numeric: tabular-nums; }
.empresa-opcion { display: block; line-height: 1.35; }
.empresa-opcion__nombre { display: block; font-weight: 700; }
.empresa-opcion__meta { display: block; font-size: 0.8rem; opacity: 0.75; }