/* =============================================
   PHOTOCHYZ — app.css (estilos custom mínimos)
   Tailwind v3 CDN maneja el resto
   ============================================= */

/* Scroll suave global */
html {
  scroll-behavior: smooth;
}

/* Aspect ratio para cards de foto */
.aspect-photo {
  aspect-ratio: 3 / 4;
}

/* Oculta scrollbar en chat pero permite scroll */
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* Animación de fade-in para contenido */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.3s ease both;
}

/* Skeleton loader */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

/* Estado de imagen lazy-load */
img[loading="lazy"] {
  transition: opacity 0.3s ease;
}

/* Hover overlay en cards de fotos */
.photo-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s ease;
}
.photo-card:hover .photo-card-overlay {
  background: rgba(0, 0, 0, 0.15);
}

/* Badge de carrito — posición */
.cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  padding: 0 4px;
}

/* Sidebar mobile transitions */
#mobile-sidebar {
  transition: transform 0.3s ease;
}

/* Estilos para el chat */
#chat-messages {
  scroll-behavior: smooth;
}

/* Print styles básicos */
@media print {
  nav, aside, footer, .no-print {
    display: none !important;
  }
  main {
    margin: 0 !important;
    padding: 0 !important;
  }
}