/* styles.css - Gategourmet Emerald Dark Mode & Green Gradient Design System (Stitch) */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --brand-emerald: #00A86B;
  --brand-forest: #06381D;
  --brand-deep: #021a0e;
  --brand-glow: #10B981;
  --brand-accent: #34D399;
  --room-red: #ef4444;
  --room-blue: #2563eb;
  --room-green: #10b981;
  --sticker-width: 80mm;
  --sticker-height: 70mm;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #021a0e;
  background: radial-gradient(ellipse at 50% 10%, #0f5c31 0%, #06381d 38%, #032112 70%, #01140a 100%) fixed;
  color: #f1f5f9;
  touch-action: manipulation;
  min-height: 100vh;
}

.ios-pt-safe {
  padding-top: max(0.75rem, var(--safe-top));
}

.ios-pb-safe {
  padding-bottom: max(4.5rem, calc(4.5rem + var(--safe-bottom)));
}

/* Ocultar barra de desplazamiento sin perder scroll */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

button, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: all 0.15s ease-in-out;
}

/* Sombras y efectos de alto contraste Stitch */
.shadow-card-emerald {
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.45), 0 0 20px -3px rgba(16, 185, 129, 0.15);
}

.shadow-glow-button {
  box-shadow: 0 4px 24px 0 rgba(16, 185, 129, 0.45), 0 0 12px rgba(52, 211, 153, 0.3);
}

.shadow-float-bar {
  box-shadow: 0 -4px 25px 0 rgba(0, 0, 0, 0.65), 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.tap-scale {
  transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s ease, border-color 0.15s ease;
}
.tap-scale:active {
  transform: scale(0.97);
}

/* ========================================================
   PREVISUALIZACIÓN DE LA ETIQUETA / STICKER (8x7 cm Horizontal)
   ======================================================== */
.sticker-preview-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px 0;
}

/* Formato Horizontal 80mm x 70mm (Proporción 8:7) */
.preview-sticker-troly {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 8 / 7;
  border-radius: 16px;
  box-shadow: 0 16px 36px -8px rgba(0, 43, 73, 0.45);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 18px;
  box-sizing: border-box;
  user-select: none;
}

/* ========================================================
   REGLAS DE IMPRESIÓN EXACTA PARA STICKERS DE 7x8 cm HORIZONTAL
   (@media print: 80mm x 70mm, fondo a color y sin cortes)
   ======================================================== */
@media print {
  @page {
    size: 80mm 70mm landscape;
    margin: 0 !important;
  }

  *, *::before, *::after {
    /* Forzar fondo a COLOR sin que el navegador lo elimine */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  html, body {
    width: 80mm !important;
    height: 70mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  body * {
    visibility: hidden !important;
  }

  /* Mostrar exclusivamente el contenedor de la etiqueta */
  #printable-sticker,
  #printable-sticker * {
    visibility: visible !important;
  }

  #printable-sticker {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 80mm !important;
    height: 70mm !important;
    max-width: 80mm !important;
    max-height: 70mm !important;
    min-width: 80mm !important;
    min-height: 70mm !important;
    margin: 0 !important;
    padding: 4mm 5mm !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Ocultar todos los controles de la app en la impresión */
  .no-print,
  #bottom-nav,
  #app-header,
  #sticker-modal-controls,
  .modal-backdrop,
  header,
  nav,
  main {
    display: none !important;
  }
}

/* Línea animada para visor de escaneo */
.scan-line {
  height: 2px;
  background: linear-gradient(to right, transparent, #005691, transparent);
  box-shadow: 0 0 8px #005691;
  animation: scanAnim 2s infinite ease-in-out;
}

@keyframes scanAnim {
  0% {
    transform: translateY(-80px);
  }
  50% {
    transform: translateY(80px);
  }
  100% {
    transform: translateY(-80px);
  }
}