/* ============================================================
   POS PANAMA — Pantalla de caja y tickets
   Complementa app.css (design system general). No repetir tokens
   aquí: reutilizar var(--primary), var(--radius-md), etc.
   ============================================================ */

/* ── Logo de marca (login) ─────────────────────────────────── */
.auth-logo-img {
    display: block;
    width: 280px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 1.5rem;
}

/* ── Navbar de la pantalla de caja (modo pantalla completa) ──── */
.pos-caja-navbar {
    height: var(--navbar-height);
}

/* ── Layout pantalla de caja: minimalista, pensado para touchscreen ──
   Área táctil mínima de 48px (estándar de accesibilidad móvil/touch) en
   todo elemento interactivo. Feedback con :active (toque), no solo :hover
   (que no existe en pantallas táctiles). Tipografía más grande, menos
   densidad, alto contraste. */
.pos-screen {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: .75rem;
    height: calc(100vh - var(--navbar-height));
    padding: .75rem;
    overflow: hidden;
}

.pos-buscador {
    display: flex;
    gap: .5rem;
    padding: .5rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.pos-buscador input {
    font-size: 1.15rem;
    padding: .9rem 1rem;
    min-height: 52px;
    border-radius: var(--radius-md);
}

.pos-buscador .btn {
    min-height: 52px;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    font-size: .95rem;
}

/* ── Grid de líneas de venta ──────────────────────────────────── */
.pos-lineas {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.pos-linea {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px 90px 96px 140px;
    gap: .5rem;
    align-items: center;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
}

.pos-linea:last-child { border-bottom: none; }
.pos-linea .btn { min-width: 44px; min-height: 44px; padding: 0 .5rem; }
.pos-linea > div:first-child { min-width: 0; overflow-wrap: break-word; }
.pos-linea .d-flex.gap-1 { flex-wrap: nowrap; justify-content: flex-end; }

/* Stepper de cantidad: sin teclado, solo tocar +/- */
.pos-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}
.pos-stepper .btn {
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}
.pos-stepper span {
    min-width: 32px;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
}

/* ── Botones rápidos de departamento / ítem frecuente ─────────── */
.pos-botones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .6rem;
    padding: .75rem;
}

.pos-boton-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .6rem .4rem;
    height: 96px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    font-size: .82rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
    transition: transform .1s ease, background-color .1s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.pos-boton-item:active {
    background: var(--primary-light);
    transform: scale(.96);
}

/* ── Panel de totales (columna derecha, fijo) ─────────────────── */
.pos-totales {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.25rem;
    gap: .6rem;
}

.pos-totales-fila {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: var(--text-secondary);
}

.pos-totales-fila.total {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    padding-top: .6rem;
    border-top: 1px solid var(--border);
}

.pos-totales .btn {
    min-height: 56px;
    font-size: 1.1rem;
}

.pos-fkeys {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    margin-top: .5rem;
}

/* ── Botonera de departamentos / productos frecuentes ─────────── */
.pos-botonera {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}
.pos-boton-dep {
    flex: 0 0 auto;
    min-height: 44px;
    padding: .5rem 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    font-weight: 600;
    white-space: nowrap;
}
.pos-boton-dep.active {
    border-color: var(--primary, #2563eb);
    background: var(--primary, #2563eb);
    color: #fff;
}
.pos-botonera-wrap {
    position: relative;
    flex: 0 1 auto;
}
.pos-botonera-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: .5rem;
    max-height: 34vh;
    overflow-y: auto;
    padding-bottom: .25rem;
    scroll-behavior: smooth;
}
.pos-botonera-wrap::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 22px;
    background: linear-gradient(to bottom, transparent, var(--surface-2, #f8fafc));
    pointer-events: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.pos-boton-item {
    min-height: 128px;
    padding: .6rem .45rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: .35rem;
}
.pos-boton-item:active {
    border-color: var(--primary, #2563eb);
    background: #eff6ff;
}
.pos-boton-item-nombre {
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.25em * 2);
    flex-shrink: 0;
}
.pos-boton-item-precio { font-size: .78rem; font-weight: 700; color: var(--primary, #2563eb); margin-top: auto; }

.pos-boton-item-img {
    width: 44px;
    height: 44px;
    min-height: 44px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--surface-2, #f1f5f9);
    flex-shrink: 0;
}
.pos-boton-item-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #94a3b8);
    font-size: 1.1rem;
}

.pos-resultado-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--surface-2, #f1f5f9);
    flex-shrink: 0;
}
.pos-resultado-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #94a3b8);
    font-size: 1rem;
}

.pos-fkeys .btn { min-height: 48px; font-size: .85rem; }

/* ── Modal de cobro: teclado numérico rápido ──────────────────── */
.pos-teclado {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}
.pos-teclado .btn { font-size: 1.3rem; min-height: 56px; }

.pos-formas-pago {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
}
.pos-forma-pago {
    padding: 1.1rem .75rem;
    min-height: 56px;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    transition: transform .1s ease, background-color .1s ease, border-color .1s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.pos-forma-pago:active { transform: scale(.97); }
.pos-forma-pago.selected {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}

/* ── Ticket imprimible (fallback window.print / vista HTML) ───── */
.ticket {
    width: 80mm;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #000;
    padding: 4mm;
}
.ticket.ancho-32 { width: 58mm; font-size: 10px; }
.ticket .ticket-center { text-align: center; }
.ticket .ticket-linea { display: flex; justify-content: space-between; }
.ticket hr { border: none; border-top: 1px dashed #000; margin: 4px 0; }

@media print {
    body * { visibility: hidden; }
    .ticket, .ticket * { visibility: visible; }
    .ticket { position: absolute; top: 0; left: 0; width: 80mm; }
}

/* ── Estados de turno de caja ──────────────────────────────────── */
.turno-abierto  { background: #d1fae5; color: #065f46; }
.turno-cerrado  { background: #f1f5f9; color: #64748b; }