/* Punto de venta (subdominio ventas): pantalla de tablet, sin desplazamiento de la página; solo se desplazan los productos y el ticket. */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #10223a; background: #eef2f7; -webkit-text-size-adjust: 100%; }
button, a.pos-btn { font-family: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

/* ---------- ingreso, elección de evento y salida ---------- */
body.pos-login { min-height: 100%; background: linear-gradient(135deg, #04304f 0%, #0a2240 60%, #1a1024 100%); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pl-caja { background: #fff; border-radius: 16px; padding: 28px 26px; width: 100%; max-width: 420px; text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.pl-ancha { max-width: 640px; }
.pl-logo { width: 84px; height: auto; margin-bottom: 6px; }
.pl-caja h1 { margin: 0 0 4px; font-size: 1.7rem; color: #0a2342; }
.pl-sub { margin: 0 0 16px; color: #3f526b; }
.pl-aviso { background: #fff4d1; border: 1px solid #e0b43a; color: #5e3a00; border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; text-align: left; }
.pl-caja form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.pl-caja label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .95rem; }
.pl-caja input { padding: 14px; font-size: 1.15rem; border: 1px solid #b9c7d9; border-radius: 10px; }
.pl-btn { display: block; width: 100%; padding: 16px; font-size: 1.2rem; font-weight: 800; color: #fff; background: #14558f; border: 0; border-radius: 12px; text-decoration: none; text-align: center; }
.pl-salir { display: inline-block; margin-top: 8px; color: #14558f; font-weight: 700; padding: 12px; }
.pe-lista { display: flex; flex-direction: column; gap: 12px; margin: 8px 0; }
.pe-evento { width: 100%; border: 0; border-radius: 14px; padding: 22px 16px; display: flex; flex-direction: column; gap: 4px; align-items: center; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.pe-nombre { font-size: 1.6rem; font-weight: 800; }
.pe-vig { font-size: .95rem; opacity: .9; }
.ps-evento { border-radius: 12px; padding: 14px; font-size: 1.4rem; font-weight: 800; margin-bottom: 8px; }
.ps-tabla { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 1.1rem; }
.ps-tabla td { padding: 10px 6px; border-bottom: 1px solid #d3deeb; text-align: left; }
.ps-tabla td + td { text-align: right; font-weight: 700; }
.ps-total td { font-size: 1.3rem; border-bottom: 0; }

/* ---------- pantalla de venta ---------- */
body.pos-app { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
.pos-cab { position: relative; flex: none; height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }
.pos-cab-nombre { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.5rem; font-weight: 800; letter-spacing: .3px; padding: 0 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
.pos-cab-izq { position: relative; z-index: 1; font-size: .9rem; font-weight: 600; max-width: 22vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-cab-der { position: relative; z-index: 1; display: flex; gap: 8px; }
.pos-cab-btn { background: transparent; border: 2px solid; border-radius: 10px; padding: 8px 14px; font-size: .95rem; font-weight: 700; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.pos-offline { flex: none; background: #9b1c3a; color: #fff; text-align: center; padding: 8px; font-weight: 700; }
.pos-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 36%); }
.pos-productos { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: min-content; gap: 10px; align-content: start; }
.pos-ticket { overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; border-left: 2px solid #cfd9e6; padding: 10px 12px; }
.pos-ticket h2 { margin: 0 0 6px; font-size: 1.15rem; color: #0a2342; }

.pos-prod { position: relative; background: #fff; border: 2px solid #cfd9e6; border-radius: 14px; padding: 10px 8px 8px; text-align: center; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 1px 3px rgba(10, 35, 66, .12); }
.pos-prod:active { transform: scale(.97); }
.pos-prod .pp-emoji { font-size: 2.8rem; line-height: 1.1; }
.pos-prod .pp-nombre { font-weight: 700; font-size: .98rem; line-height: 1.15; overflow-wrap: anywhere; }
.pos-prod .pp-precio { font-size: 1.15rem; font-weight: 800; color: #0a2342; }
.pos-prod .pp-stock { font-size: .78rem; color: #3f526b; }
.pos-prod .pp-badge { position: absolute; top: 6px; right: 6px; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 15px; background: #14558f; color: #fff; font-weight: 800; font-size: 1rem; display: none; align-items: center; justify-content: center; }
.pos-prod.pp-en-ticket { border-color: #14558f; background: #e4effa; }
.pos-prod.pp-en-ticket .pp-badge { display: flex; }
.pos-prod.pp-agotado { opacity: .45; }
.pos-prod.pp-tope { animation: pp-sacudir .25s; }
@keyframes pp-sacudir { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.pos-ticket-cab, .pos-lin { display: grid; grid-template-columns: 112px minmax(0, 1fr) 64px 72px; gap: 4px; align-items: center; }
.pos-ticket-cab { font-size: .72rem; font-weight: 800; color: #3f526b; text-transform: uppercase; padding: 4px 0; border-bottom: 2px solid #0a2342; }
.pos-ticket-cab span:nth-child(n+3) { text-align: right; }
.pos-lin { padding: 6px 0; border-bottom: 1px solid #d3deeb; font-size: .95rem; }
.pos-lin .lin-cant { display: flex; align-items: center; gap: 4px; }
.pos-lin .lin-cant button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: #e3eaf3; color: #0a2342; font-size: 1.3rem; font-weight: 800; line-height: 1; padding: 0; }
.pos-lin .lin-cant span { min-width: 22px; text-align: center; font-weight: 800; font-size: 1.05rem; }
.pos-lin .lin-desc { overflow-wrap: anywhere; line-height: 1.15; }
.pos-lin .lin-precio, .pos-lin .lin-importe { text-align: right; font-variant-numeric: tabular-nums; }
.pos-lin .lin-importe { font-weight: 800; }
.pos-vacio { color: #6b7d94; text-align: center; margin-top: 24px; }

.pos-barra { flex: none; display: flex; align-items: stretch; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #0a2342; color: #fff; box-shadow: 0 -4px 14px rgba(0, 0, 0, .3); }
.pos-total { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.pos-total span { font-size: .85rem; letter-spacing: 1px; opacity: .85; }
.pos-total strong { font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-btn { border: 0; border-radius: 14px; padding: 12px 18px; font-size: 1.15rem; font-weight: 800; color: #fff; min-height: 72px; letter-spacing: .5px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1; }
.pos-btn:disabled { opacity: .35; cursor: not-allowed; }
.pos-efectivo { background: #1b8a3f; min-width: 190px; font-size: 1.5rem; }
.pos-qr { background: #009ee3; min-width: 190px; font-size: 1.5rem; }
.pos-cancelar { background: #c62828; min-width: 120px; }
.pos-gris { background: #e3eaf3; color: #0a2342; }

/* ---------- ventanas (modales) ---------- */
.pos-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(6, 22, 43, .78); display: flex; align-items: center; justify-content: center; padding: 14px; overflow-y: auto; }
.pos-modal-caja { background: #fff; border-radius: 18px; padding: 20px 22px; width: 100%; max-width: 520px; text-align: center; max-height: 100%; overflow-y: auto; }
.pos-modal-caja h2 { margin: 0 0 8px; font-size: 1.5rem; color: #0a2342; }
.pos-modal-ancha { max-width: 720px; text-align: left; }
.pos-modal-ancha h2 { text-align: center; }
.pos-modal-botones { display: flex; gap: 10px; margin-top: 14px; }
.pos-modal-botones .pos-btn { flex: 1; }
.pos-error { background: #fbe4ea; color: #6e1029; border-radius: 10px; padding: 10px; margin-top: 10px; font-weight: 600; }
.ef-total { font-size: 1.1rem; color: #3f526b; }
.ef-total strong { display: block; font-size: 3rem; color: #0a2342; line-height: 1.1; }
.ef-etq { margin: 10px 0 6px; font-weight: 700; color: #3f526b; }
.ef-rapidos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ef-rapidos button { border: 2px solid #b9c7d9; background: #fff; border-radius: 12px; padding: 14px 6px; font-size: 1.3rem; font-weight: 800; color: #0a2342; min-height: 62px; }
.ef-rapidos button.sel { background: #14558f; border-color: #14558f; color: #fff; }
.ef-otro { margin-top: 10px; }
.ef-pantalla { font-size: 2.2rem; font-weight: 800; background: #eef2f7; border-radius: 10px; padding: 8px; margin-bottom: 8px; text-align: right; }
.ef-teclas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ef-teclas button { border: 0; background: #e3eaf3; border-radius: 10px; padding: 14px 0; font-size: 1.5rem; font-weight: 800; color: #0a2342; min-height: 58px; }
.ef-vuelto { margin-top: 12px; background: #e4f3ea; color: #0f4a2b; border-radius: 12px; padding: 10px; font-size: 1.1rem; }
.ef-vuelto strong { display: block; font-size: 2.6rem; line-height: 1.1; }
.ef-vuelto.falta { background: #fbe4ea; color: #6e1029; }
.ok-marca { width: 74px; height: 74px; margin: 0 auto 6px; border-radius: 50%; background: #1b8a3f; color: #fff; font-size: 2.6rem; display: flex; align-items: center; justify-content: center; }
.t-fila { display: flex; justify-content: space-between; gap: 8px; }
.t-centro { text-align: center; }
.ok-ticket hr { border: 0; border-top: 1px dashed #8a99ad; margin: 4px 0; }
.ok-ticket { margin-top: 10px; max-height: 34vh; overflow-y: auto; border: 1px dashed #b9c7d9; border-radius: 10px; padding: 10px; text-align: left; font-family: Consolas, "Courier New", monospace; font-size: .85rem; background: #fcfcfc; }
.pos-modal-qr .pos-modal-caja { max-width: 560px; }
.qr-caja { display: inline-block; background: #fff; border: 2px solid #cfd9e6; border-radius: 14px; padding: 12px; margin: 8px 0; min-width: 120px; min-height: 120px; }
.qr-caja svg { display: block; width: min(52vh, 62vw, 380px); height: auto; }
.qr-cargando { display: block; padding: 40px 10px; color: #3f526b; }
.qr-texto { margin: 2px 0 0; color: #3f526b; font-size: 1.05rem; }
.mv-resumen { background: #eef2f7; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; font-weight: 700; }
.mv-lista { max-height: 52vh; overflow-y: auto; }
.mv-fila { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 8px; align-items: center; padding: 10px 4px; border-bottom: 1px solid #d3deeb; font-size: .95rem; }
.mv-fila button { border: 0; background: #e3eaf3; border-radius: 8px; padding: 10px 12px; font-weight: 700; min-height: 44px; }
.mv-anulada { opacity: .5; text-decoration: line-through; }
.pos-bloqueo { z-index: 2000; background: rgba(155, 28, 58, .94); }

/* ---------- ticket para imprimir (papel de 58 mm) ---------- */
.ticket-58 { display: none; }
@media print {
  @page { size: 58mm auto; margin: 0; }
  body.pos-app > *:not(#ticketImpresion) { display: none !important; }
  body.pos-app { display: block; overflow: visible; height: auto; background: #fff; }
  .ticket-58 { display: block !important; width: 48mm; margin: 0 auto; padding: 2mm 0; font-family: Consolas, "Courier New", monospace; font-size: 11px; color: #000; line-height: 1.25; }
  .ticket-58 .t-centro { text-align: center; }
  .ticket-58 .t-fila { display: flex; justify-content: space-between; gap: 4px; }
  .ticket-58 hr { border: 0; border-top: 1px dashed #000; margin: 3px 0; }
}

/* ---------- pantallas angostas o verticales ---------- */
@media (max-width: 900px) {
  .pos-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(250px, 42%); }
  .pos-cab-nombre { font-size: 1.15rem; padding: 0 130px; }
  .pos-cab-izq { display: none; }
  .pos-efectivo, .pos-qr { min-width: 130px; font-size: 1.15rem; }
  .pos-total strong { font-size: 1.8rem; }
  .pos-ticket-cab, .pos-lin { grid-template-columns: 100px minmax(0, 1fr) 54px 64px; font-size: .88rem; }
}
@media (max-width: 640px) {
  .pos-cuerpo { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 34%; }
  .pos-ticket { border-left: 0; border-top: 2px solid #cfd9e6; }
  .pos-btn { padding: 8px 8px; min-height: 64px; }
  .pos-cancelar { min-width: 80px; font-size: .85rem; }
}