/* =====================================================================
   PALOMITAS EXPRESS - POS (tablet/movil, tactil, premium)
   CSS unificado con las clases reales de index.php + pos.js
   ===================================================================== */
:root{
  --pe-red:#e11d2a;
  --pe-red-dark:#b3141f;
  --pe-gold:#d4af37;
  --pe-gold-dark:#b8941f;
  --pe-cream:#fbf7ef;
  --pe-ink:#22252c;
  --pe-muted:#8a8275;
  --pe-card:#ffffff;
  --pe-border:#ece7dc;
  --radius:20px;
  --shadow:0 6px 24px rgba(34,37,44,.08);
  --shadow-lg:0 18px 50px rgba(34,37,44,.18);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body.pos-body{
  font-family:'Poppins','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:
    radial-gradient(circle at 88% -8%, rgba(212,175,55,.12), transparent 42%),
    radial-gradient(circle at -5% 108%, rgba(225,29,42,.10), transparent 46%),
    var(--pe-cream);
  color:var(--pe-ink);min-height:100vh;
}

/* ====================== TOPBAR ====================== */
.pos-topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--pe-border);
  padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  box-shadow:0 2px 14px rgba(34,37,44,.05);
}
.pos-logo{display:flex;align-items:center;gap:12px}
.pos-logo .badge-ico{
  width:48px;height:48px;border-radius:14px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--pe-red),var(--pe-red-dark));
  color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(225,29,42,.35);
}
.pos-logo b{display:block;font-size:19px;font-weight:800;line-height:1.1;color:var(--pe-ink)}
.pos-logo span{display:block;font-size:11.5px;color:var(--pe-muted);font-weight:600;letter-spacing:.02em}

.pos-loc{text-align:right;line-height:1.25}
.pos-loc small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--pe-muted);font-weight:700}
.pos-loc b{font-size:15px;font-weight:800;color:var(--pe-red)}
.pos-loc button{
  margin-top:4px;background:var(--pe-cream);border:1px solid var(--pe-border);
  color:var(--pe-ink);font-size:12px;font-weight:700;padding:5px 12px;border-radius:20px;cursor:pointer;transition:.15s;
}
.pos-loc button:hover{background:#fff;border-color:var(--pe-gold);color:var(--pe-gold-dark)}

/* ====================== LAYOUT ====================== */
.pos-main{
  display:grid;grid-template-columns:1fr 380px;gap:24px;
  max-width:1320px;margin:0 auto;padding:22px 24px 120px;align-items:start;
}

/* ====================== CATALOGO ====================== */
.pos-catalog{min-width:0}
.pos-search{position:relative;margin-bottom:16px}
.pos-search i{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--pe-muted);font-size:16px}
.pos-search input{
  width:100%;padding:15px 18px 15px 48px;border:2px solid var(--pe-border);
  border-radius:30px;font-size:15px;background:#fff;font-family:inherit;transition:.15s;
}
.pos-search input:focus{outline:none;border-color:var(--pe-gold);box-shadow:0 0 0 4px rgba(212,175,55,.15)}

/* chips de categoria (JS genera .chip) */
.pos-chips{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 14px;scrollbar-width:none}
.pos-chips::-webkit-scrollbar{display:none}
.pos-chips .chip{
  flex:0 0 auto;padding:11px 22px;border-radius:30px;background:#fff;
  border:2px solid var(--pe-border);font-weight:700;font-size:14px;cursor:pointer;
  white-space:nowrap;transition:.15s;color:var(--pe-ink);font-family:inherit;
}
.pos-chips .chip:hover{border-color:var(--pe-gold)}
.pos-chips .chip.active{background:var(--pe-red);color:#fff;border-color:var(--pe-red);box-shadow:0 6px 16px rgba(225,29,42,.3)}

/* grid (JS genera .card-prod) */
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.card-prod{
  background:var(--pe-card);border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  transition:transform .18s,box-shadow .18s;border:1px solid var(--pe-border);
}
.card-prod:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.card-prod:active{transform:scale(.97)}
.card-prod .ph{position:relative;width:100%;aspect-ratio:1/1;background:#f0ece2;overflow:hidden}
.card-prod .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:.3s}
.card-prod:hover .ph img{transform:scale(1.05)}
.card-prod .cat-tag{
  position:absolute;top:10px;left:10px;z-index:2;
  background:rgba(34,37,44,.78);backdrop-filter:blur(4px);color:#fff;
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:5px 11px;border-radius:20px;
}
.card-prod .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.card-prod .body h3{margin:0;font-size:16px;font-weight:700;line-height:1.25;color:var(--pe-ink)}
.card-prod .body p{margin:0;font-size:12.5px;color:var(--pe-muted);line-height:1.35;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-prod .price-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.card-prod .price{font-size:21px;font-weight:800;color:var(--pe-red)}
.card-prod .add{
  background:var(--pe-red);color:#fff;border:0;width:44px;height:44px;border-radius:14px;
  font-size:18px;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(225,29,42,.3);
}
.card-prod .add:hover{background:var(--pe-red-dark);transform:scale(1.08)}

/* estado de carga / vacio */
.loading{grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--pe-muted)}
.loading p{margin-top:14px;font-weight:600}
.spinner{width:46px;height:46px;border:4px solid var(--pe-border);border-top-color:var(--pe-red);
  border-radius:50%;margin:0 auto;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ====================== CARRITO LATERAL (tablet/desktop) ====================== */
.pos-cart{
  position:sticky;top:92px;background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow);border:1px solid var(--pe-border);
  display:flex;flex-direction:column;max-height:calc(100vh - 116px);overflow:hidden;
}
.cart-head{padding:18px 20px;border-bottom:1px solid var(--pe-border);display:flex;align-items:center;gap:10px}
.cart-head h2{margin:0;font-size:18px;font-weight:800;color:var(--pe-ink)}
.cart-head .count{
  margin-left:auto;background:var(--pe-red);color:#fff;font-size:13px;font-weight:800;
  min-width:26px;height:26px;border-radius:13px;display:flex;align-items:center;justify-content:center;padding:0 8px;
}
.cart-items{flex:1;overflow-y:auto;padding:8px 18px;min-height:120px}
.cart-row{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--pe-border);align-items:center}
.cart-row:last-child{border-bottom:0}
.cart-row img{width:54px;height:54px;border-radius:12px;object-fit:cover;background:#f0ece2;flex:0 0 auto}
.cart-row .info{flex:1;min-width:0}
.cart-row .info b{display:block;font-weight:700;font-size:14px;line-height:1.2;color:var(--pe-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-row .info small{font-size:12.5px;color:var(--pe-muted)}
.cart-row .qty{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.cart-row .qty button{
  width:30px;height:30px;border-radius:9px;border:0;background:var(--pe-cream);
  font-size:18px;font-weight:800;cursor:pointer;color:var(--pe-red);line-height:1;transition:.12s;
}
.cart-row .qty button:hover{background:var(--pe-red);color:#fff}
.cart-row .qty span{min-width:22px;text-align:center;font-weight:800;font-size:15px}
.cart-empty{text-align:center;color:var(--pe-muted);padding:48px 20px}
.cart-empty i{font-size:44px;opacity:.3;display:block;margin-bottom:12px}
.cart-empty p{margin:0;font-size:13.5px;line-height:1.5}

.cart-foot{padding:18px 20px;border-top:1px solid var(--pe-border);background:var(--pe-cream)}
.cart-foot .total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.cart-foot .total span{font-size:15px;color:var(--pe-muted);font-weight:600}
.cart-foot .total b{font-size:26px;font-weight:800;color:var(--pe-ink)}
.cart-foot input{
  width:100%;padding:12px 14px;border:2px solid var(--pe-border);border-radius:12px;
  margin-bottom:12px;font-size:14.5px;font-family:inherit;
}
.cart-foot input:focus{outline:none;border-color:var(--pe-gold)}
.btn-confirm{
  width:100%;padding:15px;border:0;border-radius:14px;
  background:linear-gradient(135deg,var(--pe-red),var(--pe-red-dark));color:#fff;
  font-size:17px;font-weight:800;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s;
  box-shadow:0 8px 20px rgba(225,29,42,.32);
}
.btn-confirm:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 26px rgba(225,29,42,.4)}
.btn-confirm:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.me-2{margin-right:.4rem}

/* ====================== FAB CARRITO (movil) ====================== */
.cart-fab{
  display:none;position:fixed;bottom:18px;left:16px;right:16px;z-index:50;
  background:linear-gradient(135deg,var(--pe-red),var(--pe-red-dark));color:#fff;border:0;
  padding:16px 22px;border-radius:18px;font-size:16px;font-weight:800;cursor:pointer;
  align-items:center;justify-content:space-between;font-family:inherit;
  box-shadow:0 12px 30px rgba(225,29,42,.4);
}
.cart-fab .c-total{font-size:18px}

/* ====================== DRAWER CARRITO (movil) ====================== */
.cart-drawer-bg{
  position:fixed;inset:0;background:rgba(20,22,28,.55);z-index:80;
  opacity:0;visibility:hidden;transition:.25s;
}
.cart-drawer-bg.open{opacity:1;visibility:visible}
.cart-drawer{
  position:fixed;left:0;right:0;bottom:0;z-index:90;background:#fff;
  border-radius:24px 24px 0 0;transform:translateY(100%);transition:.3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;max-height:88vh;box-shadow:var(--shadow-lg);
}
.cart-drawer.open{transform:none}
.drawer-handle{width:46px;height:5px;border-radius:3px;background:var(--pe-border);margin:10px auto 4px}

/* ====================== MODAL EXITO ====================== */
.modal-ok-bg{
  position:fixed;inset:0;background:rgba(20,22,28,.62);backdrop-filter:blur(3px);
  z-index:120;display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-ok-bg.open{display:flex}
.modal-ok{
  background:#fff;border-radius:26px;max-width:420px;width:100%;padding:38px 32px;
  text-align:center;animation:pop .3s ease;box-shadow:var(--shadow-lg);
}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.modal-ok .ico{
  width:84px;height:84px;border-radius:50%;background:#e6f4ea;color:#198754;
  font-size:42px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
}
.modal-ok h2{margin:0 0 6px;font-size:23px;font-weight:800}
.modal-ok .folio{font-size:30px;font-weight:800;color:var(--pe-red);margin:14px 0;letter-spacing:.03em}
.modal-ok .modal-total{font-size:18px;font-weight:700;color:var(--pe-ink);margin-bottom:22px}
.modal-ok .actions{display:flex;flex-direction:column;gap:10px}
.modal-ok .btn-print{
  background:var(--pe-ink);color:#fff;border:0;padding:15px;border-radius:13px;
  font-weight:800;font-size:16px;cursor:pointer;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.modal-ok .btn-print:hover{background:#000}
.modal-ok .btn-new{
  background:var(--pe-cream);color:var(--pe-ink);border:1px solid var(--pe-border);
  padding:14px;border-radius:13px;font-weight:700;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.modal-ok .btn-new:hover{background:#fff;border-color:var(--pe-gold)}

/* ====================== SETUP OVERLAY ====================== */
.setup-bg{
  position:fixed;inset:0;background:linear-gradient(135deg,rgba(225,29,42,.96),rgba(155,20,36,.97));
  z-index:130;align-items:center;justify-content:center;padding:24px;
}
.setup-card{
  background:#fff;border-radius:26px;box-shadow:var(--shadow-lg);max-width:460px;width:100%;
  padding:40px 34px;text-align:center;
}
.setup-card .badge-ico{
  width:70px;height:70px;border-radius:20px;margin:0 auto 16px;
  background:linear-gradient(135deg,var(--pe-red),var(--pe-red-dark));color:#fff;
  font-size:30px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(225,29,42,.4);
}
.setup-card h2{color:var(--pe-ink);font-weight:800;margin:0 0 6px;font-size:23px}
.setup-card p{color:var(--pe-muted);margin:0 0 26px;font-size:14.5px}
.setup-card label{display:block;text-align:left;font-size:13px;font-weight:700;color:var(--pe-ink);margin:0 0 6px}
.setup-card select{
  width:100%;padding:14px;border:2px solid var(--pe-border);border-radius:14px;
  font-size:16px;margin-bottom:18px;background:#fff;font-family:inherit;
}
.setup-card select:focus{outline:none;border-color:var(--pe-gold)}
.setup-card .btn-start{
  width:100%;margin-top:6px;padding:15px;border:0;border-radius:14px;
  background:linear-gradient(135deg,var(--pe-red),var(--pe-red-dark));color:#fff;
  font-size:17px;font-weight:800;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s;
  box-shadow:0 8px 20px rgba(225,29,42,.32);
}
.setup-card .btn-start:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(225,29,42,.4)}

/* ====================== TOAST ====================== */
.toast-pos{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--pe-ink);color:#fff;padding:13px 24px;border-radius:30px;font-weight:700;
  font-size:14px;opacity:0;visibility:hidden;transition:.25s;z-index:140;box-shadow:var(--shadow-lg);
}
.toast-pos.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* ====================== RESPONSIVE ====================== */
@media (max-width:900px){
  .pos-main{grid-template-columns:1fr;padding:18px 16px 110px}
  .pos-cart{display:none}        /* en movil se usa el drawer */
  .cart-fab{display:flex}
}
@media (max-width:560px){
  .pos-topbar{padding:12px 16px}
  .pos-logo b{font-size:16px}
  .pos-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .card-prod .body h3{font-size:14.5px}
  .card-prod .price{font-size:18px}
  .pos-loc small{display:none}
}