/* =============================================
   VENDO POS - tema y pantallas
   Paleta tomada del logo (azul petróleo + aqua)
   ============================================= */

:root{
	--v-900:#071624;
	--v-800:#0b1f2e;
	--v-700:#0e2a3b;
	--v-600:#12384f;
	--v-500:#17506b;
	--v-400:#1f7f93;
	--v-300:#2bb3c0;
	--v-200:#7fdbe4;
	--v-100:#e6f6f8;
	--v-bg:#f3f6f8;
	--v-card:#ffffff;
	--v-text:#0b1f2e;
	--v-muted:#6b7c87;
	--v-line:#e3e9ee;
	--v-success:#1fa36a;
	--v-danger:#d64545;
	--v-warning:#e9a23b;
	--v-radius:14px;
	--v-shadow:0 6px 24px rgba(11,31,46,.08);
}

/* ---------- Acentos dentro del CMS ---------- */

.bg-vendo{ background:var(--v-700) !important; color:#fff !important; }
.text-vendo{ color:var(--v-400) !important; }
.btn-vendo{ background:var(--v-700); color:#fff; border:0; }
.btn-vendo:hover, .btn-vendo:focus{ background:var(--v-600); color:#fff; }
.btn-aqua{ background:var(--v-300); color:var(--v-900); border:0; font-weight:600; }
.btn-aqua:hover{ background:var(--v-200); color:var(--v-900); }
.card-vendo{ border:0; border-radius:var(--v-radius); box-shadow:var(--v-shadow); }
.kpi{ border-radius:var(--v-radius); padding:18px 20px; background:#fff; box-shadow:var(--v-shadow); }
.kpi .kpi-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--v-muted); }
.kpi .kpi-value{ font-size:1.5rem; font-weight:700; color:var(--v-800); }
.kpi.dark{ background:linear-gradient(135deg,var(--v-800),var(--v-600)); color:#fff; }
.kpi.dark .kpi-label, .kpi.dark .kpi-value{ color:#fff; }
.table-vendo thead th{ background:var(--v-100); color:var(--v-700); font-weight:600; border-bottom:0; font-size:.85rem; }
.badge-soft{ background:var(--v-100); color:var(--v-600); font-weight:600; }
.badge-ok{ background:#e3f7ec; color:#13794e; }
.badge-warn{ background:#fdf1dc; color:#9a5e07; }
.badge-bad{ background:#fde6e6; color:#9b2b2b; }
.pos-page{ padding:1.25rem; }
.pos-page h4{ font-weight:700; color:var(--v-800); }
.pos-toolbar{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.pos-toolbar .form-control, .pos-toolbar .form-select{ min-width:140px; }
.v-logo{ display:inline-flex; align-items:center; gap:.5rem; font-weight:800; letter-spacing:-.02em; color:var(--v-800); }

/* ---------- Toasts y modales ligeros ---------- */

.pos-toast-wrap{ position:fixed; top:14px; right:14px; z-index:5000; display:flex; flex-direction:column; gap:8px; max-width:360px; }
.pos-toast{ background:var(--v-800); color:#fff; padding:12px 16px; border-radius:12px; box-shadow:var(--v-shadow); font-size:.92rem; animation:posIn .18s ease-out; display:flex; gap:10px; align-items:flex-start; }
.pos-toast.success{ background:var(--v-success); }
.pos-toast.error{ background:var(--v-danger); }
.pos-toast.warning{ background:var(--v-warning); color:#2b1d02; }
@keyframes posIn{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:none;} }

.pos-modal-back{ position:fixed; inset:0; background:rgba(7,22,36,.55); z-index:4000; display:flex; align-items:center; justify-content:center; padding:16px; animation:posIn .15s ease-out; }
.pos-modal{ background:#fff; border-radius:18px; width:100%; max-width:560px; max-height:94vh; display:flex; flex-direction:column; box-shadow:0 30px 60px rgba(0,0,0,.35); }
.pos-modal.lg{ max-width:860px; }
.pos-modal.xl{ max-width:1100px; }
.pos-modal-head{ padding:16px 20px; border-bottom:1px solid var(--v-line); display:flex; align-items:center; justify-content:space-between; font-weight:700; color:var(--v-800); }
.pos-modal-body{ padding:18px 20px; overflow:auto; }
.pos-modal-foot{ padding:14px 20px; border-top:1px solid var(--v-line); display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.pos-close{ background:none; border:0; font-size:1.3rem; line-height:1; color:var(--v-muted); }
.feather{ width:18px; height:18px; stroke-width:2; vertical-align:-3px; }
.feather.lg{ width:26px; height:26px; }

/* ---------- Pantalla de ventas ---------- */

body.pos-screen{ margin:0; background:var(--v-bg); color:var(--v-text); font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; height:100vh; overflow:hidden; }
html.pos-screen, body.pos-screen{ max-width:100vw; overflow:hidden; }
.pos-app{ display:grid; grid-template-rows:56px 1fr; height:100vh; width:100%; max-width:100vw; overflow:hidden; }
.pos-top{ background:linear-gradient(90deg,var(--v-900),var(--v-700)); color:#fff; display:flex; align-items:center; padding:0 14px; gap:14px; min-width:0; overflow:hidden; }
.pos-top .brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; letter-spacing:-.02em; }
.pos-top .brand small{ font-weight:400; opacity:.75; font-size:.72rem; display:block; letter-spacing:.06em; }
.pos-top .spacer{ flex:1; }
.pos-chip{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:5px 12px; font-size:.82rem; white-space:nowrap; cursor:pointer; }
.pos-chip.ok{ background:rgba(31,163,106,.22); border-color:rgba(31,163,106,.5); }
.pos-chip.bad{ background:rgba(214,69,69,.25); border-color:rgba(214,69,69,.5); }
.pos-chip select{ background:transparent; border:0; color:#fff; font-size:.82rem; outline:0; }
.pos-chip select option{ color:#000; }
.pos-top .btn-top{ background:rgba(255,255,255,.12); color:#fff; border:0; border-radius:10px; padding:6px 10px; font-size:.85rem; }
.pos-top .btn-top:hover{ background:rgba(255,255,255,.22); }

.pos-main{ display:grid; grid-template-columns:minmax(0,1fr) 420px; min-height:0; min-width:0; }
.pos-left{ display:flex; flex-direction:column; min-height:0; min-width:0; padding:12px 12px 0 12px; gap:10px; }
.pos-cats{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; min-width:0; max-width:100%; }
.pos-cat{ flex:0 0 auto; min-width:110px; background:#fff; border:2px solid transparent; border-radius:14px; padding:10px 12px; cursor:pointer; box-shadow:var(--v-shadow); text-align:center; transition:transform .08s; }
.pos-cat:hover{ transform:translateY(-1px); }
.pos-cat.active{ border-color:var(--v-300); background:var(--v-100); }
.pos-cat .ic{ color:var(--v-400); }
.pos-cat .name{ font-size:.82rem; font-weight:600; display:block; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.pos-cat .count{ font-size:.7rem; color:var(--v-muted); }
.pos-search{ display:flex; gap:8px; align-items:center; }
.pos-search .wrap{ flex:1; position:relative; }
.pos-search input{ width:100%; border:1px solid var(--v-line); background:#fff; border-radius:12px; padding:11px 42px 11px 42px; font-size:1rem; outline:0; }
.pos-search input:focus{ border-color:var(--v-300); box-shadow:0 0 0 3px rgba(43,179,192,.2); }
.pos-search .ico{ position:absolute; left:14px; top:12px; color:var(--v-muted); }
.pos-search .clear{ position:absolute; right:10px; top:9px; border:0; background:transparent; color:var(--v-muted); }
.pos-grid{ flex:1; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; align-content:start; padding-bottom:12px; scrollbar-width:thin; }
.pos-prod{ background:#fff; border-radius:14px; box-shadow:var(--v-shadow); cursor:pointer; overflow:hidden; display:flex; flex-direction:column; position:relative; user-select:none; transition:transform .08s, box-shadow .08s; }
.pos-prod:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(11,31,46,.14); }
.pos-prod:active{ transform:scale(.98); }
.pos-prod .img{ height:96px; background:var(--v-100); display:flex; align-items:center; justify-content:center; color:var(--v-400); overflow:hidden; }
.pos-prod .img img{ width:100%; height:100%; object-fit:cover; }
.pos-prod .body{ padding:8px 10px 10px; }
.pos-prod .cat{ font-size:.68rem; color:var(--v-muted); text-transform:uppercase; letter-spacing:.04em; }
.pos-prod .name{ font-size:.85rem; font-weight:600; line-height:1.2; height:2.4em; overflow:hidden; }
.pos-prod .price{ font-weight:800; color:var(--v-700); margin-top:4px; }
.pos-prod .stock{ position:absolute; top:8px; left:8px; font-size:.68rem; font-weight:700; padding:2px 7px; border-radius:999px; background:#fff; color:var(--v-600); box-shadow:0 1px 4px rgba(0,0,0,.15); }
.pos-prod .stock.low{ background:#fde6e6; color:#9b2b2b; }
.pos-prod .stock.out{ background:var(--v-danger); color:#fff; }
.pos-prod.disabled{ opacity:.45; }
.pos-empty{ grid-column:1/-1; text-align:center; color:var(--v-muted); padding:40px 10px; }

.pos-right{ background:#fff; border-left:1px solid var(--v-line); display:flex; flex-direction:column; min-height:0; min-width:0; }
.pos-cart-head{ padding:12px 14px; border-bottom:1px solid var(--v-line); }
.pos-cart-head .title{ display:flex; justify-content:space-between; align-items:center; font-weight:700; color:var(--v-800); }
.pos-cart-head .meta{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.pos-field label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--v-muted); display:block; margin-bottom:2px; }
.pos-field .box{ border:1px solid var(--v-line); border-radius:10px; padding:6px 10px; font-size:.86rem; display:flex; align-items:center; gap:6px; cursor:pointer; min-height:36px; }
.pos-field .box span{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pos-lines{ flex:1; overflow-y:auto; padding:6px 10px; scrollbar-width:thin; }
.pos-line{ display:grid; grid-template-columns:40px 1fr auto; gap:10px; align-items:center; padding:8px 6px; border-bottom:1px solid var(--v-line); }
.pos-line .thumb{ width:40px; height:40px; border-radius:8px; background:var(--v-100); display:flex; align-items:center; justify-content:center; color:var(--v-400); overflow:hidden; }
.pos-line .thumb img{ width:100%; height:100%; object-fit:cover; }
.pos-line .name{ font-size:.84rem; font-weight:600; line-height:1.15; }
.pos-line .unit{ font-size:.74rem; color:var(--v-muted); cursor:pointer; }
.pos-line .unit:hover{ color:var(--v-400); text-decoration:underline; }
.pos-line .right{ text-align:right; }
.pos-line .total{ font-weight:700; font-size:.9rem; color:var(--v-800); }
.pos-qty{ display:inline-flex; align-items:center; border:1px solid var(--v-line); border-radius:999px; overflow:hidden; margin-top:3px; }
.pos-qty button{ border:0; background:var(--v-100); width:28px; height:26px; color:var(--v-700); font-weight:700; }
.pos-qty input{ width:44px; border:0; text-align:center; font-size:.85rem; outline:0; }
.pos-line .del{ border:0; background:transparent; color:var(--v-danger); padding:0 4px; }
.pos-lines .empty{ text-align:center; color:var(--v-muted); padding:40px 16px; font-size:.9rem; }
.pos-totals{ padding:10px 14px 0; border-top:1px solid var(--v-line); font-size:.9rem; }
.pos-totals .row-t{ display:flex; justify-content:space-between; padding:3px 0; }
.pos-totals .row-t.grand{ font-size:1.25rem; font-weight:800; color:var(--v-800); border-top:1px dashed var(--v-line); margin-top:4px; padding-top:8px; }
.pos-totals input.disc{ width:110px; border:1px solid var(--v-line); border-radius:8px; padding:2px 8px; text-align:right; font-size:.85rem; }
.pos-pay{ padding:8px 14px 12px; }
.pos-pay .methods{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pos-method{ border:2px solid var(--v-line); border-radius:12px; padding:8px 6px; text-align:center; cursor:pointer; font-size:.8rem; font-weight:600; color:var(--v-700); background:#fff; }
.pos-method.active{ border-color:var(--v-300); background:var(--v-100); }
.pos-method .feather{ display:block; margin:0 auto 3px; }
.pos-pay .amounts{ margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.pos-pay .amount{ display:grid; grid-template-columns:110px 1fr; gap:8px; align-items:center; font-size:.85rem; }
.pos-pay .amount input{ border:1px solid var(--v-line); border-radius:8px; padding:6px 10px; text-align:right; font-size:.95rem; width:100%; }
.pos-pay .amount input.ref{ text-align:left; font-size:.82rem; }
.pos-pay .change{ display:flex; justify-content:space-between; font-weight:700; margin-top:6px; color:var(--v-success); }
.pos-pay .change.neg{ color:var(--v-danger); }
.pos-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 14px 14px; }
.pos-actions .btn{ border-radius:12px; padding:11px; font-weight:700; }
.pos-actions .btn-cobrar{ grid-column:1/-1; background:var(--v-700); color:#fff; font-size:1.05rem; padding:14px; }
.pos-actions .btn-cobrar:disabled{ background:#9fb3bf; }
.pos-quick{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.pos-quick button{ border:1px solid var(--v-line); background:#fff; border-radius:8px; padding:3px 9px; font-size:.78rem; }
.pos-offline{ background:var(--v-warning); color:#2b1d02; text-align:center; font-size:.82rem; padding:4px; display:none; }
.pos-offline.show{ display:block; }
.pos-hidden{ display:none !important; }
.pos-kbd{ display:inline-block; border:1px solid rgba(255,255,255,.3); border-radius:5px; padding:0 5px; font-size:.7rem; margin-left:4px; }
.pos-list-item{ display:flex; justify-content:space-between; align-items:center; padding:10px 6px; border-bottom:1px solid var(--v-line); cursor:pointer; }
.pos-list-item:hover{ background:var(--v-100); }
.pos-list-item .meta{ font-size:.78rem; color:var(--v-muted); }
.pos-success-total{ font-size:2.2rem; font-weight:800; color:var(--v-success); text-align:center; }
.pos-ticket-frame{ position:fixed; right:0; bottom:0; width:0; height:0; border:0; }

@media (max-width: 1100px){ .pos-main{ grid-template-columns:minmax(0,1fr) 360px; } }
@media (max-width: 860px){
	.pos-main{ grid-template-columns:minmax(0,1fr); grid-template-rows:1fr auto; }
	.pos-right{ border-left:0; border-top:1px solid var(--v-line); max-height:52vh; }
	.pos-top .brand small{ display:none; }
	.pos-top .hide-sm{ display:none; }
}

/* ---------- Ticket ---------- */

.ticket-body{ background:#eef2f5; margin:0; padding:16px; font-family:"Courier New",monospace; color:#000; }
.ticket{ background:#fff; width:72mm; margin:0 auto; padding:4mm 3mm; font-size:11.5px; line-height:1.3; box-shadow:0 2px 12px rgba(0,0,0,.15); }
.ticket.w58{ width:48mm; font-size:10.5px; }
.ticket .c{ text-align:center; }
.ticket .b{ font-weight:700; }
.ticket .big{ font-size:14px; font-weight:700; }
.ticket hr{ border:0; border-top:1px dashed #000; margin:5px 0; }
.ticket table{ width:100%; border-collapse:collapse; }
.ticket td{ padding:1px 0; vertical-align:top; }
.ticket td.r{ text-align:right; white-space:nowrap; }
.ticket .logo{ max-width:40mm; max-height:20mm; margin:0 auto 4px; display:block; }
.ticket .qr{ width:34mm; height:34mm; display:block; margin:4px auto; }
.ticket .small{ font-size:9.5px; word-break:break-all; }
.ticket-tools{ text-align:center; margin-bottom:12px; font-family:system-ui,sans-serif; }
.ticket-tools button{ border:0; background:var(--v-700); color:#fff; border-radius:10px; padding:9px 16px; margin:0 4px; font-weight:600; }
@media print{
	.ticket-body{ background:#fff; padding:0; }
	.ticket{ box-shadow:none; margin:0; width:auto; padding:0 2mm; }
	.ticket-tools{ display:none; }
	@page{ margin:3mm; }
}