/* ============================================================
   PALOMITAS EXPRESS · Sistema de diseño
   Paleta profesional: Negro carbón + Dorado champagne + Crema
   ============================================================ */
:root {
  --px-bg: #f4f1ea;
  --px-surface: #ffffff;
  --px-surface-2: #faf8f3;
  --px-border: #e6e0d4;
  --px-text: #1c1a17;
  --px-text-soft: #6b665c;
  --px-gold: #c9a227;
  --px-gold-soft: #e3c766;
  --px-dark: #16140f;
  --px-accent: #b8860b;
  --px-shadow: 0 10px 30px -12px rgba(40,33,15,.25);
  --px-ok: #15803d;
  --px-warn: #b45309;
  --px-info: #1d4ed8;
  --px-danger: #b91c1c;
}
.dark {
  --px-bg: #0d0c0a;
  --px-surface: #1a1813;
  --px-surface-2: #211e18;
  --px-border: #322d24;
  --px-text: #f3efe6;
  --px-text-soft: #a8a193;
  --px-gold: #e3c766;
  --px-gold-soft: #f0d98a;
  --px-dark: #000;
  --px-shadow: 0 10px 30px -10px rgba(0,0,0,.6);
}

* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html, body { height: 100%; }
html { overflow-x: hidden; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--px-bg);
  color: var(--px-text);
  transition: background .3s, color .3s;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

.px-brand-font { font-family: 'Georgia', 'Times New Roman', serif; letter-spacing: .5px; }

/* Tarjetas de producto */
.product-card {
  background: var(--px-surface);
  border: 1px solid var(--px-border);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--px-shadow);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s;
  user-select: none;
}
.product-card:hover { transform: translateY(-4px); border-color: var(--px-gold); }
.product-card:active { transform: scale(.97); }
.product-card.unavailable { opacity: .5; filter: grayscale(.7); cursor: not-allowed; }

.product-img-wrap {
  aspect-ratio: 1/1;
  background: var(--px-surface-2);
  position: relative;
  overflow: hidden;
}
.product-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Precio grande y destacado */
.price-badge {
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1;
  color: var(--px-accent);
}
.dark .price-badge { color: var(--px-gold); }
.price-currency { font-size: .55em; vertical-align: super; font-weight: 600; }

/* Botón agregar */
.btn-gold {
  background: linear-gradient(135deg, var(--px-gold) 0%, var(--px-accent) 100%);
  color: #1c1a17;
  font-weight: 700;
  border: none;
  border-radius: 14px;
  transition: filter .15s, transform .1s;
}
.btn-gold:hover { filter: brightness(1.08); }
.btn-gold:active { transform: scale(.96); }

.btn-dark {
  background: var(--px-dark); color: #f3efe6; border-radius: 14px; font-weight: 600;
}

/* Chips de categoría */
.cat-chip {
  border: 1px solid var(--px-border);
  background: var(--px-surface);
  color: var(--px-text-soft);
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  transition: all .15s;
}
.cat-chip.active {
  background: var(--px-dark); color: var(--px-gold); border-color: var(--px-dark);
}

/* Surfaces */
.surface { background: var(--px-surface); border: 1px solid var(--px-border); }
.surface-2 { background: var(--px-surface-2); }
.txt-soft { color: var(--px-text-soft); }
.border-px { border-color: var(--px-border); }

/* Badges de estado */
.badge { padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.badge-nuevo { background: #dbeafe; color: #1d4ed8; }
.badge-preparacion { background: #fef3c7; color: #b45309; }
.badge-listo { background: #dcfce7; color: #15803d; }
.badge-entregado { background: #e5e7eb; color: #374151; }
.badge-cancelado { background: #fee2e2; color: #b91c1c; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--px-border); border-radius: 8px; }

/* Animaciones */
@keyframes slideUp { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes pop { 0% { transform: scale(.8); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
@keyframes pulseNew { 0%,100% { box-shadow: 0 0 0 0 rgba(201,162,39,.5) } 50% { box-shadow: 0 0 0 8px rgba(201,162,39,0) } }
.anim-up { animation: slideUp .3s ease both; }
.anim-pop { animation: pop .25s ease both; }
.new-order { animation: pulseNew 1.6s ease-in-out infinite; }

/* Ticket térmico */
@media print {
  /* Una sola hoja, ticket centrado horizontalmente */
  @page { size: 80mm auto; margin: 0; }
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* Ocultar todo salvo el ticket */
  body * { visibility: hidden; }
  #ticket-print, #ticket-print * { visibility: visible; }
  /* Sacar el ticket del flujo del modal para que no genere páginas extra */
  #ticket-print {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    margin: 0 auto !important;
    width: 76mm !important;
    max-width: 76mm !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  /* Evitar que el contenedor del modal aporte alto extra */
  #modal-root, #modal-root > * { position: static !important; overflow: visible !important; height: auto !important; }
}
.ticket {
  width: 300px; background: #fff; color: #000; padding: 16px;
  font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.4;
}
.ticket hr { border: none; border-top: 1px dashed #000; margin: 8px 0; }