/* ===== PALETA DE COLORES MIXTA ===== */
:root {
  /* Colores originales para puntos y botones iniciales */
  --color-puntos-original1: #FFD700;  /* Para mantener puntos originales */
  --color-puntos-original2: #FF1493;
  --color-puntos-original3: #FF4500;
  --color-puntos-original4: #A8D5E5;  /* MODIFICADO: Azul igual al del botón cambiar tienda */
  --color-puntos-original5: #FFA500;
  --color-puntos-original6: #FF69B4;
  --color-puntos-original7: #FF4500;
  --color-puntos-original8: #A8D5E5;
  --color-puntos-original9: #FFB6C1;
  --color-puntos-original10: #DA70D6;
  --color-puntos-original11: #FF8C00;
  --color-puntos-original12: #98FB98;

  /* Colores pasteles para elementos específicos (filtros, cards, modal, carrito) */
  --color-primario: #F4D1AE;         /* Crema/beige suave para filtros y cards */
  --color-secundario: #E8A5A5;       /* Rosa coral suave para acentos */
  --color-acento1: #FFB3B3;          /* MODIFICADO: Rojo aún más claro para descuentos */
  --color-acento2: #A8D5E5;          /* Azul claro pastel para botones secundarios */
  --color-acento3: #f3a4aa;          /* Rosa claro (original para botones iniciales) */

  /* Colores adicionales de la imagen */
  --color-verde-suave: #8FBC8F;      /* Verde de las hojas */
  --color-rosa-claro: #F8BBD9;       /* Rosa muy claro */
  --color-coral-pastel: #FFAB91;     /* Coral pastel */
  --color-azul-pastel: #B0E0E6;      /* Azul muy claro */
  --color-naranja: #FF8C42;          /* Color naranja para botón cerrar */
  --color-naranja-hover: #FF6B1A;    /* NUEVO: Naranja más oscuro para hover */

  /* Colores neutros actualizados */
  --color-fondo: #FAF7F0;            /* Crema muy claro */
  --color-neutro: #FFFFFF;           /* Blanco puro */
  --color-texto: #5D4037;            /* Marrón cálido suave */
  --color-gris: #8D6E63;             /* Gris cálido */

  /* Sombras uniformes más suaves */
  --sombra-suave: 0 2px 8px rgba(0,0,0,0.08);
  --sombra-media: 0 4px 12px rgba(0,0,0,0.12);
  --sombra-fuerte: 0 6px 20px rgba(0,0,0,0.15);
}

* {
  box-sizing: border-box;
}

/* ===== FONDO DEL BODY CON PUNTOS ORIGINALES (SIN CAMBIOS) ===== */
body {
  font-family: 'Comfortaa', 'Segoe UI', sans-serif;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  margin: 0;
  padding: 0;
  padding-bottom: 100px;
  min-height: 100vh;
  line-height: 1.6;
  position: relative;

  /* Patrón de puntos completamente desordenados con colores ORIGINALES más intensos */
  background-image:
    /* Puntos esparcidos con colores más vibrantes y sombras */
    radial-gradient(circle at 3% 12%, var(--color-puntos-original1) 2.5px, transparent 2.5px),
    radial-gradient(circle at 89% 8%, var(--color-puntos-original2) 2px, transparent 2px),
    radial-gradient(circle at 23% 67%, var(--color-puntos-original3) 3px, transparent 3px),
    radial-gradient(circle at 78% 91%, var(--color-puntos-original4) 2px, transparent 2px),
    radial-gradient(circle at 44% 23%, var(--color-puntos-original5) 1.5px, transparent 1.5px),
    radial-gradient(circle at 67% 44%, var(--color-puntos-original6) 2.5px, transparent 2.5px),
    radial-gradient(circle at 12% 88%, var(--color-puntos-original7) 2px, transparent 2px),
    radial-gradient(circle at 91% 56%, var(--color-puntos-original8) 3px, transparent 3px),
    radial-gradient(circle at 56% 7%, var(--color-puntos-original9) 1.5px, transparent 1.5px),
    radial-gradient(circle at 7% 34%, var(--color-puntos-original10) 2px, transparent 2px),
    radial-gradient(circle at 34% 89%, var(--color-puntos-original11) 2.5px, transparent 2.5px),
    radial-gradient(circle at 82% 23%, var(--color-puntos-original12) 2px, transparent 2px),
    /* Capa adicional de puntos más pequeños para llenar espacios */
    radial-gradient(circle at 15% 45%, var(--color-puntos-original1) 1px, transparent 1px),
    radial-gradient(circle at 75% 65%, var(--color-puntos-original6) 1.5px, transparent 1.5px),
    radial-gradient(circle at 45% 15%, var(--color-puntos-original7) 1px, transparent 1px),
    radial-gradient(circle at 25% 75%, var(--color-puntos-original4) 1.5px, transparent 1.5px);

  /* Tamaños grandes y muy variados para máxima separación */
  background-size:
    200px 180px, 250px 220px, 180px 200px, 300px 280px,
    220px 190px, 190px 240px, 280px 200px, 160px 300px,
    240px 170px, 320px 250px, 170px 210px, 210px 160px,
    /* Tamaños para los puntos adicionales */
    150px 170px, 280px 160px, 190px 230px, 260px 180px;

  /* Posiciones completamente aleatorias */
  background-position:
    0 0, 80px 60px, 30px 150px, 160px 40px,
    120px 200px, 60px 90px, 200px 170px, 40px 120px,
    180px 30px, 100px 250px, 220px 80px, 150px 190px,
    /* Posiciones para puntos adicionales */
    70px 140px, 190px 70px, 140px 240px, 250px 110px;
}

/* ===== HEADER CON FONDO FLORAL ===== */
.header-container {
  background-image: url('./img/fondo-flores.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3rem 0;
  margin-bottom: 2rem;
  box-shadow: var(--sombra-media);
  position: relative;
}

/* Overlay más sutil para mejor contraste */
.header-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.2); /* Overlay blanco muy sutil */
  z-index: 1;
}

.header-container .container {
  position: relative;
  z-index: 2;
}

/* ===== TÍTULO PRINCIPAL CON TIPOGRAFÍA SIMPLE ===== */
.main-title {
  color: var(--color-texto);
  font-weight: 800;
  font-size: 3.2rem;
  margin: 0;
  letter-spacing: 3px;
  font-family: 'Comfortaa', sans-serif;

  /* Sombra blanca gruesa para contraste perfecto sobre cualquier fondo */
  text-shadow:
    3px 3px 0px white,
    -3px -3px 0px white,
    3px -3px 0px white,
    -3px 3px 0px white,
    0px 3px 0px white,
    3px 0px 0px white,
    0px -3px 0px white,
    -3px 0px 0px white,
    4px 4px 8px rgba(0,0,0,0.3);
}

/* ===== BOTONES DE NEGOCIO ORIGINALES (SIN CAMBIOS) ===== */
.negocio-buttons {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 2rem 0;
}

/* Ambos botones con el mismo estilo base ORIGINAL */
.btn-negocio {
  padding: 1.5rem 3rem;
  font-size: 1.3rem;
  font-weight: 600;
  border-radius: 20px;
  border: 3px solid var(--color-acento3);
  background-color: var(--color-acento3); /* Color original */
  color: var(--color-texto);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--sombra-suave);
  font-family: 'Comfortaa', sans-serif;
}

.btn-cambiar-tienda:hover {
  background-color: var(--color-secundario);
  border-color: var(--color-secundario);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--sombra-media);
}

/* ===== FILTROS CON COLORES PASTELES ===== */
.filtros-container {
  background: var(--color-neutro);
  padding: 2rem;
  border-radius: 20px;
  box-shadow: var(--sombra-suave);
  margin-bottom: 2rem;
  border: 2px solid var(--color-primario);
}

.filtros-title {
  color: var(--color-secundario);
  font-weight: 600;
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
  font-family: 'Comfortaa', sans-serif;
}

.form-label {
  color: var(--color-texto);
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-family: 'Comfortaa', sans-serif;
}

.form-select, .form-control {
  border: 2px solid var(--color-primario);
  border-radius: 10px;
  padding: 0.75rem;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  font-family: 'Comfortaa', sans-serif;
}

.form-select:focus, .form-control:focus {
  border-color: var(--color-secundario);
  box-shadow: 0 0 0 0.2rem rgba(232, 165, 165, 0.25);
  outline: none;
}

/* Botón limpiar filtros alineado con los campos */
.row.align-items-end .btn-limpiar {
  height: fit-content;
  align-self: end;
}

.btn-limpiar {
  background-color: var(--color-secundario);
  border: 2px solid var(--color-secundario);
  padding: 0.75rem 2rem;
  border-radius: 10px;
  font-weight: 600;
  color: white;
  transition: all 0.3s ease;
  box-shadow: var(--sombra-suave);
  font-family: 'Comfortaa', sans-serif;
}

.btn-limpiar:hover {
  background-color: var(--color-primario);
  border-color: var(--color-primario);
  color: var(--color-texto);
  transform: translateY(-2px);
  box-shadow: var(--sombra-media);
}

/* ===== CARDS DE PRODUCTOS CON COLORES PASTELES ===== */
.producto-card {
  background: var(--color-neutro);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  transition: all 0.3s ease;
  border: 2px solid var(--color-primario);
  height: 100%;
}

.producto-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sombra-media);
  border-color: var(--color-secundario);
}

.producto-card .card-img-top {
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

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

.card-body {
  padding: 1.5rem;
}

.card-title {
  color: var(--color-secundario);
  font-weight: 600;
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
  font-family: 'Comfortaa', sans-serif;
}

.card-text {
  color: var(--color-gris);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.precio-text {
  color: var(--color-acento1);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.badge {
  font-size: 0.75rem;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  background-color: var(--color-primario);
  color: var(--color-texto);
}

/* ===== BOTÓN VER DETALLE EN VERDE DE LAS FLORES ===== */
.ver-detalle-btn {
  background-color: var(--color-verde-suave);
  border: 2px solid var(--color-verde-suave);
  border-radius: 10px;
  padding: 0.75rem;
  font-weight: 500;
  color: white;
  transition: all 0.3s ease;
  width: 100%;
}

.ver-detalle-btn:hover {
  background-color: var(--color-secundario);
  border-color: var(--color-secundario);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--sombra-suave);
}

/* ===== MODAL CON COLORES PASTELES ===== */
.modal-content {
  border-radius: 20px;
  border: 2px solid var(--color-primario);
  box-shadow: var(--sombra-fuerte);
}

.modal-header {
  background-color: var(--color-secundario);
  color: white;
  border: none;
  padding: 1.5rem;
  border-radius: 18px 18px 0 0;
}

.modal-title {
  font-weight: 600;
  font-size: 1.4rem;
  font-family: 'Comfortaa', sans-serif;
}

.modal-body {
  padding: 2rem;
  background-color: var(--color-fondo);
}

.modal-footer {
  border: none;
  padding: 1.5rem;
  background-color: var(--color-fondo);
  border-radius: 0 0 18px 18px;
}

/* ===== MODAL DATOS CLIENTE ===== */
.datos-cliente-modal .modal-header {
  background-color: var(--color-primario);
  color: var(--color-texto);
}

.datos-cliente-modal .modal-body {
  background-color: var(--color-neutro);
}

.datos-cliente-modal .modal-footer {
  background-color: var(--color-neutro);
}

.info-privacidad {
  background-color: var(--color-fondo);
  border: 2px solid var(--color-acento2);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.info-privacidad i {
  color: var(--color-acento2);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.info-privacidad p {
  color: var(--color-texto);
  margin: 0;
  font-weight: 500;
}

.campo-requerido {
  border-color: var(--color-acento1) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 179, 179, 0.25) !important;
}

/* ===== BOTÓN AÑADIR AL CARRITO - MODIFICADO A VERDE ===== */
.btn-success {
  background-color: var(--color-verde-suave) !important;
  border: 2px solid var(--color-verde-suave) !important;
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  color: white !important;
  transition: all 0.3s ease;
}

.btn-success:hover {
  background-color: var(--color-secundario) !important;
  border-color: var(--color-secundario) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: var(--sombra-suave);
}

/* ===== BOTÓN CERRAR - MODIFICADO A NARANJA CON HOVER ===== */
.btn-secondary {
  background-color: var(--color-naranja) !important;
  border: 2px solid var(--color-naranja) !important;
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
  color: white !important;
}

.btn-secondary:hover {
  background-color: var(--color-naranja-hover) !important;
  border-color: var(--color-naranja-hover) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: var(--sombra-suave);
}

/* ===== CARRITO SIDEBAR CON COLORES PASTELES ===== */
#carritoSidebar {
  position: fixed;
  top: 0;
  right: -450px;
  width: 450px;
  height: 100%;
  background: var(--color-neutro);
  box-shadow: -5px 0 25px rgba(0,0,0,0.2);
  transition: right 0.4s ease;
  z-index: 1050;
  overflow-y: auto;
  padding: 2rem;
  border-left: 4px solid var(--color-secundario);
}

#carritoSidebar.abierto {
  right: 0;
}

#carritoSidebar h4 {
  color: var(--color-secundario);
  border-bottom: 3px solid var(--color-secundario);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  font-family: 'Comfortaa', sans-serif;
  font-size: 1.6rem;
}

.carrito-item {
  background: var(--color-fondo);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra-suave);
  border-left: 4px solid var(--color-primario);
  transition: all 0.3s ease;
}

.carrito-item:hover {
  transform: translateX(-3px);
  box-shadow: var(--sombra-media);
}

.carrito-item button {
  background-color: var(--color-acento1);
  border: none;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.carrito-item button:hover {
  background-color: var(--color-secundario);
  transform: scale(1.05);
}

/* ===== BOTÓN CERRAR CARRITO - MODIFICADO A NARANJA CON HOVER ===== */
.btn-cerrar-carrito {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-naranja);
  transition: all 0.3s ease;
  z-index: 10;
  background: none;
  border: none;
  padding: 0.5rem;
  border-radius: 50%;
}

.btn-cerrar-carrito:hover {
  color: var(--color-naranja-hover);
  background-color: rgba(255, 107, 26, 0.1);
  transform: scale(1.1);
}

/* ===== BOTÓN PAGAR - MODIFICADO A VERDE ===== */
#btnPagar {
  background-color: var(--color-verde-suave) !important;
  border: 2px solid var(--color-verde-suave) !important;
  color: white !important;
}

#btnPagar:hover {
  background-color: var(--color-secundario) !important;
  border-color: var(--color-secundario) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: var(--sombra-suave);
}

/* ===== BOTÓN CARRITO FLOTANTE CON COLORES PASTELES ===== */
#btnAbrirCarrito {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  background-color: var( --color-naranja);
  border: 2px solid var(--color-naranja);
  border-radius: 25px;
  padding: 1rem 1.5rem;
  font-weight: 600;
  color: white;
  box-shadow: var(--sombra-media);
  transition: all 0.3s ease;
  font-family: 'Comfortaa', sans-serif;
}

#btnAbrirCarrito:hover {
  background-color: var(--color-secundario);
  border-color: var(--color-secundario);
  transform: scale(1.05);
  box-shadow: var(--sombra-fuerte);
}

/* ===== ALERTAS CON COLORES PASTELES ===== */
.alerta {
  position: fixed;
  top: 2rem;
  right: 2rem;
  background-color: var(--color-primario);
  color: var(--color-texto);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  font-weight: 500;
  box-shadow: var(--sombra-media);
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
  z-index: 2000;
  border-left: 4px solid var(--color-secundario);
}

.alerta.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* ===== MENSAJE SIN PRODUCTOS ===== */
.alert-warning {
  background-color: var(--color-acento1);
  border: 2px solid var(--color-acento1);
  border-radius: 12px;
  color: white;
  font-weight: 500;
  padding: 1.5rem;
  box-shadow: var(--sombra-suave);
}

/* ===== ANIMACIONES ===== */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

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

/* ===== RESPONSIVE ===== */
@media(max-width: 768px) {
  /* Puntos desordenados también en móvil con colores originales visibles */
  body {
    background-size:
      150px 130px, 180px 160px, 130px 150px, 220px 200px,
      160px 140px, 140px 180px, 200px 150px, 120px 220px,
      180px 120px, 240px 180px, 120px 160px, 160px 120px,
      /* Tamaños para móvil de puntos adicionales */
      110px 130px, 200px 120px, 140px 170px, 190px 140px;
  }

  #carritoSidebar {
    width: 100%;
    right: -100%;
  }

  .main-title {
    font-size: 2.5rem;
    letter-spacing: 2px;
  }

  .btn-negocio {
    padding: 1.2rem 2.2rem;
    font-size: 1.1rem;
  }

  .negocio-buttons {
    gap: 1.5rem;
  }

  .filtros-container {
    padding: 1.5rem;
  }

  .btn-cambiar-tienda-container {
    margin-bottom: 1.5rem;
  }

  .producto-card .card-img-top {
    height: 180px;
  }
}

@media(max-width: 576px) {
  .main-title {
    font-size: 2.1rem;
    letter-spacing: 1px;
  }

  .btn-negocio {
    padding: 1rem 1.8rem;
    font-size: 1rem;
  }

  .filtros-container {
    padding: 1rem;
  }

  .producto-card .card-img-top {
    height: 160px;
  }

  .card-body {
    padding: 1rem;
  }

  #btnAbrirCarrito {
    bottom: 1rem;
    right: 1rem;
    padding: 0.75rem 1.25rem;
  }
}

/* ===== MEJORAS ADICIONALES ===== */
.btn-close {
  filter: brightness(0) invert(1);
}

.text-muted {
  color: var(--color-gris) !important;
}

.text-success {
  color: var(--color-secundario) !important;
}

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

/* Mejoras de accesibilidad */
.btn:focus,
.form-control:focus,
.form-select:focus {
  outline: 2px solid var(--color-secundario);
  outline-offset: 2px;
  box-shadow: var(--sombra-suave);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  font-family: 'Comfortaa', sans-serif;
}

/* Efecto hover ORIGINAL */
.btn-negocio:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--sombra-media);
  background-color: #8FBC8F; /* Color original */
  border-color: #8FBC8F;     /* Color original */
  color: white;
}

.btn-negocio:active {
  transform: translateY(-1px) scale(1);
}

/* Logos en botones más grandes */
.btn-negocio img {
  width: 80px;
  height: 80px;
  margin-right: 1.2rem;
  border-radius: 10px;
}

/* ===== BOTÓN CAMBIAR TIENDA CON COLORES PASTELES ===== */
.btn-cambiar-tienda-container {
  text-align: left;
  margin-bottom: 2rem;
  padding-left: 0;
}

.btn-cambiar-tienda {
  background-color: var(--color-acento2);
  border: 2px solid var(--color-acento2);
  border-radius: 12px;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  color: var(--color-texto);
  transition: all 0.3s ease;
}


/* ===== CARRUSEL DETALLE PRODUCTO ===== */

.detalle-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

/* Imagen principal */
#detalleImagen {
  /*max-height: 320px;*/
  max-width: 450px;
  object-fit: contain;
  border-radius: 15px;
  background-color: var(--color-neutro);
  padding: 0.5rem;
  box-shadow: var(--sombra-suave);
}

/* Flechas (IMÁGENES) */
.detalle-carousel a img {
  width: 35px;
  height: auto;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.detalle-carousel a:hover img {
  transform: scale(1.2);
  opacity: 0.8;
}

/* Responsive */
@media (max-width: 576px) {
  #detalleImagen {
    max-height: 300px; /* como se ve la imagen /detalle producto) en telefono
  }

  .detalle-carousel a img {
    width: 36px;
  }
}

h1 .titulo-sub {
  all: unset;                /* romper herencia del h1 */
  display: block;            /* se comporta como bloque */
  font-size: 12px;           /* tamaño pequeño */
  font-family: Arial, sans-serif; /* letra simple */
  font-weight: 400;          /* normal */
  line-height: 1.3;          /* espacio entre líneas */
  margin-top: 6px;           /* separación del título */
  opacity: 0.7;              /* un poco transparente */
  color: #333;               /* gris oscuro */
  text-shadow: none !important; /* 🔥 quita el text-shadow del h1 */
}