/* ====================================================================
   YAVA POS — Pantalla de supermercado (PC, fullscreen)
   Carpeta /pos · independiente de /lora · usa /api/v1
   ==================================================================== */
:root {
    --pos-bg:        #eef1f6;
    --pos-card:      #ffffff;
    --pos-border:    #e2e8f0;
    --pos-text:      #0f172a;
    --pos-text-2:    #475569;
    --pos-muted:     #94a3b8;
    --pos-primary:   #2563eb;
    --pos-primary-d: #1d4ed8;
    --pos-success:   #16a34a;
    --pos-success-d: #15803d;
    --pos-danger:    #dc2626;
    --pos-warning:   #f59e0b;
    --pos-yava:      #c00000;
    --pos-yava-d:    #8b0000;
    --pos-shadow:    0 1px 3px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.04);
    --pos-shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 12px 32px rgba(15,23,42,.06);
    --pos-radius:    10px;
    --pos-radius-lg: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--pos-text);
    background: var(--pos-bg);
    overflow: hidden;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; }

/* TOPBAR (#appbar) */
#appbar {
    height: 56px;
    display: flex; align-items: center; gap: 1rem;
    padding: 0 1rem;
    background: linear-gradient(135deg, var(--pos-yava), var(--pos-yava-d));
    color: #fff;
    box-shadow: 0 2px 8px rgba(192,0,0,.25);
    z-index: 10;
    position: relative;
}
#appbar .brand {
    font-weight: 900; font-size: 1.15rem; letter-spacing: .04em;
}
#appbar .brand .ya {
    background: #fff; color: var(--pos-yava);
    padding: 0 .35em; border-radius: 6px; margin-right: .1em;
}
#appbar .empresa {
    font-weight: 700; font-size: 1.05rem; opacity: .95;
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#appbar .meta { font-size: .85rem; opacity: .9; display: flex; gap: .5rem; align-items: center; }
#appbar .meta .pill {
    background: rgba(255,255,255,.18);
    padding: .3rem .7rem; border-radius: 999px; font-weight: 600;
}
#appbar a, #appbar button {
    color: #fff; background: rgba(255,255,255,.15);
    border: 0; padding: .45rem .9rem; border-radius: 8px;
    font-size: .85rem; font-weight: 600; text-decoration: none;
    cursor: pointer; transition: background .15s;
}
#appbar a:hover, #appbar button:hover { background: rgba(255,255,255,.28); }

/* MAIN */
#app { height: calc(100vh - 56px); overflow: hidden; }

/* LOGIN */
.pos-login {
    height: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.pos-login .card {
    background: #fff; border-radius: var(--pos-radius-lg);
    box-shadow: var(--pos-shadow-md); padding: 2.5rem; max-width: 400px; width: 100%;
}
.pos-login h1 {
    margin: 0 0 .3rem; font-size: 1.8rem; text-align: center; font-weight: 900;
}
.pos-login h1 .ya {
    background: var(--pos-yava); color: #fff; padding: 0 .3em; border-radius: 8px; margin-right: .1em;
}
.pos-login .sub { text-align: center; color: var(--pos-muted); margin-bottom: 1.5rem; font-size: .92rem; }
.pos-login label { display: block; font-size: .8rem; font-weight: 700; color: var(--pos-text-2); margin: .8rem 0 .3rem; text-transform: uppercase; letter-spacing: .04em; }
.pos-login input {
    width: 100%; padding: .7rem .9rem; border: 1px solid var(--pos-border); border-radius: 8px;
    font-size: 1rem; background: #fff;
}
.pos-login input:focus { outline: none; border-color: var(--pos-yava); box-shadow: 0 0 0 3px rgba(192,0,0,.15); }
.pos-login button {
    width: 100%; padding: .9rem; background: var(--pos-yava); color: #fff;
    border: 0; border-radius: 8px; font-weight: 800; font-size: 1rem; cursor: pointer;
    margin-top: 1.2rem; letter-spacing: .03em;
}
.pos-login button:hover { background: var(--pos-yava-d); }
.pos-login .err { color: var(--pos-danger); font-size: .85rem; margin-top: .6rem; }

/* ============= POS GRID PRINCIPAL ============= */
.pos-app {
    display: grid;
    grid-template-columns: 1fr 420px;
    height: 100%;
    overflow: hidden;
}
@media (max-width: 1100px) { .pos-app { grid-template-columns: 1fr 360px; } }

/* IZQUIERDA */
.pos-left {
    display: flex; flex-direction: column;
    padding: 1rem; overflow: hidden; min-width: 0;
}
.pos-search-row { display: flex; gap: .6rem; margin-bottom: .8rem; }
.pos-search { flex: 1; position: relative; }
.pos-search input {
    width: 100%; padding: .85rem 1rem .85rem 3rem;
    border: 2px solid var(--pos-border); border-radius: var(--pos-radius);
    font-size: 1.05rem; background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.pos-search input:focus {
    outline: none; border-color: var(--pos-primary);
    box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.pos-search::before {
    content: "🔍"; position: absolute; left: 1rem; top: 50%;
    transform: translateY(-50%); font-size: 1.1rem; opacity: .5; pointer-events: none;
}
.pos-search-results {
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
    background: #fff; border: 1px solid var(--pos-border); border-radius: var(--pos-radius);
    box-shadow: var(--pos-shadow-md); max-height: 360px; overflow-y: auto;
    z-index: 20; display: none;
}
.pos-search-results.show { display: block; }
.pos-search-result {
    padding: .65rem .9rem; cursor: pointer; display: flex; justify-content: space-between;
    border-bottom: 1px solid #f1f5f9; gap: .6rem; align-items: center;
}
.pos-search-result:hover, .pos-search-result.active { background: #eff6ff; }
.pos-search-result .name { font-weight: 600; }
.pos-search-result .meta { font-size: .78rem; color: var(--pos-muted); }
.pos-search-result .price {
    background: #dcfce7; color: var(--pos-success-d); font-weight: 700;
    padding: .2rem .6rem; border-radius: 6px; white-space: nowrap;
}

.pos-actions { display: flex; gap: .5rem; }
.pos-actions button {
    padding: .55rem .9rem; border: 1px solid var(--pos-border); background: #fff;
    color: var(--pos-text); border-radius: var(--pos-radius); font-weight: 600;
    cursor: pointer; font-size: .85rem; transition: all .12s;
    white-space: nowrap;
}
.pos-actions button:hover { background: var(--pos-primary); color: #fff; border-color: var(--pos-primary); }

.pos-cats {
    display: flex; gap: .4rem; margin-bottom: .8rem; overflow-x: auto;
    padding-bottom: .2rem; flex-shrink: 0;
}
.pos-cat {
    padding: .45rem .9rem; background: #fff; border: 1px solid var(--pos-border);
    border-radius: 999px; font-size: .85rem; cursor: pointer; white-space: nowrap;
    font-weight: 600; color: var(--pos-text-2); transition: all .12s;
}
.pos-cat:hover { background: #f8fafc; }
.pos-cat.active {
    background: var(--pos-primary); color: #fff; border-color: var(--pos-primary);
    box-shadow: 0 2px 6px rgba(37,99,235,.3);
}

.pos-grid-wrap { flex: 1; overflow-y: auto; padding-right: .2rem; }
.pos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: .7rem;
}
.pos-tile {
    background: #fff; border: 1px solid var(--pos-border); border-radius: var(--pos-radius);
    padding: .8rem .7rem .7rem; cursor: pointer;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 100px;
    transition: all .15s; box-shadow: var(--pos-shadow);
    position: relative;
}
.pos-tile:hover {
    transform: translateY(-2px); border-color: var(--pos-primary);
    box-shadow: var(--pos-shadow-md);
}
.pos-tile:active { transform: translateY(0); }
.pos-tile .nombre {
    font-weight: 600; font-size: .9rem; line-height: 1.3;
    overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.pos-tile .row { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; }
.pos-tile .precio { font-size: 1.05rem; font-weight: 800; color: var(--pos-primary); }
.pos-tile .codigo { font-size: .68rem; color: var(--pos-muted); font-weight: 600; }

.pos-grid-empty {
    text-align: center; color: var(--pos-muted); padding: 3rem 1rem;
    font-size: .95rem;
}

/* DERECHA (CARRITO) */
.pos-right {
    background: #fff; border-left: 1px solid var(--pos-border);
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: -4px 0 12px rgba(15,23,42,.04);
}
.pos-cliente {
    padding: .5rem .9rem; border-bottom: 1px solid var(--pos-border);
    background: #f8fafc; display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    cursor: pointer; transition: background .12s;
}
.pos-cliente:hover { background: #eff6ff; }
.pos-cliente .info { min-width: 0; }
.pos-cliente .nombre {
    font-weight: 700; font-size: .92rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pos-cliente .ident { font-size: .75rem; color: var(--pos-muted); font-weight: 500; }
.pos-cliente .change {
    background: var(--pos-primary); color: #fff; border: 0; padding: .35rem .7rem;
    border-radius: 6px; font-size: .75rem; font-weight: 600; cursor: pointer; flex-shrink: 0;
}

.pos-tipo-doc { display: flex; padding: .4rem .9rem; border-bottom: 1px solid var(--pos-border); gap: .4rem; }
.pos-tipo-doc label {
    flex: 1; padding: .35rem; text-align: center; cursor: pointer;
    border: 1px solid var(--pos-border); border-radius: 7px;
    font-weight: 600; font-size: .78rem; color: var(--pos-text-2);
    transition: all .12s;
}
.pos-tipo-doc input { display: none; }
.pos-tipo-doc input:checked + label { background: var(--pos-primary); color: #fff; border-color: var(--pos-primary); }

.pos-cart-wrap { flex: 1; overflow-y: auto; padding: .5rem 0; }
.pos-cart-empty { text-align: center; padding: 4rem 1rem; color: var(--pos-muted); }
.pos-cart-empty .icon { font-size: 3rem; opacity: .4; }
.pos-cart-empty .text { margin-top: .8rem; font-size: .92rem; }

.pos-cart-item {
    padding: .7rem .9rem; border-bottom: 1px solid #eef2f7;
    display: grid; grid-template-columns: 1fr auto;
    gap: .4rem .6rem; transition: background .12s;
}
.pos-cart-item:hover { background: #fafbfc; }
.pos-cart-item .nombre {
    font-weight: 700; font-size: 1rem; line-height: 1.25;
    grid-column: 1 / 3; color: var(--pos-text);
}
.pos-cart-item .qty-row {
    display: flex; align-items: center; gap: .4rem;
    background: #f8fafc; padding: .25rem .35rem;
    border-radius: 8px; border: 1px solid #e2e8f0;
}
.pos-cart-item .qty-btn {
    width: 32px; height: 32px; border-radius: 6px;
    border: 1px solid var(--pos-border); background: #fff;
    cursor: pointer; font-weight: 800; font-size: 1.15rem;
    display: flex; align-items: center; justify-content: center;
    transition: all .12s; line-height: 1;
}
.pos-cart-item .qty-btn:hover { background: var(--pos-primary); color: #fff; border-color: var(--pos-primary); transform: scale(1.05); }
.pos-cart-item .qty-input {
    width: 50px; padding: .35rem .25rem; text-align: center;
    border: 1px solid var(--pos-border); border-radius: 6px;
    font-weight: 800; font-size: 1.1rem;
    background: #fff; color: var(--pos-text);
}
.pos-cart-item .qty-input:focus { outline: none; border-color: var(--pos-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.pos-cart-item .precio-input {
    width: 85px; padding: .35rem .5rem; text-align: right;
    border: 1px solid var(--pos-border); border-radius: 6px;
    font-weight: 700; font-size: 1rem;
    background: #fff; color: var(--pos-text-2);
}
.pos-cart-item .precio-input:focus { outline: none; border-color: var(--pos-warning); box-shadow: 0 0 0 3px rgba(245,158,11,.12); color: var(--pos-text); }
.pos-cart-item .subtotal {
    font-weight: 900; font-size: 1.25rem; text-align: right; color: var(--pos-primary);
    align-self: center; padding-left: .8rem;
    letter-spacing: -.01em;
}
.pos-cart-item .x {
    color: var(--pos-muted); font-weight: 800; font-size: 1rem; padding: 0 .15rem;
}

.pos-totals {
    background: #f8fafc; border-top: 1px solid var(--pos-border);
    padding: .35rem .9rem .25rem;
}
.pos-totals .row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .05rem 0; font-size: .78rem; color: var(--pos-text-2);
}
.pos-totals .row.mini { font-size: .72rem; color: var(--pos-muted); }
.pos-totals .row.mini b { color: var(--pos-text); font-weight: 800; }
.pos-totals .row.grand {
    font-size: 1.55rem; font-weight: 900; color: var(--pos-text);
    border-top: 1px solid var(--pos-border); margin-top: .15rem; padding-top: .25rem;
}
.pos-totals .row.grand .lbl { font-size: .78rem; color: var(--pos-muted); font-weight: 700; letter-spacing: .05em; }

.pos-pay {
    padding: .35rem .8rem .45rem;
    background: #f8fafc;
    display: flex; flex-direction: column; gap: .25rem;
}
.pos-pay-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: .35rem;
}
.pos-pay select, .pos-pay input {
    padding: .45rem .6rem; border: 1px solid var(--pos-border); border-radius: 7px;
    font-size: .88rem; font-weight: 700; background: #fff; width: 100%;
}
.pos-pay input { text-align: right; }
.pos-pay-obs {
    text-align: left !important; font-weight: 500 !important; font-size: .82rem !important;
}
.pos-pay select:focus, .pos-pay input:focus {
    outline: none; border-color: var(--pos-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.pos-pay-vuelto {
    display: flex; justify-content: space-between; align-items: center;
    padding: .25rem .55rem; background: #f0fdf4; border-radius: 6px;
    border: 1px dashed #86efac;
    font-weight: 800; color: var(--pos-success-d); font-size: .95rem;
}
.pos-cobrar {
    padding: .85rem 1rem; background: var(--pos-success); color: #fff;
    border: 0; border-radius: var(--pos-radius);
    font-size: 1.05rem; font-weight: 800; cursor: pointer;
    box-shadow: 0 4px 12px rgba(22,163,74,.35); transition: all .15s;
    letter-spacing: .03em; margin-top: .5rem; width: 100%;
    display: flex; justify-content: space-between; align-items: center;
}
.pos-cobrar:hover { background: var(--pos-success-d); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(22,163,74,.45); }
.pos-cobrar:active { transform: translateY(0); }
.pos-cobrar:disabled { background: var(--pos-muted); cursor: not-allowed; box-shadow: none; transform: none; opacity: .6; }
.pos-cobrar .key { font-size: .7rem; opacity: .8; background: rgba(255,255,255,.2); padding: .15rem .45rem; border-radius: 5px; font-weight: 700; }

/* MODALES */
.pos-modal-bd {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: rgba(15,23,42,.55); align-items: center; justify-content: center;
    padding: 1rem;
}
.pos-modal-bd.show { display: flex; animation: posFade .15s; }
@keyframes posFade { from { opacity: 0; } to { opacity: 1; } }
.pos-modal {
    background: #fff; border-radius: var(--pos-radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    max-width: 560px; width: 100%; max-height: 90vh;
    display: flex; flex-direction: column; animation: posSlide .2s;
}
.pos-modal.lg { max-width: 720px; }
@keyframes posSlide { from { transform: translateY(15px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.pos-modal-head {
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--pos-border);
    display: flex; justify-content: space-between; align-items: center;
}
.pos-modal-head h2 { margin: 0; font-size: 1.1rem; font-weight: 800; }
.pos-modal-head .close {
    background: transparent; border: 0; cursor: pointer; font-size: 1.4rem;
    color: var(--pos-muted); padding: 0 .4rem;
}
.pos-modal-head .close:hover { color: var(--pos-danger); }
.pos-modal-body { padding: 1.25rem; overflow-y: auto; flex: 1; }
.pos-modal-foot {
    padding: .9rem 1.25rem; border-top: 1px solid var(--pos-border);
    display: flex; justify-content: flex-end; gap: .5rem; background: #f8fafc;
}
.pos-modal-foot button {
    padding: .55rem 1.1rem; border-radius: 8px; border: 1px solid var(--pos-border);
    font-weight: 600; cursor: pointer; background: #fff;
}
.pos-modal-foot button.primary { background: var(--pos-primary); color: #fff; border-color: var(--pos-primary); }
.pos-modal-foot button.success { background: var(--pos-success); color: #fff; border-color: var(--pos-success); }
.pos-modal-foot button.danger  { background: var(--pos-danger);  color: #fff; border-color: var(--pos-danger);  }

.pos-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.pos-form-grid .full { grid-column: 1 / -1; }
.pos-field { display: flex; flex-direction: column; gap: .25rem; }
.pos-field label {
    font-size: .78rem; font-weight: 700; color: var(--pos-text-2);
    text-transform: uppercase; letter-spacing: .04em;
}
.pos-field input, .pos-field select, .pos-field textarea {
    padding: .55rem .7rem; border: 1px solid var(--pos-border); border-radius: 8px;
    font-size: .92rem; background: #fff;
}
.pos-field input:focus, .pos-field select:focus, .pos-field textarea:focus {
    outline: none; border-color: var(--pos-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.pos-cobrar-modal .totals {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff; padding: 1.5rem; border-radius: var(--pos-radius); margin-bottom: 1rem;
    text-align: center;
}
.pos-cobrar-modal .totals .lbl { font-size: .82rem; opacity: .9; letter-spacing: .08em; font-weight: 700; }
.pos-cobrar-modal .totals .amt { font-size: 2.4rem; font-weight: 900; margin-top: .2rem; }
.pos-cobrar-modal .vuelto {
    background: #f0fdf4; padding: 1rem; border-radius: var(--pos-radius);
    margin-top: 1rem; text-align: center; border: 2px dashed #86efac;
}
.pos-cobrar-modal .vuelto .lbl { font-size: .8rem; color: var(--pos-text-2); font-weight: 700; }
.pos-cobrar-modal .vuelto .amt { font-size: 2rem; font-weight: 900; color: var(--pos-success-d); }

.pos-vlist { max-height: 60vh; overflow-y: auto; margin: 0 -1.25rem -1.25rem; }
.pos-vlist-item {
    padding: .65rem 1.25rem; border-bottom: 1px solid #f1f5f9;
    display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center;
}
.pos-vlist-item:hover { background: #f8fafc; }
.pos-vlist-item .folio { font-weight: 700; font-size: .9rem; }
.pos-vlist-item .meta { font-size: .75rem; color: var(--pos-muted); }
.pos-vlist-item .total { font-weight: 800; color: var(--pos-primary); font-size: .95rem; }
.pos-vlist-item button {
    background: var(--pos-primary); color: #fff; border: 0;
    padding: .35rem .7rem; border-radius: 6px; cursor: pointer;
    font-weight: 600; font-size: .78rem;
}
.pos-vlist-item button:hover { background: var(--pos-primary-d); }

/* TOAST */
.pos-toast-wrap {
    position: fixed; top: 80px; right: 20px; z-index: 2000;
    display: flex; flex-direction: column; gap: .5rem;
}
.pos-toast {
    background: #fff; border-left: 4px solid var(--pos-primary);
    padding: .7rem 1rem; border-radius: 8px; box-shadow: var(--pos-shadow-md);
    font-weight: 600; font-size: .9rem; max-width: 380px;
    animation: posToastIn .25s;
}
@keyframes posToastIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.pos-toast.success { border-color: var(--pos-success); }
.pos-toast.error   { border-color: var(--pos-danger); }
.pos-toast.warning { border-color: var(--pos-warning); }

/* LOADING */
.pos-loading {
    text-align: center; padding: 3rem 1rem;
    color: var(--pos-muted); font-weight: 600;
    height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.pos-spinner {
    width: 40px; height: 40px; margin: 0 auto .8rem;
    border: 4px solid #e5e7eb; border-top-color: var(--pos-yava);
    border-radius: 50%; animation: posSpin .8s linear infinite;
}
@keyframes posSpin { to { transform: rotate(360deg); } }

/* HINT teclado */
.pos-hint {
    position: fixed; bottom: 8px; right: 12px;
    font-size: .7rem; color: var(--pos-muted); font-weight: 600;
    background: rgba(255,255,255,.85); padding: .35rem .7rem; border-radius: 6px;
    pointer-events: none;
}
.pos-hint kbd {
    background: var(--pos-text); color: #fff; padding: 1px 5px;
    border-radius: 3px; font-family: inherit; font-size: .65rem; margin: 0 2px;
}