/* 
 * Estilos personalizados para Haztap Store
 * Complementa Tailwind CSS con estilos específicos
 */

/* Variables CSS personalizadas */
:root {
  --primary-color: #2563eb;
  --primary-hover: #1d4ed8;
  --secondary-color: #64748b;
  --success-color: #10b981;
  --error-color: #ef4444;
  --warning-color: #f59e0b;
  --border-radius: 0.5rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --transition: all 0.3s ease;
}

/* Reset y base */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  line-height: 1.6;
}


/* Utilidades personalizadas */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Transiciones suaves */
.transition-smooth {
  transition: var(--transition);
}

/* Botones personalizados */
.btn {
  @apply px-4 py-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
}

.btn-secondary {
  @apply bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500;
}

.btn-success {
  @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

.btn-error {
  @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-outline {
  @apply border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white focus:ring-blue-500;
}

/* Cards personalizadas */
.card {
  @apply bg-white rounded-lg shadow-md overflow-hidden;
}

.card-hover {
  @apply transition-shadow duration-300 hover:shadow-lg;
}

.card-body {
  @apply p-6;
}

.card-header {
  @apply px-6 py-4 border-b border-gray-200;
}

.card-footer {
  @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
}

/* Product cards específicas */
.product-card {
  @apply card card-hover;
  transition: transform 0.2s ease-in-out, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-2px);
}

.product-card img {
  transition: transform 0.3s ease;
}

.product-card:hover img {
  transform: scale(1.05);
}

/* Badges */
.badge {
  @apply inline-flex items-center px-2 py-1 text-xs font-medium rounded-full;
}

.badge-primary {
  @apply bg-blue-100 text-blue-800;
}

.badge-success {
  @apply bg-green-100 text-green-800;
}

.badge-error {
  @apply bg-red-100 text-red-800;
}

.badge-warning {
  @apply bg-yellow-100 text-yellow-800;
}

.badge-info {
  @apply bg-gray-100 text-gray-800;
}

/* Formularios */
.form-group {
  @apply mb-4;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

.form-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-input:invalid {
  @apply border-red-500 focus:ring-red-500;
}

.form-textarea {
  @apply form-input resize-vertical;
  min-height: 80px;
}

.form-select {
  @apply form-input bg-white;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.form-checkbox {
  @apply rounded border-gray-300 text-blue-600 focus:ring-blue-500;
}

.form-radio {
  @apply border-gray-300 text-blue-600 focus:ring-blue-500;
}

/* Alerts y notificaciones */
.alert {
  @apply px-4 py-3 rounded-md border-l-4;
}

.alert-success {
  @apply bg-green-50 border-green-400 text-green-700;
}

.alert-error {
  @apply bg-red-50 border-red-400 text-red-700;
}

.alert-warning {
  @apply bg-yellow-50 border-yellow-400 text-yellow-700;
}

.alert-info {
  @apply bg-blue-50 border-blue-400 text-blue-700;
}

/* Loading states */
.spinner {
  @apply inline-block animate-spin rounded-full border-2 border-solid border-current border-r-transparent;
  width: 1rem;
  height: 1rem;
}

.spinner-lg {
  width: 2rem;
  height: 2rem;
}

.skeleton {
  @apply bg-gray-200 animate-pulse rounded;
}

.skeleton-text {
  @apply skeleton h-4 mb-2;
}

.skeleton-title {
  @apply skeleton h-6 mb-4;
}

.skeleton-image {
  @apply skeleton aspect-square;
}

/* Modales */
.modal-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.modal-content {
  @apply bg-white rounded-lg shadow-xl max-w-md w-full mx-4 max-h-screen overflow-y-auto;
}

.modal-header {
  @apply px-6 py-4 border-b border-gray-200;
}

.modal-body {
  @apply px-6 py-4;
}

.modal-footer {
  @apply px-6 py-4 border-t border-gray-200 flex justify-end space-x-2;
}

/* Tooltips */
.tooltip {
  @apply absolute bg-gray-800 text-white px-2 py-1 rounded text-sm z-50 pointer-events-none;
}

.tooltip:before {
  content: '';
  @apply absolute top-full left-1/2 transform -translate-x-1/2;
  border: 4px solid transparent;
  border-top-color: #1f2937;
}

/* Dropdowns */
.dropdown {
  @apply relative inline-block;
}

.dropdown-menu {
  @apply absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-50 opacity-0 invisible transition-all duration-200;
}

.dropdown-menu.show {
  @apply opacity-100 visible;
}

.dropdown-item {
  @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900;
}

/* Tabs */
.tab-list {
  @apply flex border-b border-gray-200;
}

.tab-button {
  @apply px-4 py-2 font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300;
}

.tab-button.active {
  @apply text-blue-600 border-blue-600;
}

.tab-content {
  @apply py-4;
}

/* Paginación */
.pagination {
  @apply flex items-center space-x-1;
}

.pagination-item {
  @apply px-3 py-2 text-sm border border-gray-300 hover:bg-gray-50;
}

.pagination-item.active {
  @apply bg-blue-600 text-white border-blue-600;
}

.pagination-item:first-child {
  @apply rounded-l-md;
}

.pagination-item:last-child {
  @apply rounded-r-md;
}

/* Breadcrumbs */
.breadcrumb {
  @apply flex items-center space-x-2 text-sm text-gray-600;
}

.breadcrumb-item {
  @apply hover:text-blue-600;
}

.breadcrumb-separator {
  @apply text-gray-400;
}

/* Estados hover específicos */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Animaciones personalizadas */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes fadeInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

.animate-slide-out-right {
  animation: slideOutRight 0.3s ease-out;
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out;
}

/* Lazy loading */
img.lazy {
  filter: blur(5px);
  transition: filter 0.3s;
}

img.lazy.loaded {
  filter: blur(0);
}

/* Responsive utilities adicionales */
@media (max-width: 640px) {
  .mobile-hidden {
    display: none !important;
  }
}

@media (min-width: 641px) {
  .mobile-only {
    display: none !important;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
  }
  
  .card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* Dark mode (preparado para futuro) */
@media (prefers-color-scheme: dark) {
  .dark-auto {
    --bg-color: #1f2937;
    --text-color: #f9fafb;
    --border-color: #374151;
  }
}

/* Scrollbar personalizado */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Focus states mejorados */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

/* Estados de validación de formularios */
.field-valid {
  @apply border-green-500 focus:ring-green-500;
}

.field-invalid {
  @apply border-red-500 focus:ring-red-500;
}

.field-error-message {
  @apply text-red-600 text-sm mt-1;
}

/* Overlays y backdrops */
.overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 z-40;
}

.backdrop-blur {
  backdrop-filter: blur(4px);
}

/* Estilos para el carrito */
.cart-item {
  @apply border-b border-gray-200 last:border-b-0;
}

.cart-quantity-control {
  @apply flex items-center border rounded;
}

.cart-quantity-btn {
  @apply px-3 py-1 hover:bg-gray-100 transition-colors;
}

.cart-quantity-input {
  @apply w-16 text-center border-l border-r focus:outline-none;
}

/* Filtros de productos */
.filter-section {
  @apply mb-6 pb-6 border-b border-gray-200 last:border-b-0;
}

.filter-title {
  @apply font-medium text-gray-800 mb-3;
}

.filter-option {
  @apply flex items-center mb-2;
}

.filter-checkbox {
  @apply form-checkbox mr-2;
}

.filter-label {
  @apply text-sm text-gray-700 cursor-pointer;
}

/* Estados de productos */
.product-badge {
  @apply absolute top-2 left-2 px-2 py-1 text-xs rounded font-medium;
}

.product-badge-sale {
  @apply bg-red-500 text-white;
}

.product-badge-new {
  @apply bg-green-500 text-white;
}

.product-badge-out-of-stock {
  @apply bg-gray-500 text-white;
}

/* Ratings y reseñas */
.rating {
  @apply flex items-center;
}

.rating-star {
  @apply text-yellow-400;
}

.rating-star.empty {
  @apply text-gray-300;
}

/* Responsive grid helpers */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.auto-grid-sm {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.auto-grid-lg {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Utilidades de espaciado */
.section-padding {
  @apply py-16;
}

.container-padding {
  @apply px-4 mx-auto max-w-7xl;
}

/* Back to top button */
#back-to-top {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#back-to-top:hover {
  transform: translateY(-2px);
}

/* Loading overlay para páginas */
.page-loading {
  @apply fixed inset-0 bg-white bg-opacity-90 flex items-center justify-center z-50;
}

.page-loading .spinner {
  @apply w-8 h-8 text-blue-600;
}

/* Estilos para mensajes toast */
.toast {
  @apply fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transition-all duration-300 transform;
}

.toast-success {
  @apply bg-green-500 text-white;
}

.toast-error {
  @apply bg-red-500 text-white;
}

.toast-warning {
  @apply bg-yellow-500 text-white;
}

.toast-info {
  @apply bg-blue-500 text-white;
}
.submenu {
  z-index: 99999;
  position: absolute;
}