/* Responsive */
    @media (max-width: 1100px){
      .grid{ grid-template-columns: 1fr; }
    }

    /* En escritorio el panel lateral se queda siempre visible (no se colapsa).
       El botón de hamburguesa solo tiene efecto en móvil (cajón deslizante,
       más abajo). */

    @media (max-width: 980px){
      .app{ grid-template-columns: 1fr; }
      .receipt{ width:100%; }

      /* Botón hamburguesa — cajón deslizante en móvil (oculto por defecto) */
      .sidebar{
        position:fixed; top:0; left:-300px; height:100vh; width:280px; max-width:85vw;
        z-index:200; border-radius:0;
        transition: left .25s ease;
      }
      body.sidebar-open .sidebar{ left:0; }

      .menuOverlay{
        position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:190;
        opacity:0; pointer-events:none; transition:opacity .2s ease;
      }
      body.sidebar-open .menuOverlay{ opacity:1; pointer-events:auto; }
      body.sidebar-open{ overflow:hidden; }
    }

    /* Capture mode (para PNG nítido, sin overlays) */
    body.capture-mode .sparkle{ display:none !important; }
    body.capture-mode #receiptBox,
    body.capture-mode #closeBox{
      opacity: 1 !important;
      filter: none !important;
      transform: none !important;
    }
/* Cintillo amarillo simple */
.simpleNotice {
  width: 100%;
  background: #ffd400;
  color: #111;
  text-align: center;
  font-weight: 900;
  font-size: 14px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0,0,0,.25);
}