/* ========================================
   SLOT MACHINE - Tragaperras Profesional
   Grid 3x3 visible (9 símbolos en pantalla)
   Paleta DeLaFeria: Verde #2C5F2D, Dorado #FFB800, Coral #FF7A59
   ======================================== */

.slot-machine-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  max-width: 100vw;
  width: 100vw;
  margin: 0;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  /* Fondo estático optimizado - GPU accelerated */
  background: 
    radial-gradient(ellipse at 15% 20%, rgba(255, 184, 0, 0.25) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 15%, rgba(255, 122, 89, 0.3) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(44, 95, 45, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse at 30% 80%, rgba(255, 122, 89, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 75%, rgba(255, 184, 0, 0.2) 0%, transparent 45%),
    linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 25%, #1e0836 50%, #3d1f5c 75%, #1a0a2e 100%);
  background-position: center;
  will-change: transform;
  transform: translateZ(0);
}

/* Patrón de elementos de casino DENSO con efecto neón - Dorado, Naranja y Verde */
.slot-machine-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='neon-gold' x='-100%25' y='-100%25' width='300%25' height='300%25'%3E%3CfeGaussianBlur stdDeviation='6' result='blur'/%3E%3CfeFlood flood-color='%23FFB800' flood-opacity='0.9'/%3E%3CfeComposite in2='blur' operator='in' result='colorBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='colorBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3Cfilter id='neon-orange' x='-100%25' y='-100%25' width='300%25' height='300%25'%3E%3CfeGaussianBlur stdDeviation='6' result='blur'/%3E%3CfeFlood flood-color='%23FF7A59' flood-opacity='0.9'/%3E%3CfeComposite in2='blur' operator='in' result='colorBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='colorBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3Cfilter id='neon-green' x='-100%25' y='-100%25' width='300%25' height='300%25'%3E%3CfeGaussianBlur stdDeviation='6' result='blur'/%3E%3CfeFlood flood-color='%232C5F2D' flood-opacity='0.9'/%3E%3CfeComposite in2='blur' operator='in' result='colorBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='colorBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg opacity='0.85'%3E%3C!-- FILA 1 - Más elementos dorados --%3E%3C!-- Estrella dorada brillante --%3E%3Cpath d='M 20 15 L 23 22 L 31 23 L 25 28 L 27 36 L 20 31 L 13 36 L 15 28 L 9 23 L 17 22 Z' fill='%23FFB800' fill-opacity='0.8' stroke='%23FFB800' stroke-width='2' filter='url(%23neon-gold)'/%3E%3C!-- Ficha dorada premium --%3E%3Ccircle cx='60' cy='20' r='14' fill='%23FFB800' fill-opacity='0.2' stroke='%23FFB800' stroke-width='3' filter='url(%23neon-gold)'/%3E%3Ccircle cx='60' cy='20' r='9' fill='none' stroke='%23FFB800' stroke-width='1.8' stroke-dasharray='2,2' filter='url(%23neon-gold)'/%3E%3Ctext x='60' y='25' font-size='11' fill='%23FFB800' text-anchor='middle' font-weight='bold' filter='url(%23neon-gold)'%3E%E2%98%85%3C/text%3E%3C!-- Carta naranja --%3E%3Crect x='95' y='10' width='22' height='30' rx='2' fill='%23FF7A59' fill-opacity='0.2' stroke='%23FF7A59' stroke-width='2.5' filter='url(%23neon-orange)'/%3E%3Cpath d='M 106 18 L 101 25 L 106 32 L 111 25 Z' fill='%23FF7A59' fill-opacity='0.7' stroke='%23FF7A59' stroke-width='2' filter='url(%23neon-orange)'/%3E%3C!-- Ficha verde --%3E%3Ccircle cx='140' cy='22' r='12' fill='%232C5F2D' fill-opacity='0.2' stroke='%232C5F2D' stroke-width='2.5' filter='url(%23neon-green)'/%3E%3Ccircle cx='140' cy='22' r='8' fill='none' stroke='%232C5F2D' stroke-width='1.3' stroke-dasharray='2,2' filter='url(%23neon-green)'/%3E%3C!-- Dado dorado --%3E%3Crect x='170' y='12' width='20' height='20' rx='3' fill='%23FFB800' fill-opacity='0.2' stroke='%23FFB800' stroke-width='2.5' filter='url(%23neon-gold)'/%3E%3Ccircle cx='180' cy='22' r='2' fill='%23FFB800' filter='url(%23neon-gold)'/%3E%3Ccircle cx='175' cy='17' r='1.5' fill='%23FFB800' filter='url(%23neon-gold)'/%3E%3Ccircle cx='185' cy='27' r='1.5' fill='%23FFB800' filter='url(%23neon-gold)'/%3E%3C!-- FILA 2 --%3E%3C!-- Carta dorada --%3E%3Crect x='8' y='55' width='24' height='32' rx='2' fill='%23FFB800' fill-opacity='0.2' stroke='%23FFB800' stroke-width='2.5' filter='url(%23neon-gold)'/%3E%3Ctext x='20' y='76' font-size='16' fill='%23FFB800' text-anchor='middle' font-weight='bold' filter='url(%23neon-gold)'%3EJ%3C/text%3E%3C!-- Dado naranja --%3E%3Crect x='48' y='58' width='22' height='22' rx='3' fill='%23FF7A59' fill-opacity='0.2' stroke='%23FF7A59' stroke-width='2.5' filter='url(%23neon-orange)'/%3E%3Ccircle cx='59' cy='69' r='2.2' fill='%23FF7A59' filter='url(%23neon-orange)'/%3E%3Ccircle cx='54' cy='64' r='1.6' fill='%23FF7A59' filter='url(%23neon-orange)'/%3E%3Ccircle cx='64' cy='74' r='1.6' fill='%23FF7A59' filter='url(%23neon-orange)'/%3E%3C!-- Estrella verde --%3E%3Cpath d='M 100 58 L 102 64 L 108 65 L 103 69 L 105 75 L 100 71 L 95 75 L 97 69 L 92 65 L 98 64 Z' fill='%232C5F2D' fill-opacity='0.8' stroke='%232C5F2D' stroke-width='2' filter='url(%23neon-green)'/%3E%3C!-- Ficha dorada grande --%3E%3Ccircle cx='140' cy='70' r='16' fill='%23FFB800' fill-opacity='0.2' stroke='%23FFB800' stroke-width='3' filter='url(%23neon-gold)'/%3E%3Ccircle cx='140' cy='70' r='11' fill='none' stroke='%23FFB800' stroke-width='1.8' stroke-dasharray='3,3' filter='url(%23neon-gold)'/%3E%3Ctext x='140' y='75' font-size='13' fill='%23FFB800' text-anchor='middle' font-weight='bold' filter='url(%23neon-gold)'%3E$%3C/text%3E%3C!-- Carta naranja --%3E%3Crect x='170' y='57' width='23' height='31' rx='2' fill='%23FF7A59' fill-opacity='0.2' stroke='%23FF7A59' stroke-width='2.5' filter='url(%23neon-orange)'/%3E%3Cpath d='M 181 67 Q 176 63 173 67 Q 173 70 176 73 L 181 78 L 186 73 Q 189 70 189 67 Q 186 63 181 67 Z' fill='%23FF7A59' fill-opacity='0.7' stroke='%23FF7A59' stroke-width='2' filter='url(%23neon-orange)'/%3E%3C!-- FILA 3 --%3E%3C!-- Ficha naranja --%3E%3Ccircle cx='22' cy='115' r='13' fill='%23FF7A59' fill-opacity='0.2' stroke='%23FF7A59' stroke-width='2.8' filter='url(%23neon-orange)'/%3E%3Ccircle cx='22' cy='115' r='8.5' fill='none' stroke='%23FF7A59' stroke-width='1.5' stroke-dasharray='2,2' filter='url(%23neon-orange)'/%3E%3C!-- Estrella dorada brillante --%3E%3Cpath d='M 65 108 L 68 115 L 76 116 L 70 121 L 72 129 L 65 124 L 58 129 L 60 121 L 54 116 L 62 115 Z' fill='%23FFB800' fill-opacity='0.8' stroke='%23FFB800' stroke-width='2' filter='url(%23neon-gold)'/%3E%3C!-- Carta verde --%3E%3Crect x='98' y='105' width='24' height='33' rx='2' fill='%232C5F2D' fill-opacity='0.2' stroke='%232C5F2D' stroke-width='2.5' filter='url(%23neon-green)'/%3E%3Ccircle cx='110' cy='120' r='4' fill='%232C5F2D' fill-opacity='0.7' filter='url(%23neon-green)'/%3E%3Ccircle cx='105' cy='125' r='4' fill='%232C5F2D' fill-opacity='0.7' filter='url(%23neon-green)'/%3E%3Ccircle cx='115' cy='125' r='4' fill='%232C5F2D' fill-opacity='0.7' filter='url(%23neon-green)'/%3E%3C!-- Dado dorado --%3E%3Crect x='148' y='110' width='24' height='24' rx='3' fill='%23FFB800' fill-opacity='0.2' stroke='%23FFB800' stroke-width='2.8' filter='url(%23neon-gold)'/%3E%3Ccircle cx='160' cy='122' r='2.5' fill='%23FFB800' filter='url(%23neon-gold)'/%3E%3Ccircle cx='154' cy='116' r='1.8' fill='%23FFB800' filter='url(%23neon-gold)'/%3E%3Ccircle cx='166' cy='128' r='1.8' fill='%23FFB800' filter='url(%23neon-gold)'/%3E%3C!-- Ficha verde --%3E%3Ccircle cx='182' cy='120' r='14' fill='%232C5F2D' fill-opacity='0.2' stroke='%232C5F2D' stroke-width='2.8' filter='url(%23neon-green)'/%3E%3Ccircle cx='182' cy='120' r='9' fill='none' stroke='%232C5F2D' stroke-width='1.5' stroke-dasharray='2.5,2.5' filter='url(%23neon-green)'/%3E%3C!-- FILA 4 --%3E%3C!-- Carta dorada premium --%3E%3Crect x='10' y='155' width='26' height='35' rx='2' fill='%23FFB800' fill-opacity='0.2' stroke='%23FFB800' stroke-width='2.8' filter='url(%23neon-gold)'/%3E%3Ctext x='23' y='178' font-size='18' fill='%23FFB800' text-anchor='middle' font-weight='bold' filter='url(%23neon-gold)'%3EQ%3C/text%3E%3C!-- Dado verde --%3E%3Crect x='55' y='162' width='20' height='20' rx='3' fill='%232C5F2D' fill-opacity='0.2' stroke='%232C5F2D' stroke-width='2.5' filter='url(%23neon-green)'/%3E%3Ccircle cx='65' cy='172' r='2' fill='%232C5F2D' filter='url(%23neon-green)'/%3E%3Ccircle cx='60' cy='167' r='1.5' fill='%232C5F2D' filter='url(%23neon-green)'/%3E%3Ccircle cx='70' cy='177' r='1.5' fill='%232C5F2D' filter='url(%23neon-green)'/%3E%3C!-- Ficha dorada brillante --%3E%3Ccircle cx='105' cy='172' r='15' fill='%23FFB800' fill-opacity='0.2' stroke='%23FFB800' stroke-width='3' filter='url(%23neon-gold)'/%3E%3Ccircle cx='105' cy='172' r='10' fill='none' stroke='%23FFB800' stroke-width='1.8' stroke-dasharray='3,3' filter='url(%23neon-gold)'/%3E%3Ctext x='105' y='177' font-size='12' fill='%23FFB800' text-anchor='middle' font-weight='bold' filter='url(%23neon-gold)'%3E%E2%98%85%3C/text%3E%3C!-- Estrella naranja --%3E%3Cpath d='M 150 160 L 153 167 L 161 168 L 155 173 L 157 181 L 150 176 L 143 181 L 145 173 L 139 168 L 147 167 Z' fill='%23FF7A59' fill-opacity='0.8' stroke='%23FF7A59' stroke-width='2' filter='url(%23neon-orange)'/%3E%3C!-- Carta naranja --%3E%3Crect x='172' y='158' width='23' height='32' rx='2' fill='%23FF7A59' fill-opacity='0.2' stroke='%23FF7A59' stroke-width='2.5' filter='url(%23neon-orange)'/%3E%3Ctext x='183' y='179' font-size='17' fill='%23FF7A59' text-anchor='middle' font-weight='bold' filter='url(%23neon-orange)'%3EA%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ========================================
   DECORACIÓN CASINO - Ambiente de Juegos
   ======================================== */

.casino-decor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* Confetti de celebración - GPU accelerated */
.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -20px;
  animation: confettiFall 3s ease-out forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.confetti-0 {
  left: 10%;
  background: #FFB800;
  animation-delay: 0s;
}

.confetti-1 {
  left: 30%;
  background: #FF7A59;
  animation-delay: 0.1s;
}

.confetti-2 {
  left: 50%;
  background: #2C5F2D;
  animation-delay: 0.2s;
}

.confetti-3 {
  left: 70%;
  background: #FFB800;
  animation-delay: 0.3s;
}

.confetti-4 {
  left: 90%;
  background: #FF7A59;
  animation-delay: 0.4s;
}

@keyframes confettiFall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 600px, 0) rotate(720deg);
    opacity: 0;
  }
}

/* ========================================
   LUCES DECORATIVAS BRILLANTES - Lujo Premium
   ======================================== */

/* Estrellas brillantes optimizadas - GPU accelerated */
.luxury-sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #FFB800;
  border-radius: 50%;
  box-shadow: 
    0 0 15px 6px rgba(255, 184, 0, 0.7),
    0 0 30px 10px rgba(255, 184, 0, 0.4);
  animation: sparkleAnimation 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.sparkle-1 { top: 15%; left: 12%; animation-delay: 0s; }
.sparkle-2 { top: 25%; right: 18%; animation-delay: 0.3s; background: #FF7A59; box-shadow: 0 0 15px 6px rgba(255, 122, 89, 0.7), 0 0 30px 10px rgba(255, 122, 89, 0.4); }
.sparkle-3 { top: 45%; left: 8%; animation-delay: 0.6s; }
.sparkle-4 { top: 60%; right: 15%; animation-delay: 0.9s; background: #2C5F2D; box-shadow: 0 0 15px 6px rgba(44, 95, 45, 0.7), 0 0 30px 10px rgba(44, 95, 45, 0.4); }
.sparkle-5 { top: 75%; left: 20%; animation-delay: 1.2s; }
.sparkle-6 { top: 85%; right: 25%; animation-delay: 1.5s; background: #FF7A59; box-shadow: 0 0 15px 6px rgba(255, 122, 89, 0.7), 0 0 30px 10px rgba(255, 122, 89, 0.4); }
.sparkle-7 { top: 35%; left: 25%; animation-delay: 0.4s; }
.sparkle-8 { top: 55%; right: 10%; animation-delay: 0.7s; background: #2C5F2D; box-shadow: 0 0 15px 6px rgba(44, 95, 45, 0.7), 0 0 30px 10px rgba(44, 95, 45, 0.4); }
.sparkle-9 { top: 10%; left: 35%; animation-delay: 1s; }
.sparkle-10 { top: 90%; right: 30%; animation-delay: 1.3s; }
.sparkle-11 { top: 20%; left: 50%; animation-delay: 0.2s; background: #FF7A59; box-shadow: 0 0 15px 6px rgba(255, 122, 89, 0.7), 0 0 30px 10px rgba(255, 122, 89, 0.4); }
.sparkle-12 { top: 70%; right: 5%; animation-delay: 1.1s; }

@keyframes sparkleAnimation {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.8);
  }
}

/* Destellos de luz optimizados - GPU accelerated */
.golden-flash {
  position: absolute;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 184, 0, 0.9) 50%, transparent 100%);
  box-shadow: 0 0 20px 8px rgba(255, 184, 0, 0.5);
  animation: flashAnimation 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
  transform: rotate(45deg) translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.flash-1 { top: 18%; left: 15%; animation-delay: 0s; transform: rotate(45deg) translateZ(0); }
.flash-2 { top: 40%; right: 12%; animation-delay: 1s; transform: rotate(-45deg) translateZ(0); background: linear-gradient(90deg, transparent 0%, rgba(255, 122, 89, 0.9) 50%, transparent 100%); box-shadow: 0 0 20px 8px rgba(255, 122, 89, 0.5); }
.flash-3 { top: 65%; left: 10%; animation-delay: 2s; transform: rotate(45deg) translateZ(0); }
.flash-4 { top: 82%; right: 20%; animation-delay: 1.5s; transform: rotate(-45deg) translateZ(0); background: linear-gradient(90deg, transparent 0%, rgba(44, 95, 45, 0.9) 50%, transparent 100%); box-shadow: 0 0 20px 8px rgba(44, 95, 45, 0.5); }

@keyframes flashAnimation {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* Rayos de luz optimizados - GPU accelerated */
.light-ray {
  position: absolute;
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 184, 0, 0.4) 50%, transparent 100%);
  box-shadow: 0 0 30px 12px rgba(255, 184, 0, 0.35);
  animation: rayAnimation 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  transform-origin: left center;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.ray-1 { top: 20%; left: 5%; transform: rotate(25deg) translateZ(0); animation-delay: 0s; }
.ray-2 { top: 50%; right: 8%; transform: rotate(-35deg) translateZ(0); animation-delay: 2s; background: linear-gradient(90deg, transparent 0%, rgba(255, 122, 89, 0.4) 50%, transparent 100%); box-shadow: 0 0 30px 12px rgba(255, 122, 89, 0.35); }
.ray-3 { top: 75%; left: 10%; transform: rotate(50deg) translateZ(0); animation-delay: 4s; background: linear-gradient(90deg, transparent 0%, rgba(44, 95, 45, 0.4) 50%, transparent 100%); box-shadow: 0 0 30px 12px rgba(44, 95, 45, 0.35); }

@keyframes rayAnimation {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
}

/* Resplandor de neón optimizado - GPU accelerated, sin filter animado */
.slot-machine-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    /* Capa principal dorada central */
    radial-gradient(ellipse 700px 600px at 50% 40%, rgba(255, 184, 0, 0.45) 0%, rgba(255, 184, 0, 0.2) 30%, transparent 60%),
    /* Capa naranja */
    radial-gradient(ellipse 550px 500px at 20% 25%, rgba(255, 122, 89, 0.5) 0%, rgba(255, 122, 89, 0.25) 25%, transparent 50%),
    /* Capa verde */
    radial-gradient(ellipse 500px 500px at 80% 30%, rgba(44, 95, 45, 0.4) 0%, rgba(44, 95, 45, 0.2) 25%, transparent 48%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  animation: neonPulseOptimized 3s ease-in-out infinite;
}

@keyframes neonPulseOptimized {
  0%, 100% {
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
}

/* ========================================
   MARCO DE LA TRAGAPERRAS
   ======================================== */

.slot-machine-frame {
  width: 100%;
  background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);
  border-radius: 24px;
  padding: 24px 20px;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.4),
    inset 0 -2px 10px rgba(255, 184, 0, 0.2);
  position: relative;
  border: 3px solid #FFB800;
  z-index: 1;
}

/* ========================================
   PALANCA LATERAL - Estilo Tragaperras Clásica
   ======================================== */

.slot-lever {
  position: absolute;
  right: -30px;
  top: 40%;
  transform: translateY(-50%);
  width: 25px;
  height: 200px;
  z-index: 10;
  pointer-events: none;
}

.lever-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 35px;
  height: 35px;
  background: radial-gradient(circle, #444 0%, #222 100%);
  border-radius: 50%;
  box-shadow: 
    0 3px 8px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.1);
  border: 2px solid #333;
}

.lever-rod {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 140px;
  background: linear-gradient(90deg, #666 0%, #888 50%, #666 100%);
  border-radius: 4px;
  box-shadow: 
    inset -2px 0 4px rgba(0, 0, 0, 0.3),
    2px 0 6px rgba(0, 0, 0, 0.2);
  transform-origin: bottom center;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lever-ball {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  background: radial-gradient(circle at 30% 30%, #FF7A59 0%, #d64d2f 100%);
  border-radius: 50%;
  box-shadow: 
    0 4px 12px rgba(255, 122, 89, 0.5),
    inset -3px -3px 8px rgba(0, 0, 0, 0.3),
    inset 2px 2px 6px rgba(255, 255, 255, 0.4);
  border: 2px solid #c44228;
}

/* Animación de la palanca cuando se activa */
.slot-lever.pulling .lever-rod {
  transform: translateX(-50%) rotate(25deg);
}

.slot-lever.pulling .lever-ball {
  box-shadow: 
    0 6px 16px rgba(255, 122, 89, 0.7),
    inset -3px -3px 8px rgba(0, 0, 0, 0.3),
    inset 2px 2px 6px rgba(255, 255, 255, 0.4);
}

/* ========================================
   DISPLAY SUPERIOR
   ======================================== */

.slot-display {
  background: #0a0a0a;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
  border: 2px solid #333;
}

.slot-display-text {
  text-align: center;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.display-ready {
  color: #FFB800;
  text-shadow: 0 0 10px rgba(255, 184, 0, 0.6);
  animation: pulseGlow 2s ease-in-out infinite;
}

.display-spinning {
  color: #FF7A59;
  text-shadow: 0 0 10px rgba(255, 122, 89, 0.6);
  animation: blinkText 0.5s ease-in-out infinite;
}

.display-winner {
  color: #2C5F2D;
  text-shadow: 0 0 15px rgba(44, 95, 45, 0.8);
  animation: celebrateText 0.6s ease-in-out;
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes blinkText {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes celebrateText {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========================================
   VENTANA DE LOS RODILLOS - 3x3 GRID
   ======================================== */

.slot-window {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 16px;
  padding: 16px 12px;
  box-shadow: 
    inset 0 4px 12px rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  border: 3px solid #FFB800;
  min-height: 360px;
}

/* Línea de pago central - fila del medio */
.payline {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, #FF7A59 50%, transparent 100%);
  transform: translateY(-50%);
  z-index: 10;
  box-shadow: 0 0 10px rgba(255, 122, 89, 0.6);
  animation: paylinePulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes paylinePulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* Flechas indicadoras de ganancia */
.winning-indicators {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 11;
}

.win-arrow {
  font-size: 2rem;
  color: #2C5F2D;
  text-shadow: 0 0 15px rgba(44, 95, 45, 0.8);
  animation: arrowBounce 0.8s ease-in-out infinite;
}

.win-arrow-left {
  padding-left: 8px;
}

.win-arrow-right {
  padding-right: 8px;
}

@keyframes arrowBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}

/* ========================================
   RODILLOS - Grid 3x3
   ======================================== */

.slot-reels {
  display: flex;
  gap: 16px;
  justify-content: center;
  position: relative;
}

.slot-reel-container {
  flex: 1;
  max-width: 120px;
  height: 360px;
  background: linear-gradient(180deg, #e8e8e8 0%, #f5f5f5 50%, #e8e8e8 100%);
  border-radius: 12px;
  box-shadow: 
    inset 0 3px 10px rgba(0, 0, 0, 0.2),
    inset 0 -3px 10px rgba(0, 0, 0, 0.15),
    /* Separador izquierdo brillante */
    inset 3px 0 6px rgba(255, 255, 255, 0.4),
    /* Separador derecho oscuro */
    inset -3px 0 8px rgba(0, 0, 0, 0.25),
    /* Sombra externa para profundidad */
    0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
  border: 2px solid #ccc;
  border-left: 3px solid #d4d4d4;
  border-right: 3px solid #a8a8a8;
}

/* Cada rodillo muestra 3 símbolos (3 filas) */
.slot-reel {
  display: flex;
  flex-direction: column;
  position: relative;
  /* Posición inicial: símbolo índice 10 en el medio */
  transform: translate3d(0, -1080px, 0);
  will-change: transform;
  backface-visibility: hidden;
  /* NO transition aquí - se controla con inline styles cuando necesario */
}

/* Animación de giro - desplazamiento rápido continuo con blur realista */
.slot-reel.spinning {
  animation: spinReelRapid 0.15s linear infinite;
  transition: none;
  filter: blur(3px);
  will-change: transform, filter;
}

/* Animación ultra rápida para giro realista */
@keyframes spinReelRapid {
  0% {
    transform: translate3d(0, -1080px, 0);
  }
  100% {
    transform: translate3d(0, -2760px, 0); /* Scroll ultra rápido - 14 símbolos */
  }
}

/* Animación de desaceleración suave - cuando llega la respuesta del backend */
/* La clase stopping SOLO controla el blur, el transform se maneja con inline style */
.slot-reel.stopping {
  filter: blur(0px) !important;
  will-change: transform, filter;
  /* NO animation aquí - el transform inline tiene prioridad */
}

/* Keyframe de desaceleración - ANIMACIÓN REAL desde cualquier posición hasta símbolo ganador */
@keyframes reelDecelerate {
  0% {
    /* Mantener blur inicial */
    filter: blur(4px);
  }
  100% {
    /* Centrar en símbolo ganador (índice 10) */
    transform: translate3d(0, -1080px, 0);
    filter: blur(0px);
  }
}

.slot-symbol {
  width: 100%;
  height: 120px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  flex-shrink: 0;
}

.slot-symbol img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  user-select: none;
  pointer-events: none;
}

/* ========================================
   LUCES DECORATIVAS
   ======================================== */

.slot-lights {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
  gap: 8px;
}

.light {
  width: 12px;
  height: 12px;
  background: #444;
  border-radius: 50%;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.light-active {
  animation: lightBlink 0.8s ease-in-out infinite;
}

.light-winner {
  animation: lightWinner 0.6s ease-in-out infinite;
}

@keyframes lightBlink {
  0%, 100% {
    background: #FFB800;
    box-shadow: 
      0 0 10px rgba(255, 184, 0, 0.8),
      inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  }
  50% {
    background: #FF7A59;
    box-shadow: 
      0 0 15px rgba(255, 122, 89, 1),
      inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  }
}

@keyframes lightWinner {
  0%, 100% {
    background: #2C5F2D;
    box-shadow: 
      0 0 12px rgba(44, 95, 45, 0.9),
      inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  }
  50% {
    background: #FFB800;
    box-shadow: 
      0 0 18px rgba(255, 184, 0, 1),
      inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  }
}

/* ========================================
   BOTÓN DE GIRAR
   ======================================== */

.slot-spin-btn {
  width: 100%;
  max-width: 280px;
  padding: 20px 40px;
  background: linear-gradient(135deg, #FFB800 0%, #ffc833 100%);
  border: none;
  border-radius: 50px;
  color: white;
  font-size: 1.3rem;
  font-weight: 900;
  font-family: 'Segoe UI', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 6px 20px rgba(44, 95, 45, 0.4),
    inset 0 -3px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

.slot-spin-btn:hover:not(.disabled):not(.spinning) {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 10px 30px rgba(44, 95, 45, 0.5),
    inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}

.slot-spin-btn:active:not(.disabled):not(.spinning) {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 
    0 4px 15px rgba(44, 95, 45, 0.4),
    inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}

.slot-spin-btn.disabled {
  background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%);
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.slot-spin-btn.spinning {
  background: linear-gradient(135deg, #FF7A59 0%, #ff8c6b 100%);
  animation: buttonPulse 1s ease-in-out infinite;
  cursor: not-allowed;
}

@keyframes buttonPulse {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(255, 122, 89, 0.4);
  }
  50% {
    box-shadow: 0 8px 30px rgba(255, 122, 89, 0.6);
  }
}

.spin-btn-icon {
  width: 70px;
  height: 70px;
  margin-right: 12px;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  position: relative;
  z-index: 2;
  animation: iconFloat 2s ease-in-out infinite;
}

@keyframes iconFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-4px);
  }
}

.slot-spin-btn:hover:not(.disabled):not(.spinning) .spin-btn-icon {
  animation: iconBounce 0.6s ease;
}

@keyframes iconBounce {
  0%, 100% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.15) translateY(-6px);
  }
}

.spin-btn-text {
  position: relative;
  z-index: 2;
  display: inline-block;
  vertical-align: middle;
}

.spin-btn-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.slot-spin-btn:hover:not(.disabled):not(.spinning) .spin-btn-glow {
  left: 100%;
}

/* ========================================
   RESULTADO - Overlay sobre la tragaperras
   ======================================== */

.slot-result {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  z-index: 100;
  padding: 20px;
  background: rgba(10, 0, 21, 0.95);
  border-radius: 24px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.8),
    0 0 100px rgba(255, 184, 0, 0.4),
    inset 0 0 50px rgba(255, 184, 0, 0.1);
  border: 3px solid #FFB800;
  backdrop-filter: blur(10px);
}

.result-prize-info {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  padding: 28px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.1),
    inset 0 -2px 0 rgba(255, 184, 0, 0.3);
  border: 3px solid #FFB800;
  width: 100%;
  animation: resultPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes resultPop {
  0% {
    transform: scale(0.5) rotate(-5deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) rotate(2deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.result-prize-icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 12px rgba(44, 95, 45, 0.3));
  animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.result-prize-name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: #2C5F2D;
  font-family: 'Segoe UI', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-continue-slot {
  width: 100%;
  max-width: 280px;
  padding: 18px 36px;
  background: linear-gradient(135deg, #FFB800 0%, #ff8c00 100%);
  border: none;
  border-radius: 50px;
  color: #1a1a1a;
  font-size: 1.1rem;
  font-weight: 800;
  font-family: 'Segoe UI', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow: 
    0 6px 20px rgba(255, 184, 0, 0.4),
    inset 0 -3px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-continue-slot:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 10px 30px rgba(255, 184, 0, 0.5),
    inset 0 -3px 0 rgba(0, 0, 0, 0.1);
}

.btn-continue-slot:active {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 
    0 4px 15px rgba(255, 184, 0, 0.4),
    inset 0 -3px 0 rgba(0, 0, 0, 0.1);
}

/* ========================================
   RESPONSIVE - Mobile Optimization
   ======================================== */

@media (max-width: 480px) {
  .slot-machine-container {
    padding: 10px;
    gap: 12px;
    min-height: 100vh;
    justify-content: center;
  }

  .slot-machine-frame {
    padding: 16px 12px;
    max-width: 95vw;
  }

  .slot-display {
    padding: 12px;
    margin-bottom: 12px;
  }

  .slot-display-text {
    font-size: 0.9rem;
  }

  /* CRITICAL: Ventana ajustada para 3 símbolos de 100px */
  .slot-window {
    min-height: 300px;
    padding: 12px 8px;
  }

  .slot-reel-container {
    max-width: 100px;
    height: 300px;
  }

  /* Transform controlado por inline styles de JavaScript */
  .slot-reel.spinning {
    animation: spinReelMobile 0.3s linear infinite;
  }

  @keyframes spinReelMobile {
    0% {
      transform: translate3d(0, -900px, 0);
    }
    100% {
      transform: translate3d(0, -2000px, 0);
    }
  }

  .slot-symbol {
    height: 100px;
    min-height: 100px;
    padding: 10px;
  }

  .slot-symbol img {
    width: 55px;
    height: 55px;
  }

  .slot-lights {
    margin-top: 10px;
  }

  /* Ocultar palanca en móvil para mejor UX */
  .slot-lever {
    display: none;
  }

  .slot-spin-btn {
    max-width: 85vw;
    padding: 14px 28px;
    font-size: 1rem;
  }

  .result-prize-icon {
    width: 70px;
    height: 70px;
  }

  .result-prize-name {
    font-size: 1.1rem;
  }

  .btn-continue-slot {
    max-width: 85vw;
    padding: 14px 24px;
    font-size: 0.95rem;
  }

  .win-arrow {
    font-size: 1.3rem;
  }
}

@media (max-width: 360px) {
  .slot-machine-container {
    padding: 8px;
    gap: 10px;
  }

  .slot-machine-frame {
    padding: 14px 10px;
  }

  .slot-display {
    padding: 10px;
    margin-bottom: 10px;
  }

  .slot-display-text {
    font-size: 0.85rem;
    letter-spacing: 1px;
  }

  /* CRITICAL: Ventana ajustada para 3 símbolos de 85px */
  .slot-window {
    min-height: 255px;
    padding: 10px 6px;
  }

  .slot-reel-container {
    max-width: 85px;
    height: 255px;
  }

  /* Transform controlado por inline styles de JavaScript */
  .slot-reel.spinning {
    animation: spinReelSmall 0.3s linear infinite;
  }

  @keyframes spinReelSmall {
    0% {
      transform: translate3d(0, -765px, 0);
    }
    100% {
      transform: translate3d(0, -1700px, 0);
    }
  }

  .slot-symbol {
    height: 85px;
    min-height: 85px;
    padding: 8px;
  }

  .slot-symbol img {
    width: 48px;
    height: 48px;
  }

  .slot-lights {
    margin-top: 8px;
  }

  /* Ocultar palanca en móvil para mejor UX */
  .slot-lever {
    display: none;
  }

  .slot-spin-btn {
    font-size: 0.95rem;
    padding: 12px 20px;
  }

  .result-prize-name {
    font-size: 1rem;
  }

  .btn-continue-slot {
    padding: 12px 20px;
    font-size: 0.9rem;
  }
}

/* ========================================
   ANIMACIÓN FADE-IN
   ======================================== */

.fade-in {
  animation: fadeInSlot 0.4s ease;
}

@keyframes fadeInSlot {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ========================================
   WELCOME GAME - Juego de Bienvenida
   Diseño minimalista profesional mobile-first
   Paleta DeLaFeria Premium: Verde #2C5F2D, Coral #FF7A59, Dorado #FFB800
   ======================================== */

/* ========================================
   OVERLAY Y MODAL BASE
   ======================================== */

.welcome-game-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Fondo MÁS OPACO con luces abstractas premium - Dashboard COMPLETAMENTE cubierto (no se ve abajo) */
  background: 
    radial-gradient(circle at 15% 20%, rgba(255, 184, 0, 0.75) 0%, transparent 35%),
    radial-gradient(circle at 85% 30%, rgba(255, 122, 89, 0.70) 0%, transparent 40%),
    radial-gradient(circle at 10% 70%, rgba(44, 95, 45, 0.68) 0%, transparent 35%),
    radial-gradient(circle at 90% 85%, rgba(255, 184, 0, 0.72) 0%, transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(255, 122, 89, 0.65) 0%, transparent 45%),
    radial-gradient(circle at 30% 90%, rgba(44, 95, 45, 0.70) 0%, transparent 32%),
    linear-gradient(135deg, #000000 0%, #0a0a10 50%, #050508 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 0;
  animation: fadeIn 0.3s ease, gentleGlow 6s ease-in-out infinite;
  overflow: hidden;
}

.welcome-game-modal {
  background: transparent;
  border-radius: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  overflow-y: auto;
  box-shadow: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pseudo-elementos eliminados - Todo está en el SVG unificado */

/* ========================================
   ANIMACIONES
   ======================================== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes gentleGlow {
  0%, 100% {
    opacity: 0.95;
  }
  50% {
    opacity: 1;
  }
}

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

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner-icon,
.spinner-icon-small {
  animation: spin 1.5s linear infinite;
}

.spinner-icon {
  width: 60px;
  height: 60px;
}

.spinner-icon-small {
  width: 32px;
  height: 32px;
}

/* ========================================
   BOTÓN CERRAR
   ======================================== */

.close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

.close-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}

.close-btn img {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

/* ========================================
   STEP 1: BIENVENIDA
   ======================================== */

.welcome-step {
  padding: 60px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
}

.welcome-header-text {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 24px 0;
  font-family: 'Segoe UI', sans-serif;
  text-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.5),
    0 4px 16px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
}

.welcome-logo-large {
  max-width: 280px;
  width: 90%;
  height: auto;
  margin-bottom: 32px;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3));
  animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.welcome-logo {
  max-width: 180px;
  height: auto;
  margin-bottom: 32px;
}

.welcome-title {
  font-size: 28px;
  font-weight: 700;
  color: #2C5F2D;
  margin: 0 0 12px 0;
  font-family: 'Segoe UI', sans-serif;
}

.welcome-subtitle {
  font-size: 16px;
  color: #64748b;
  margin: 0 0 40px 0;
}

.welcome-subtitle-new {
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 48px 0;
  max-width: 420px;
  line-height: 1.6;
  background: rgba(0, 0, 0, 0.4);
  padding: 20px 28px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.welcome-loading {
  display: flex;
  justify-content: center;
}

.welcome-start-btn {
  background: linear-gradient(135deg, #2C5F2D 0%, #3a7a3c 100%);
  color: white;
  border: none;
  padding: 16px 48px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(44, 95, 45, 0.3);
  font-family: 'Segoe UI', sans-serif;
}

.welcome-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(44, 95, 45, 0.4);
}

.welcome-start-btn:active {
  transform: translateY(0);
}

/* ========================================
   STEP 2: SCRATCH GRID
   ======================================== */

.scratch-step {
  padding: 40px 24px;
}

.scratch-title {
  font-size: 24px;
  font-weight: 700;
  color: #2C5F2D;
  text-align: center;
  margin: 0 0 8px 0;
}

.scratch-subtitle {
  font-size: 14px;
  color: #64748b;
  text-align: center;
  margin: 0 0 32px 0;
}

.scratch-grid-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.scratch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 360px;
  width: 100%;
}

/* ========================================
   SCRATCH CARD
   ======================================== */

.scratch-card {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.scratch-card:hover:not(.disabled):not(.scratching) {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(44, 95, 45, 0.15);
  border-color: #2C5F2D;
}

.scratch-card.selected {
  border-color: #2C5F2D;
  background: linear-gradient(135deg, #2C5F2D 0%, #3a7a3c 100%);
}

.scratch-card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.scratch-card.scratching {
  animation: scratch 0.5s ease;
}

@keyframes scratch {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px) rotate(-2deg);
  }
  75% {
    transform: translateX(4px) rotate(2deg);
  }
}

.scratch-card-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.scratch-card-front {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.scratch-icon {
  width: 70%;
  height: auto;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.scratch-card:hover:not(.disabled) .scratch-icon {
  opacity: 1;
}

.scratch-card.selected .scratch-icon {
  opacity: 1;
  filter: brightness(0) invert(1);
}

.scratch-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.15) 0%, rgba(255, 122, 89, 0.15) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.scratch-card:hover:not(.disabled) .scratch-card-overlay {
  opacity: 1;
}

.scratching-feedback {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.scratching-feedback p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

/* ========================================
   PRIZE REVEALED IN CARD
   ======================================== */

.prize-revealed-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  z-index: 5;
  animation: prizeRevealFadeIn 0.6s ease;
}

@keyframes prizeRevealFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.prize-icon-large {
  width: 75%;
  height: auto;
  animation: prizeIconPop 0.5s ease 0.2s both;
}

@keyframes prizeIconPop {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.prize-title-card {
  font-size: 9px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  text-align: center;
  line-height: 1.2;
  animation: textSlideUp 0.5s ease 0.3s both;
}

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

/* Winner badge in header - reemplaza "Raspa una casilla" */
.winner-badge-header {
  background: linear-gradient(135deg, #FFB800 0%, #FFCA28 100%);
  color: #2C5F2D;
  font-size: 24px;
  font-weight: 700;
  padding: 16px 32px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(255, 184, 0, 0.5);
  animation: badgePulseHeader 1.5s ease-in-out infinite;
  text-align: center;
  margin: 0 0 32px 0;
  white-space: nowrap;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

@keyframes badgePulseHeader {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 6px 20px rgba(255, 184, 0, 0.5);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 10px 32px rgba(255, 184, 0, 0.8);
  }
}

@keyframes badgePulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 2px 8px rgba(255, 184, 0, 0.5);
  }
  50% {
    transform: translateX(-50%) scale(1.08);
    box-shadow: 0 4px 16px rgba(255, 184, 0, 0.8);
  }
}

.scratch-card.prize-revealed {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-color: #2C5F2D;
  box-shadow: 0 4px 16px rgba(44, 95, 45, 0.2);
}

/* Carta ganadora agrandada - NOTABLEMENTE más grande */
.scratch-card.winner-enlarged {
  animation: winnerEnlarge 1.2s ease forwards;
  z-index: 100;
}

@keyframes winnerEnlarge {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 16px rgba(44, 95, 45, 0.2);
  }
  50% {
    transform: scale(1.55);
    box-shadow: 0 12px 40px rgba(255, 184, 0, 0.6);
  }
  100% {
    transform: scale(1.5);
    box-shadow: 0 10px 32px rgba(255, 184, 0, 0.5);
  }
}

.scratch-card.revealing .scratch-card-front {
  transition: opacity 0.6s ease;
}

/* ========================================
   CONTINUE BUTTON IN GRID
   ======================================== */

.btn-continue-grid {
  background: linear-gradient(135deg, #2C5F2D 0%, #3a7a3c 100%);
  color: white;
  border: none;
  padding: 16px 48px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(44, 95, 45, 0.3);
  margin-top: 8px;
  animation: fadeIn 0.4s ease;
}

.btn-continue-grid:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(44, 95, 45, 0.4);
}

.btn-continue-grid:active {
  transform: translateY(0);
}

.btn-start-scratching {
  background: linear-gradient(135deg, #2C5F2D 0%, #3a7a3c 100%);
  color: white;
  border: none;
  padding: 16px 48px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(44, 95, 45, 0.3);
  animation: pulse 2s ease-in-out infinite;
}

.btn-start-scratching:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(44, 95, 45, 0.4);
  animation: none;
}

.btn-start-scratching:active {
  transform: translateY(0);
}

/* ========================================
   SCRATCH ANIMATION INLINE (Dentro de la Casilla)
   ======================================== */

.scratch-animation-inline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: auto;
}

.scratch-canvas-inline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  touch-action: none;
}

.scratch-progress-inline {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  overflow: hidden;
  backdrop-filter: blur(4px);
  z-index: 11;
  pointer-events: none;
}

.scratch-progress-bar-inline {
  height: 100%;
  background: linear-gradient(90deg, #2C5F2D 0%, #3a7a3c 100%);
  transition: width 0.2s ease;
  border-radius: 3px;
}

.scratch-text-inline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 11;
  pointer-events: none;
  background: rgba(44, 95, 45, 0.8);
  padding: 4px 12px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
}

.scratch-continue-btn-inline {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #2C5F2D 0%, #3a7a3c 100%);
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(44, 95, 45, 0.5);
  z-index: 12;
}

.scratch-continue-btn-inline:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 6px 16px rgba(44, 95, 45, 0.6);
}

.scratch-continue-btn-inline:active {
  transform: translateX(-50%) translateY(0);
}

/* ========================================
   STEP 3: PRIZE REVEAL
   ======================================== */

.prize-reveal-container {
  padding: 48px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.confetti-animation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: 
    radial-gradient(circle, #FFB800 2px, transparent 2px),
    radial-gradient(circle, #FF7A59 2px, transparent 2px),
    radial-gradient(circle, #2C5F2D 2px, transparent 2px);
  background-size: 50px 50px, 80px 80px, 60px 60px;
  background-position: 0 0, 20px 20px, 40px 10px;
  animation: confetti 3s ease-out forwards;
}

@keyframes confetti {
  from {
    transform: translateY(-100%);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

.prize-reveal-content {
  position: relative;
  z-index: 1;
}

.prize-reveal-icon-wrapper {
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(44, 95, 45, 0.15);
}

.prize-reveal-icon {
  width: 70%;
  height: auto;
}

.prize-reveal-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px 0;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.6),
    0 4px 16px rgba(44, 95, 45, 0.5);
  background: linear-gradient(135deg, #2C5F2D 0%, #3a7a3c 100%);
  padding: 8px 24px;
  border-radius: 8px;
  display: inline-block;
}

.prize-reveal-prize-name {
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 20px 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  padding: 8px 20px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.prize-reveal-description {
  font-size: 15px;
  color: #ffffff;
  line-height: 1.7;
  margin: 0 0 32px 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(0, 0, 0, 0.5);
  padding: 20px 24px;
  border-radius: 14px;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  font-weight: 500;
}

.prize-reveal-notice {
  background: linear-gradient(135deg, #FFB800 0%, #FFCA28 100%);
  padding: 16px 20px;
  border-radius: 16px;
  margin: 0 0 32px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 16px rgba(255, 184, 0, 0.25);
}

.notice-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.prize-reveal-notice p {
  font-size: 14px;
  color: #2C5F2D;
  margin: 0;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.prize-reveal-btn {
  background: linear-gradient(135deg, #2C5F2D 0%, #3a7a3c 100%);
  color: white;
  border: none;
  padding: 16px 40px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(44, 95, 45, 0.3);
}

.prize-reveal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(44, 95, 45, 0.4);
}

/* ========================================
   STEP 4: REQUIREMENTS
   ======================================== */

.requirements-container {
  padding: 40px 24px;
}

.requirements-header {
  text-align: center;
  margin-bottom: 32px;
}

.requirements-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 16px;
}

.requirements-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.requirements-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.requirements-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px;
}

.requirement-item {
  background: #f8fafc;
  border-radius: 16px;
  padding: 20px;
  border: 2px solid #e2e8f0;
  transition: border-color 0.3s ease;
}

.requirement-item:hover {
  border-color: #2C5F2D;
}

.requirement-number {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #2C5F2D 0%, #3a7a3c 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.requirement-content {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.requirement-icon-wrapper {
  width: 48px;
  height: 48px;
  background: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.requirement-icon-wrapper img {
  width: 28px;
  height: 28px;
}

.requirement-text {
  flex: 1;
}

.requirement-text h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 4px 0;
}

.requirement-text p {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.requirement-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.progress-bar {
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2C5F2D 0%, #3a7a3c 100%);
  transition: width 0.5s ease;
  border-radius: 4px;
}

.progress-text {
  font-size: 12px;
  color: #2C5F2D;
  font-weight: 600;
}

.requirements-timer {
  background: linear-gradient(135deg, #FF6B35 0%, #ff8555 100%);
  padding: 16px 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.requirements-timer img {
  width: 32px;
  height: 32px;
  filter: brightness(0) invert(1);
}

.timer-content {
  flex: 1;
}

.timer-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 4px 0;
}

.timer-value {
  font-size: 20px;
  font-weight: 700;
  color: white;
  margin: 0;
}

/* ========================================
   MODERN TIMER - Diseño minimalista sofisticado
   ======================================== */

.requirements-timer-modern {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.08) 0%, rgba(255, 133, 85, 0.08) 100%);
  border: 1.5px solid rgba(255, 107, 53, 0.2);
  padding: 20px 24px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.requirements-timer-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF6B35 0%, #ff8555 50%, #FF6B35 100%);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.requirements-timer-modern:hover {
  border-color: rgba(255, 107, 53, 0.35);
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.12) 0%, rgba(255, 133, 85, 0.12) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 107, 53, 0.15);
}

.timer-icon-wrapper {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #FF6B35 0%, #ff8555 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25);
}

.timer-icon {
  width: 26px;
  height: 26px;
  color: white;
}

.requirements-timer-modern .timer-content {
  flex: 1;
}

.requirements-timer-modern .timer-label {
  font-size: 13px;
  color: #94a3b8;
  margin: 0 0 6px 0;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.requirements-timer-modern .timer-value {
  font-size: 22px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  background: linear-gradient(135deg, #FF6B35 0%, #ff8555 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.requirements-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.btn-primary-welcome,
.btn-secondary-welcome {
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
}

.btn-primary-welcome {
  background: linear-gradient(135deg, #2C5F2D 0%, #3a7a3c 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(44, 95, 45, 0.3);
}

.btn-primary-welcome:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(44, 95, 45, 0.4);
}

.btn-primary-welcome img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

/* ========================================
   MODERN SHARE BUTTON - Diseño minimalista sofisticado
   ======================================== */

.btn-share-modern {
  background: linear-gradient(135deg, #166534 0%, #14532d 100%);
  border: none;
  color: #ffffff;
  padding: 18px 28px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  font-family: 'Segoe UI', sans-serif;
  box-shadow: 0 4px 16px rgba(22, 101, 52, 0.5);
}

.btn-share-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #ffffff33 0%, #ffffff66 50%, #ffffff33 100%);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

.btn-share-modern:hover {
  background: linear-gradient(135deg, #14532d 0%, #0f3b22 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(22, 101, 52, 0.6);
}

.btn-share-modern:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(22, 101, 52, 0.5);
}

.btn-share-modern .share-icon {
  width: 22px;
  height: 22px;
  color: #ffffff;
  transition: transform 0.3s ease;
}

.btn-share-modern:hover .share-icon {
  transform: scale(1.1) rotate(5deg);
}

.btn-share-modern span {
  color: #ffffff;
  font-weight: 700;
}

.btn-secondary-welcome {
  background: rgba(255, 255, 255, 0.95);
  color: #475569;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-secondary-welcome:hover {
  background: #ffffff;
  color: #334155;
  border-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-secondary-welcome img {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

.requirements-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 107, 53, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(255, 107, 53, 0.3);
}

.requirements-notice img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.requirements-notice p {
  font-size: 12px;
  color: #FF6B35;
  margin: 0;
  font-weight: 500;
}

/* ========================================
   STEP 5: SHARE MODAL
   ======================================== */

.share-modal-container {
  padding: 40px 24px;
}

.share-modal-loading {
  text-align: center;
  padding: 40px 0;
}

.share-modal-loading p {
  font-size: 14px;
  color: #64748b;
  margin-top: 16px;
}

.share-modal-header {
  text-align: center;
  margin-bottom: 32px;
}

.share-modal-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 16px;
}

.share-modal-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.share-modal-header p {
  font-size: 14px;
  color: #e2e8f0;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.referral-code-section,
.referral-link-section {
  margin-bottom: 24px;
}

.referral-code-section label,
.referral-link-section label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 8px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.code-display-box,
.link-display-box {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.code-value {
  font-size: 20px;
  font-weight: 700;
  color: #2C5F2D;
  letter-spacing: 2px;
  flex: 1;
}

.link-value {
  font-size: 13px;
  color: #64748b;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copy-btn-inline {
  width: 40px;
  height: 40px;
  background: #2C5F2D;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.copy-btn-inline:hover {
  background: #3a7a3c;
  transform: scale(1.05);
}

.copy-btn-inline img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

.share-buttons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.share-btn-social {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.share-btn-social:hover {
  border-color: #2C5F2D;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(44, 95, 45, 0.15);
}

.share-btn-social img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.share-btn-social span {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.share-btn-social.whatsapp:hover {
  border-color: #25D366;
}

.share-btn-social.email:hover {
  border-color: #EA4335;
}

.share-btn-social.facebook:hover {
  border-color: #1877F2;
}

.share-btn-social.instagram:hover {
  border-color: #E4405F;
}

.share-instructions {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(44, 95, 45, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(44, 95, 45, 0.2);
  margin-bottom: 24px;
}

.share-instructions img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.share-instructions p {
  font-size: 12px;
  color: #2C5F2D;
  margin: 0;
  line-height: 1.5;
}

.share-modal-actions {
  display: flex;
  gap: 12px;
}

.share-modal-actions .btn-secondary-welcome,
.share-modal-actions .btn-primary-welcome {
  flex: 1;
}

/* ========================================
   TRACKER (Dashboard de Progreso)
   ======================================== */

.tracker-container {
  background: white;
  border-radius: 20px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.tracker-loading,
.tracker-empty {
  padding: 60px 40px;
  text-align: center;
}

.tracker-loading img,
.tracker-empty img {
  width: 60px;
  height: 60px;
  margin-bottom: 16px;
}

.tracker-loading p,
.tracker-empty p {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 24px 0;
}

.tracker-header {
  padding: 40px 24px 32px;
  text-align: center;
  border-radius: 20px 20px 0 0;
  position: relative;
}

.tracker-header.locked {
  background: linear-gradient(135deg, #FFC914 0%, #FFD93D 100%);
}

.tracker-header.unlocked {
  background: linear-gradient(135deg, #2C5F2D 0%, #3a7a3c 100%);
}

.tracker-header.expired {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.tracker-prize-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
}

.tracker-header.unlocked .tracker-prize-icon,
.tracker-header.expired .tracker-prize-icon {
  filter: brightness(0) invert(1);
}

.tracker-header h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 16px 0;
}

.tracker-header.locked h2 {
  color: #2C5F2D;
}

.tracker-header.unlocked h2,
.tracker-header.expired h2 {
  color: white;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

.status-badge img {
  width: 16px;
  height: 16px;
}

.status-badge.locked {
  background: rgba(44, 95, 45, 0.2);
  color: #2C5F2D;
}

.status-badge.unlocked {
  background: rgba(255, 255, 255, 0.3);
  color: white;
}

.status-badge.expired {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.tracker-progress-section {
  padding: 32px 24px;
}

.tracker-progress-section h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 24px 0;
}

.progress-item {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
}

.progress-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.progress-item-icon {
  width: 48px;
  height: 48px;
  background: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.progress-item-icon img {
  width: 28px;
  height: 28px;
}

.progress-item-info {
  flex: 1;
}

.progress-item-info h4 {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 4px 0;
}

.progress-item-info p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.progress-item-check {
  flex-shrink: 0;
}

.check-icon {
  width: 28px;
  height: 28px;
}

.check-pending {
  font-size: 14px;
  font-weight: 700;
  color: #2C5F2D;
}

.progress-bar-tracker {
  height: 10px;
  background: #e2e8f0;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2C5F2D 0%, #3a7a3c 100%);
  transition: width 0.5s ease;
  border-radius: 5px;
}

.progress-action-btn {
  width: 100%;
  background: #2C5F2D;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.progress-action-btn:hover {
  background: #3a7a3c;
  transform: translateY(-1px);
}

.progress-action-btn img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

.tracker-timer {
  background: linear-gradient(135deg, #FF6B35 0%, #ff8555 100%);
  padding: 20px 24px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 24px 32px;
}

.tracker-timer img {
  width: 40px;
  height: 40px;
  filter: brightness(0) invert(1);
}

.tracker-unlocked-message,
.tracker-expired-message {
  padding: 32px 24px;
  text-align: center;
}

.tracker-unlocked-message img,
.tracker-expired-message img {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
}

.tracker-unlocked-message h3 {
  font-size: 20px;
  font-weight: 700;
  color: #2C5F2D;
  margin: 0 0 8px 0;
}

.tracker-expired-message h3 {
  font-size: 20px;
  font-weight: 700;
  color: #64748b;
  margin: 0 0 8px 0;
}

.tracker-unlocked-message p,
.tracker-expired-message p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.6;
}

/* ========================================
   ERROR DISPLAY
   ======================================== */

.welcome-game-error {
  padding: 16px 24px;
  margin: 0 24px 24px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.welcome-game-error img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.welcome-game-error p {
  font-size: 13px;
  color: #dc2626;
  margin: 0;
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 480px) {
  .welcome-game-modal {
    max-width: 100%;
    border-radius: 16px;
    max-height: 100vh;
    overflow-y: auto;
  }

  .welcome-step {
    padding: 48px 24px;
  }

  .welcome-logo {
    max-width: 140px;
  }

  .welcome-title {
    font-size: 24px;
  }

  .scratch-step {
    padding: 32px 16px;
  }

  .scratch-grid {
    gap: 8px;
  }

  .prize-reveal-container {
    padding: 32px 20px;
  }

  .prize-reveal-icon-wrapper {
    width: 100px;
    height: 100px;
  }

  .prize-reveal-prize-name {
    font-size: 24px;
  }

  .requirements-container {
    padding: 12px 10px;
  }

  .requirements-header {
    margin-bottom: 12px;
  }

  .requirements-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 6px;
  }

  .requirements-header h2 {
    font-size: 16px;
    margin-bottom: 4px;
  }

  .requirements-subtitle {
    font-size: 11px;
  }

  .requirements-list {
    gap: 10px;
    margin-bottom: 12px;
  }

  .requirement-item {
    padding: 12px;
    border-radius: 10px;
  }

  .requirement-number {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  .requirement-icon-wrapper img {
    width: 28px;
    height: 28px;
  }

  .requirement-text h3 {
    font-size: 13px;
    margin-bottom: 3px;
  }

  .requirement-text p {
    font-size: 10px;
    margin-bottom: 6px;
  }

  .requirement-progress {
    margin-top: 6px;
  }

  .progress-bar {
    height: 5px;
  }

  .progress-text {
    font-size: 9px;
  }

  .requirements-timer-modern {
    padding: 10px 12px;
    gap: 10px;
    margin-bottom: 12px;
    border-radius: 10px;
  }

  .timer-icon-wrapper {
    width: 32px;
    height: 32px;
  }

  .timer-icon-wrapper .timer-icon {
    font-size: 16px;
  }

  .requirements-timer-modern .timer-label {
    font-size: 10px;
    margin-bottom: 2px;
  }

  .requirements-timer-modern .timer-value {
    font-size: 16px;
  }

  .requirements-actions {
    gap: 6px;
    margin-bottom: 10px;
  }

  .btn-share-modern,
  .btn-secondary-welcome {
    padding: 9px 14px;
    font-size: 12px;
    border-radius: 8px;
  }

  .btn-share-modern .share-icon {
    font-size: 14px;
  }

  .requirements-notice {
    padding: 8px 10px;
    border-radius: 8px;
  }

  .requirements-notice img {
    width: 14px;
    height: 14px;
  }

  .requirements-notice p {
    font-size: 9px;
    line-height: 1.3;
  }

  .share-modal-container {
    padding: 16px 12px;
    max-height: 100vh;
    overflow-y: auto;
  }

  .share-modal-header {
    margin-bottom: 16px;
  }

  .share-modal-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
  }

  .share-modal-header h2 {
    font-size: 18px;
    margin-bottom: 4px;
  }

  .share-modal-header p {
    font-size: 12px;
  }

  .referral-code-section,
  .referral-link-section {
    margin-bottom: 12px;
  }

  .referral-code-section label,
  .referral-link-section label {
    font-size: 11px;
    margin-bottom: 4px;
  }

  .code-display-box,
  .link-display-box {
    padding: 10px 12px;
    border-radius: 8px;
  }

  .code-value {
    font-size: 16px;
  }

  .link-value {
    font-size: 10px;
  }

  .copy-btn-inline img {
    width: 16px;
    height: 16px;
  }

  .share-buttons-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }

  .share-btn-social {
    padding: 10px 8px;
    border-radius: 8px;
  }

  .share-btn-social img {
    width: 24px;
    height: 24px;
  }

  .share-btn-social span {
    font-size: 11px;
  }

  .share-instructions {
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 8px;
  }

  .share-instructions img {
    width: 16px;
    height: 16px;
  }

  .share-instructions p {
    font-size: 10px;
    line-height: 1.4;
  }

  .share-modal-actions {
    gap: 8px;
  }

  .btn-secondary-welcome,
  .btn-primary-welcome {
    padding: 10px 16px;
    font-size: 13px;
  }

  .btn-secondary-welcome img {
    width: 14px;
    height: 14px;
  }

  .tracker-header {
    padding: 32px 20px 24px;
  }

  .tracker-progress-section {
    padding: 24px 16px;
  }
}

/* ========================================
   SCRATCH ANIMATION OVERLAY
   ======================================== */

.scratch-animation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

.scratch-animation-wrapper {
  width: 90%;
  max-width: 400px;
  text-align: center;
}

.scratch-canvas {
  width: 100%;
  height: 400px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(255, 107, 53, 0.4);
  cursor: crosshair;
  touch-action: none;
}

.scratch-progress {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  margin-top: 24px;
  overflow: hidden;
}

.scratch-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #FFC914 0%, #FF6B35 100%);
  transition: width 0.1s linear;
  border-radius: 4px;
}

.scratch-text {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-top: 16px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.scratch-continue-btn {
  background: linear-gradient(135deg, #2C5F2D 0%, #3a7a3c 100%);
  color: white;
  border: none;
  padding: 16px 48px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 24px;
  box-shadow: 0 4px 16px rgba(44, 95, 45, 0.4);
  transition: all 0.3s ease;
}

.scratch-continue-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(44, 95, 45, 0.5);
}

/* Start Scratching Button */
.btn-start-scratching {
  background: linear-gradient(135deg, #2C5F2D 0%, #3a7a3c 100%);
  color: white;
  border: none;
  padding: 18px 48px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(44, 95, 45, 0.3);
  transition: all 0.3s ease;
  margin: 24px auto;
}

.btn-start-scratching:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(44, 95, 45, 0.4);
}

/* ========================================
   CARD REVEAL GRID
   ======================================== */

.card-reveal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

.card-reveal-container {
  width: 100%;
  max-width: 500px;
  text-align: center;
}

.card-reveal-title {
  color: white;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 24px 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.btn-start-reveal {
  background: linear-gradient(135deg, #2C5F2D 0%, #3a7a3c 100%);
  color: white;
  border: none;
  padding: 18px 48px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(44, 95, 45, 0.3);
  transition: all 0.3s ease;
  margin: 24px auto;
}

.btn-start-reveal:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(44, 95, 45, 0.4);
}

.btn-continue-reveal {
  background: linear-gradient(135deg, #2C5F2D 0%, #3a7a3c 100%);
  color: white;
  border: none;
  padding: 16px 48px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(44, 95, 45, 0.3);
  transition: all 0.3s ease;
  margin-top: 24px;
}

.btn-continue-reveal:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(44, 95, 45, 0.4);
}

.card-reveal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.reveal-card {
  aspect-ratio: 1;
  position: relative;
}

.reveal-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.reveal-card-back,
.reveal-card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.reveal-card-back {
  background: linear-gradient(135deg, #FF6B35 0%, #FFC914 100%);
  z-index: 2;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out, filter 0.8s ease-out;
}

.reveal-card.revealed .reveal-card-back {
  opacity: 0;
  filter: blur(4px);
  transform: scale(1.1);
  pointer-events: none;
}

.reveal-card-back img {
  width: 60%;
  height: auto;
  opacity: 0.9;
}

.reveal-card-front {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  position: absolute;
  z-index: 1;
}

.reveal-card.winner .reveal-card-front {
  background: linear-gradient(135deg, #FFC914 0%, #FFD93D 100%);
  animation: winnerPulse 1.5s ease-in-out infinite;
}

@keyframes winnerPulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(255, 201, 20, 0.5);
  }
  50% {
    box-shadow: 0 4px 30px rgba(255, 201, 20, 0.8);
  }
}

.prize-icon {
  width: 60%;
  height: auto;
  margin-bottom: 8px;
}

.prize-label {
  font-size: 10px;
  font-weight: 700;
  color: #2C5F2D;
  text-align: center;
  margin: 0;
  line-height: 1.2;
}

.reveal-card.winner .prize-label {
  color: #2C5F2D;
}

.winner-badge {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: #2C5F2D;
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 12px;
  white-space: nowrap;
  z-index: 3;
  animation: badgeFadeIn 0.5s ease-out 0.3s both;
}

@keyframes badgeFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ========================================
   RESPONSIVE - LARGER ICONS FOR MOBILE
   ======================================== */

/* Mobile pequeño: 320px-375px */
@media (min-width: 320px) and (max-width: 375px) {
  .prize-icon {
    width: 75%;
  }
  
  .prize-reveal-icon {
    width: 80%;
  }
  
  .prize-reveal-icon-wrapper {
    width: 100px;
    height: 100px;
  }
  
  .prize-label {
    font-size: 9px;
  }
}

/* Mobile medio: 376px-414px */
@media (min-width: 376px) and (max-width: 414px) {
  .prize-icon {
    width: 80%;
  }
  
  .prize-reveal-icon {
    width: 85%;
  }
  
  .prize-reveal-icon-wrapper {
    width: 110px;
    height: 110px;
  }
  
  .prize-label {
    font-size: 10px;
  }
}

/* Mobile grande: 415px-480px */
@media (min-width: 415px) and (max-width: 480px) {
  .prize-icon {
    width: 85%;
  }
  
  .prize-reveal-icon {
    width: 90%;
  }
  
  .prize-reveal-icon-wrapper {
    width: 120px;
    height: 120px;
  }
  
  .prize-label {
    font-size: 11px;
  }
}

/* Tablet: 481px-768px */
@media (min-width: 481px) and (max-width: 768px) {
  .prize-icon {
    width: 70%;
  }
  
  .prize-reveal-icon {
    width: 75%;
  }
  
  .prize-reveal-icon-wrapper {
    width: 140px;
    height: 140px;
  }
  
  .prize-label {
    font-size: 12px;
  }
}

/* ========================================
   RESPONSIVE ANIMATIONS - MOBILE
   ======================================== */

@media (max-width: 480px) {
  .scratch-canvas {
    height: 320px;
  }
  
  .card-reveal-title {
    font-size: 20px;
  }
  
  .card-reveal-grid {
    gap: 8px;
  }
  
  .winner-badge {
    font-size: 8px;
    padding: 3px 6px;
  }
  
  .btn-start-scratching,
  .btn-start-reveal {
    padding: 16px 40px;
    font-size: 16px;
  }
  
  .scratch-continue-btn,
  .btn-continue-reveal {
    padding: 14px 36px;
    font-size: 15px;
  }
}
/* Variables CSS - DeLaFeria Brand Identity - Imitación exacta MercadoLibre */
:root {
  /* Colores principales DeLaFeria */
  --delaferia-yellow: #FFE600;
  --delaferia-blue: #3483FA;
  --delaferia-green: #00A650;
  --delaferia-orange: #FF8C00;
  --delaferia-light-blue: #E7F6FF;
  
  /* Sistema de colores MercadoLibre adaptado */
  --primary-yellow: #FFE600;
  --primary-blue: #3483FA;
  --secondary-blue: #2968C8;
  --accent-blue: #4B9AE7;
  --success-green: #00A650;
  --warning-orange: #FF8C00;
  --error-red: #F23D4F;
  
  /* Grises del sistema MercadoLibre */
  --gray-100: #FFFFFF;
  --gray-200: #F5F5F5;
  --gray-300: #EBEBEB;
  --gray-400: #999999;
  --gray-500: #666666;
  --gray-600: #333333;
  
  /* Fondos */
  --background-primary: #FFFFFF;
  --background-secondary: #F5F5F5;
  --background-tertiary: #EBEBEB;
  --background-brand: #FFE600;
  
  /* Bordes y sombras MercadoLibre */
  --border-light: #EBEBEB;
  --border-medium: #CCCCCC;
  --border-dark: #999999;
  --shadow-light: 0 1px 2px rgba(0,0,0,0.15);
  --shadow-medium: 0 2px 8px rgba(0,0,0,0.15);
  --shadow-heavy: 0 8px 32px rgba(0,0,0,0.15);
  
  /* Transiciones y radios */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.35s ease;
  --radius-small: 4px;
  --radius-medium: 6px;
  --radius-large: 8px;
  
  /* Compatibilidad con código existente */
  --primary-green: #00A650;
  --secondary-green: #00B366;
  --primary-orange: #FF8C00;
  --accent-orange: #FF9F1A;
  --ml-yellow: #FFE600;
  --ml-blue: #3483FA;
  --background-cream: #FFFFFF;
  --background-light: #F5F5F5;
  --light-gray: #F5F5F5;
  --dark-gray: #333333;
  --border-color: #EBEBEB;
  --text-gray: #666666;
  --text-dark: #333333;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.15);
  --transition: 0.25s ease;
  --border-radius: 6px;
  --border-radius-small: 4px;
  --verde-principal: #00A650;
  --naranja-principal: #FF8C00;
  --beige-claro: #FFFFFF;
  --gray: #666666;
}

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

/* ==============================================
   FOCUS INDICATORS - WCAG 2.2 AA COMPLIANT
   Respetar formas de elementos (circular, rectangular)
   ============================================== */

/* Default focus para elementos rectangulares */
*:focus-visible {
  outline: 3px solid #3483FA;
  outline-offset: 2px;
}

/* Botones y links rectangulares */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #3483FA;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(52, 131, 250, 0.2);
}

/* EXCEPCIÓN: Elementos circulares (NO aplicar border-radius) */
.cart-button:focus-visible,
.cart-btn:focus-visible,
.notification-button:focus-visible,
.favorites-button:focus-visible,
.favorites-btn:focus-visible,
.profile-button:focus-visible,
.profile-btn-with-frame:focus-visible,
.header-action-btn:focus-visible,
button[class*="circular"]:focus-visible,
button[class*="round"]:focus-visible,
.mobile-bottom-navbar button:focus-visible,
.mobile-nav-button:focus-visible {
  outline: 3px solid #3483FA;
  outline-offset: 3px; /* Mayor offset para botones circulares */
  box-shadow: 0 0 0 5px rgba(52, 131, 250, 0.25);
  border-radius: 0; /* NO forzar border-radius en outline */
}

/* Remove default outline para navegación con mouse */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Links con background highlight (solo si es texto) */
a:focus-visible:not([class*="button"]):not([class*="icon"]):not([class*="btn"]) {
  background-color: rgba(52, 131, 250, 0.1);
  border-radius: 4px;
  padding: 2px 4px;
}

/* Navigation items especiales */
.unified-header nav button:focus-visible,
.unified-header nav a:focus-visible,
.slider-nav-item:focus-visible {
  outline: 3px solid #3483FA;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Search bar focus */
.search-container input[type="search"]:focus-visible,
.sophisticated-search-input:focus-visible {
  outline: 3px solid #3483FA;
  outline-offset: 0;
  box-shadow: 0 0 0 4px rgba(52, 131, 250, 0.15);
}

/* Focus para botones de producto */
.add-to-cart-btn:focus-visible,
.favorite-btn:focus-visible {
  outline: 3px solid #3483FA;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(52, 131, 250, 0.2);
}

/* ============================================== */

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #FAF9F6;
  color: var(--dark-gray);
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
  z-index: -1;
}

@keyframes gradientShift {
  0%, 100% { 
    background-position: 0% 50%; 
    filter: brightness(1.02) saturate(1.1);
  }
  25% { 
    background-position: 100% 20%; 
    filter: brightness(1.05) saturate(1.15);
  }
  50% { 
    background-position: 50% 100%; 
    filter: brightness(1.03) saturate(1.12);
  }
  75% { 
    background-position: 20% 30%; 
    filter: brightness(1.07) saturate(1.18);
  }
}

@keyframes backgroundFlow {
  0%, 100% { 
    background-position: 0% 50%;
    opacity: 0.3;
  }
  33% { 
    background-position: 100% 0%;
    opacity: 0.5;
  }
  66% { 
    background-position: 0% 100%;
    opacity: 0.4;
  }
}

.App {
  min-height: 100vh;
}

/* Auth styles */
.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-orange) 50%, var(--secondary-green) 100%);
  background-size: 400% 400%;
  animation: gradientShift 8s ease-in-out infinite;
  padding: 2rem;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.auth-card {
  background: rgba(245, 245, 220, 0.95);
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-medium), var(--shadow-glow);
  border: 2px solid rgba(255, 140, 0, 0.2);
  width: 100%;
  max-width: 400px;
  position: relative;
  overflow: hidden;
}

.auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 140, 0, 0.1), transparent);
  transition: left 0.5s;
}

.auth-card:hover::before {
  left: 100%;
}

.auth-header {
  text-align: center;
  margin-bottom: 2rem;
}

.auth-logo {
  width: 200px;
  height: auto;
  margin-bottom: 1rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.25rem;
}

.form-group label {
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--dark-gray);
  line-height: 1.2;
  display: block;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.75rem 0.8rem;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 1rem;
  transition: var(--transition);
  line-height: normal;
  vertical-align: middle;
  height: auto;
  min-height: 46px;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(34,139,34,0.1);
}

.auth-btn {
  padding: 1rem;
  background: var(--primary-green);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-height: 48px;
}

.auth-btn:hover:not(:disabled) {
  background: var(--secondary-green);
  transform: translateY(-2px);
}

.auth-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.error-message {
  background: #fee;
  color: #c33;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  text-align: center;
}

.success-message {
  background: #efe;
  color: #3a3;
  padding: 1rem;
  border-radius: var(--border-radius-small);
  border: 1px solid #cfc;
  margin-bottom: 1rem;
}

.auth-footer {
  text-align: center;
  margin-top: 1.5rem;
}

.auth-footer a {
  color: var(--primary-green);
  text-decoration: none;
  font-weight: 600;
}

.auth-footer a:hover {
  text-decoration: underline;
}

/* Estilos para login social y funcionalidades nuevas */
.auth-divider {
  text-align: center;
  margin: 1.5rem 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  width: 40px;
  height: 2px;
  background: #8B7355;
  border-radius: 1px;
}

.auth-divider span {
  color: #8B7355;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

.social-login-buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.social-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 0.8rem;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  background: white;
  color: var(--dark-gray);
  cursor: pointer;
  transition: var(--transition);
  font-weight: 600;
  line-height: 1;
  min-height: 48px;
}

.social-btn-text {
  line-height: 1;
  display: flex;
  align-items: center;
}

.social-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.social-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.google-btn:hover:not(:disabled) {
  border-color: #db4437;
  background: #fef7f7;
}

.facebook-btn:hover:not(:disabled) {
  border-color: #4267b2;
  background: #f7f9ff;
}

.social-icon {
  font-size: 1.2rem;
}

.auth-links {
  text-align: center;
  margin-top: 1rem;
}

.link-btn {
  background: none;
  border: none;
  color: var(--primary-green);
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.9rem;
  padding: 0.5rem;
}

.link-btn:hover {
  color: var(--secondary-green);
}

/* Loading indicator styles */
.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: rgba(34, 139, 34, 0.1);
  border-radius: 8px;
}

.loading-icon {
  width: 40px;
  height: 40px;
}

.rotating {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Estilos para verificación de email */
.email-verification-card {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.verification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.verification-header h3 {
  margin: 0;
  color: var(--dark-gray);
}

.verification-status {
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.verification-status.verified {
  background: #e8f5e8;
  color: #2d5a2d;
  border: 1px solid #4caf50;
}

.verification-status.unverified {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
}

.verification-content ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.verification-content li {
  padding: 0.3rem 0;
  color: var(--dark-gray);
}

/* Loading */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.loading-spinner {
  font-size: 1.2rem;
  color: var(--primary-green);
}
/* Header Superior Simplificado - Solo logo y perfil */
.dashboard-header {
  background: transparent;
  padding: 0;
  box-shadow: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  border-bottom: none;
  height: 185px; /* Altura base: 80px + 60px + 45px */
  backdrop-filter: none;
  display: flex;
  flex-direction: column;
  order: 1;
}

@keyframes gentleFlowHeader {
  0%, 100% { 
    background-position: 0% 50%; 
    filter: brightness(1.05) saturate(1.1);
  }
  25% { 
    background-position: 100% 20%; 
    filter: brightness(1.1) saturate(1.15);
  }
  50% { 
    background-position: 50% 100%; 
    filter: brightness(1.08) saturate(1.12);
  }
  75% { 
    background-position: 20% 30%; 
    filter: brightness(1.12) saturate(1.18);
  }
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 5000;
  height: 80px;
  flex-shrink: 0;
  width: 100%;
  background: linear-gradient(135deg, 
    #5486c0  0%,    /* Azul frío inicial */
    #8471a2 25%,   /* Lila más suave */
    #726f76 50%,   /* Lila muy suave */
    #bbb9b9 75%,   /* Gris un poco más oscuro */
    #8a8a8a 100%   /* Gris final más oscuro sin blanco */
  );
  background-size: 1000% 600%;
  animation: gentleFlowHeader 8s ease-in-out infinite;
  box-shadow: none;
  border-bottom: none;
  backdrop-filter: none !important;
  border-radius: 0;
}

.header-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, 
    transparent 0%,
    transparent 8%,
    rgba(245, 245, 245, 0.02) 12%,
    transparent 18%,
    rgba(245, 245, 245, 0.08) 28%,
    rgba(245, 245, 245, 0.03) 35%,
    rgba(245, 245, 245, 0.18) 45%,
    rgba(245, 245, 245, 0.12) 52%,
    rgba(245, 245, 245, 0.32) 58%,
    rgba(245, 245, 245, 0.25) 64%,
    rgba(245, 245, 245, 0.48) 69%,
    rgba(245, 245, 245, 0.38) 73%,
    rgba(245, 245, 245, 0.62) 77%,
    rgba(245, 245, 245, 0.55) 81%,
    rgba(245, 245, 245, 0.78) 85%,
    rgba(245, 245, 245, 0.72) 88%,
    rgba(245, 245, 245, 0.88) 91%,
    rgba(245, 245, 245, 0.82) 94%,
    rgba(245, 245, 245, 0.96) 97%,
    rgba(245, 245, 245, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.header-comprador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  position: relative;
}

.header-logo-section {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  position: absolute;
  left: 0;
  top: 51%;
  transform: translateY(-50%);
  z-index: 10;
}

.logo-comprador {
  width: 220px;
  height: auto;
  cursor: pointer;
}

.header-profile-section {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  position: absolute;
  right: 0;
  top: 48%;
  transform: translateY(-50%);
  z-index: 10;
}

.logo-large {
  width: 190px;
  height: 190px;
  z-index: 1003;
  overflow: auto;
}

.logo-comprador {
  width: 200px;
  height: 150px;
  cursor: pointer;
}

.nav-icon-large {
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 0.5rem;
  border-radius: var(--border-radius);
  transition: var(--transition);
  margin: 0 0.3rem;
  backdrop-filter: none !important;
}

.nav-icon-large:hover {
  background: transparent;
  transform: none;
}

.icon-img-large {
  width: 48px;
  height: 48px;
  object-fit: contain;
  transition: all 0.3s ease;
  filter: none;
}

.nav-icon-large:hover .icon-img-large {
  transform: none;
}


/* ELIMINAR DEFINICIÓN CONFLICTIVA - Ya está en navigation.css */

.mobile-bottom-navbar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, 
    rgba(245, 245, 245, 1) 0%,
    rgba(245, 245, 245, 0.96) 3%,
    rgba(245, 245, 245, 0.82) 6%,
    rgba(245, 245, 245, 0.88) 9%,
    rgba(245, 245, 245, 0.72) 12%,
    rgba(245, 245, 245, 0.78) 15%,
    rgba(245, 245, 245, 0.55) 19%,
    rgba(245, 245, 245, 0.62) 23%,
    rgba(245, 245, 245, 0.38) 27%,
    rgba(245, 245, 245, 0.48) 31%,
    rgba(245, 245, 245, 0.25) 36%,
    rgba(245, 245, 245, 0.32) 42%,
    rgba(245, 245, 245, 0.12) 48%,
    rgba(245, 245, 245, 0.18) 55%,
    rgba(245, 245, 245, 0.03) 65%,
    rgba(245, 245, 245, 0.08) 72%,
    transparent 82%,
    rgba(245, 245, 245, 0.02) 88%,
    transparent 92%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.mobile-nav-container {
  max-width: 500px;
  width: 100%;
  padding: 0 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  z-index: 2;
}

.mobile-nav-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: linear-gradient(-45deg, 
    #5486c0 0%,    /* Azul frío inicial */
    #8471a2 25%,   /* Lila más suave */
    #726f76 50%,   /* Lila muy suave */
    #bbb9b9 75%,   /* Gris un poco más oscuro */
    #7d9ccf 100%   /* Azul final */
  );
  background-size: 400% 400%;
  animation: gradientShift 15s ease-in-out infinite;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  min-width: 60px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: none;
  border-bottom: none;
}

.mobile-nav-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, 
    transparent 0%,
    transparent 8%,
    rgba(245, 245, 245, 0.02) 12%,
    transparent 18%,
    rgba(245, 245, 245, 0.08) 28%,
    rgba(245, 245, 245, 0.03) 35%,
    rgba(245, 245, 245, 0.18) 45%,
    rgba(245, 245, 245, 0.12) 52%,
    rgba(245, 245, 245, 0.32) 58%,
    rgba(245, 245, 245, 0.25) 64%,
    rgba(245, 245, 245, 0.48) 69%,
    rgba(245, 245, 245, 0.38) 73%,
    rgba(245, 245, 245, 0.62) 77%,
    rgba(245, 245, 245, 0.55) 81%,
    rgba(245, 245, 245, 0.78) 85%,
    rgba(245, 245, 245, 0.72) 88%,
    rgba(245, 245, 245, 0.88) 91%,
    rgba(245, 245, 245, 0.82) 94%,
    rgba(245, 245, 245, 0.96) 97%,
    rgba(245, 245, 245, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
  transition: all 0.3s ease;
}

.mobile-nav-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, 
    transparent 0%,
    transparent 8%,
    rgba(245, 245, 245, 0.02) 12%,
    transparent 18%,
    rgba(245, 245, 245, 0.08) 28%,
    rgba(245, 245, 245, 0.03) 35%,
    rgba(245, 245, 245, 0.18) 45%,
    rgba(245, 245, 245, 0.12) 52%,
    rgba(245, 245, 245, 0.32) 58%,
    rgba(245, 245, 245, 0.25) 64%,
    rgba(245, 245, 245, 0.48) 69%,
    rgba(245, 245, 245, 0.38) 73%,
    rgba(245, 245, 245, 0.62) 77%,
    rgba(245, 245, 245, 0.55) 81%,
    rgba(245, 245, 245, 0.78) 85%,
    rgba(245, 245, 245, 0.72) 88%,
    rgba(245, 245, 245, 0.88) 91%,
    rgba(245, 245, 245, 0.82) 94%,
    rgba(245, 245, 245, 0.96) 97%,
    rgba(245, 245, 245, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
  transition: all 0.3s ease;
}

.mobile-nav-button:hover {
  background: linear-gradient(-45deg, 
    #5486c0 0%,
    #8471a2 25%,
    #726f76 50%,
    #bbb9b9 75%,
    #7d9ccf 100%
  );
  background-size: 600% 600%;
  filter: brightness(1.2) saturate(1.15);
  transform: translateY(-2px);
}

.mobile-nav-button.active {
  background: linear-gradient(-45deg, 
    #5486c0 0%,
    #8471a2 25%,
    #726f76 50%,
    #bbb9b9 75%,
    #7d9ccf 100%
  );
  background-size: 600% 600%;
  filter: brightness(1.3) saturate(1.2);
  box-shadow: 0 4px 15px rgba(84, 134, 192, 0.4);
}

.mobile-nav-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: none;
  transition: all 0.3s ease;
}

.mobile-nav-button:hover .mobile-nav-icon {
  transform: scale(1.1);
  filter: none;
}

.mobile-nav-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--dark-gray);
  transition: color 0.3s ease;
}

.mobile-nav-button:hover .mobile-nav-label {
  color: #4a90e2;
}

.mobile-nav-button.active .mobile-nav-label {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.mobile-nav-badge {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  background: #ff4757;
  color: #e8cfcf;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: bold;
  animation: pulse 2s infinite;
}

/* Slider de navegación integrado al header */
.header-navigation-slider {
  background: linear-gradient(135deg, 
    rgba(255,255,255,0.95) 0%, 
    rgba(248,249,250,0.95) 100%);
  backdrop-filter: blur(15px);
  border: none;
  border-top: 1px solid rgba(34, 139, 34, 0.1);
  border-bottom: 1px solid rgba(74, 144, 226, 0.1);
  padding: 0.6rem 0;
  margin: 0;
  z-index: 999;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.6);
  flex-shrink: 0;
  height: 60px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.header-navigation-slider::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(34, 139, 34, 0.05), 
    rgba(255, 140, 0, 0.05),
    transparent);
  transition: left 8s ease;
  animation: shimmer 8s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: -100%; }
}

.slider-nav-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

.slider-nav-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0.5rem;
}

.slider-nav-item {
  background: linear-gradient(145deg, 
    rgba(255,255,255,0.8), 
    rgba(248,249,250,0.8));
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-weight: 600;
  color: var(--dark-gray);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(5px);
  box-shadow: 
    0 2px 6px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.7);
}

.slider-nav-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(74, 144, 226, 0.2), 
    transparent);
  transition: left 0.5s ease;
  z-index: 0;
}

.slider-nav-item:hover::before {
  left: 100%;
}

.slider-nav-item:hover {
  transform: translateY(-2px) scale(1.05);
  background: linear-gradient(145deg, 
    rgba(74, 144, 226, 0.1), 
    rgba(255, 255, 255, 0.9));
  border-color: rgba(74, 144, 226, 0.3);
  box-shadow: 
    0 6px 15px rgba(74, 144, 226, 0.2),
    inset 0 1px 0 rgba(255,255,255,0.9);
  color: #4a90e2;
}

.slider-nav-item.active {
  background: linear-gradient(145deg, 
    rgba(34, 139, 34, 0.15), 
    rgba(74, 144, 226, 0.1));
  border-color: var(--primary-green);
  color: var(--primary-green);
  box-shadow: 
    0 4px 12px rgba(34, 139, 34, 0.3),
    inset 0 2px 4px rgba(34, 139, 34, 0.1);
  transform: translateY(-1px);
}

.slider-nav-item span {
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  letter-spacing: 0.3px;
}

.slider-nav-item:hover span {
  text-shadow: 0 1px 2px rgba(74, 144, 226, 0.3);
}

.slider-nav-item.active span {
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(34, 139, 34, 0.3);
align-items: center;
}

/* Barra de búsqueda sofisticada integrada al header */
.header-search-bar {
  background: transparent;
  backdrop-filter: none;
  border: none;
  border-top: none;
  border-bottom: none;
  padding: 0.3rem 0;
  margin: 0;
  z-index: 998;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: none;
  flex-shrink: 0;
  height: 45px;
  display: flex;
  align-items: center;
}

.header-search-bar.hide-on-scroll,
.header-navigation-slider.hide-on-scroll {
  transform: translateY(-100%);
  opacity: 0;
}

.header-search-bar.visible,
.header-navigation-slider.visible {
  transform: translateY(0);
  opacity: 1;
}

.header-search-bar.move-up {
  position: fixed;
  top: 84px;
  left: 0;
  right: 0;
  z-index: 9999;
  transform: translateY(0);
  opacity: 1;
  box-shadow: none;
}

.search-bar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
}

.sophisticated-search-wrapper {
  display: flex;
  gap: 0;
  align-items: center;
  width: 100%;
  justify-content: center;
  padding-left: 2%;
  padding-right: 2%;
  max-width: 830px;
  margin: 0 auto;
}

.search-input-section {
  flex: 1;
  display: flex;
  align-items: center;
  background: #F5F5DC;
  border: 2px solid rgba(84, 134, 192, 0.6);
  border-radius: 18px;
  padding: 0.1rem;
  box-shadow: 
    0 3px 12px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(255, 255, 255, 0.6) inset;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: none !important;
  height: 36px;
  max-width: 800px;
}

/* 📱 MÓVIL: Barra de búsqueda compacta 320px - TODOS los elementos dentro */
@media (max-width: 768px) {
  .sophisticated-search-wrapper {
    max-width: 320px !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  
  .search-input-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 !important;
    gap: 0 !important;
    padding: 0.1rem !important;
    height: 36px !important;
  }
  
  /* Filtro - proporcionalmente más grande */
  .filter-search-container {
    padding: 0 6px !important;
    border-right: 1px solid rgba(84, 134, 192, 0.25) !important;
  }
  
  .filter-search-btn {
    width: 24px !important;
    height: 24px !important;
    padding: 3px !important;
  }
  
  .filter-search-btn img {
    width: 16px !important;
    height: 16px !important;
  }
  
  /* Input con más espacio */
  .sophisticated-search-input {
    flex: 1 !important;
    min-width: 80px !important;
    font-size: 12px !important;
    padding: 3px 6px !important;
  }
  
  /* Botones de acción (voz, cámara) - proporcionalmente más grandes */
  .search-actions {
    display: flex !important;
    gap: 3px !important;
    padding: 0 6px !important;
    border-left: 1px solid rgba(84, 134, 192, 0.25) !important;
  }
  
  .voice-search-btn,
  .camera-search-btn {
    width: 22px !important;
    height: 22px !important;
    padding: 3px !important;
  }
  
  .voice-search-btn img,
  .camera-search-btn img {
    width: 16px !important;
    height: 16px !important;
  }
  
  /* Botón de búsqueda - proporcionalmente más grande */
  .search-submit-container {
    padding: 0 6px !important;
    border-left: 1px solid rgba(84, 134, 192, 0.25) !important;
  }
  
  .search-submit-btn {
    width: 26px !important;
    height: 26px !important;
    padding: 3px !important;
  }
  
  .search-submit-btn img {
    width: 18px !important;
    height: 18px !important;
  }
}

.search-input-section:focus-within {
  border-color: rgba(52, 131, 250, 0.6);
  box-shadow: 
    0 4px 20px rgba(52, 131, 250, 0.15),
    0 0 0 3px rgba(52, 131, 250, 0.1);
  transform: translateY(-1px);
}

.filter-search-container {
  padding: 0.2rem 0.4rem;
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(84, 134, 192, 0.3);
}

.filter-search-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.filter-search-btn:hover {
  background: rgba(84, 134, 192, 0.15);
  transform: scale(1.1);
}

.filter-search-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: contrast(1.2) saturate(1.1);
}

.sophisticated-search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.2rem 0;
  font-size: 0.9rem;
  background: transparent;
  color: var(--dark-gray);
  font-weight: 400;
}

.sophisticated-search-input::placeholder {
  color: rgba(0, 0, 0, 0.5);
  font-weight: 400;
}

.search-actions {
  display: flex;
  gap: 0.3rem;
  padding: 0 0.4rem;
}

.search-submit-container {
  padding: 0.2rem 0.4rem;
  display: flex;
  align-items: center;
  border-left: 1px solid rgba(84, 134, 192, 0.3);
}

.voice-search-btn,
.camera-search-btn,
.filter-search-btn {
  background: transparent;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.3s ease;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-search-btn {
  width: 22px;
  height: 22px;
  padding: 0.1rem;
  background: transparent !important;
}

.voice-search-btn img,
.camera-search-btn img,
.filter-search-btn img {
  filter: contrast(1.2) saturate(1.1);
  width: 18px;
  height: 18px;
}

.voice-search-btn:hover,
.camera-search-btn:hover,
.filter-search-btn:hover {
  transform: scale(1.1);
  background: transparent !important;
}





.search-submit-btn {
  background: rgba(84, 134, 192, 0.1);
  border: none;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 6px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(84, 134, 192, 0.2);
}

.search-submit-btn:hover {
  background: rgba(84, 134, 192, 0.25);
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(84, 134, 192, 0.3);
}

.quick-suggestions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}

.suggestions-label {
  font-weight: 600;
  color: rgba(52, 131, 250, 0.8);
  font-size: 0.85rem;
}

.suggestion-tag {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(52, 131, 250, 0.2);
  color: rgba(52, 131, 250, 0.8);
  padding: 0.25rem 0.7rem;
  border-radius: 18px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: none !important;
}

.suggestion-tag:hover {
  background: rgba(52, 131, 250, 0.9);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(52, 131, 250, 0.25);
}

/* Navbar secundaria que se esconde al hacer scroll */
.header-navigation-slider.hide-on-scroll {
  transform: translateY(100%);
  opacity: 0;
}

.header-navigation-slider.visible {
  transform: translateY(0);
  opacity: 1;
}

.slider-nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.slider-nav-container::-webkit-scrollbar {
  display: none;
}

.slider-nav-menu {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  min-width: max-content;
  justify-content: center;
}

.slider-nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, 
    #5486c0 0%,    /* Azul frío inicial */
    #8471a2 25%,   /* Lila más suave */
    #726f76 50%,   /* Lila muy suave */
    #bbb9b9 75%,   /* Gris un poco más oscuro */
    #7d9ccf 100%   /* Azul final */
  );
  background-size: 400% 400%;
  animation: gentleFlowHeader 8s ease-in-out infinite;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  white-space: nowrap;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9rem;
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 
    0 4px 15px rgba(84, 134, 192, 0.2),
    0 2px 8px rgba(255, 255, 255, 0.1) inset;
}

.slider-nav-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.3), 
    transparent);
  transition: left 0.6s ease;
}

.slider-nav-item:hover {
  background: linear-gradient(135deg, 
    #5486c0 0%,
    #8471a2 25%,
    #726f76 50%,
    #bbb9b9 75%,
    #7d9ccf 100%
  );
  background-size: 600% 600%;
  filter: brightness(1.2) saturate(1.15);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 8px 25px rgba(84, 134, 192, 0.4),
    0 4px 12px rgba(255, 255, 255, 0.2) inset;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.slider-nav-item:hover::before {
  left: 100%;
}

.slider-nav-item.active {
  background: linear-gradient(135deg, 
    #5486c0 0%,
    #8471a2 25%,
    #726f76 50%,
    #bbb9b9 75%,
    #7d9ccf 100%
  );
  background-size: 600% 600%;
  filter: brightness(1.3) saturate(1.2);
  color: white;
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 
    0 6px 20px rgba(84, 134, 192, 0.5),
    0 2px 8px rgba(255, 255, 255, 0.3) inset;
  font-weight: 700;
  transform: translateY(-2px);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.slider-nav-icon {
  display: none; /* Ocultar iconos genéricos */
}

.slider-nav-item.active .slider-nav-icon {
  display: none; /* Ocultar iconos genéricos */
}

/* Dropdown menu para items del slider */
.slider-dropdown {
  position: relative;
}

.slider-dropdown-content {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(74, 144, 226, 0.2);
  border: 1px solid rgba(74, 144, 226, 0.3);
  min-width: 200px;
  z-index: 1001;
  overflow: hidden;
  animation: slideDownFade 0.3s ease;
}

.slider-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid #4a7d75;
  font-size: 0.9rem;
  color: var(--dark-gray);
}

.slider-dropdown-item:last-child {
  border-bottom: none;
}

.slider-dropdown-item:hover {
  background: rgba(74, 144, 226, 0.1);
  color: #4a90e2;
}

.dropdown-arrow {
  margin-left: 0.5rem;
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}

.slider-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

/* Multiple navbar positioning - Stack from bottom */
.navbar-top:nth-of-type(2) {
  bottom: 60px; /* Second navbar positioned above first */
  z-index: 998;
}

.navbar-top:nth-of-type(3) {
  bottom: 120px; /* Third navbar positioned above second */
  z-index: 997;
}







.quick-icon {
  font-size: 1.1rem;
  filter: none;
}

.quick-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.navbar-actions {
  display: flex;
  gap: 1.5rem;
}

.action-btn {
  background: none;
  border: none;
  color: #f2e9e9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
}

.action-btn:hover {
  background: rgb(246, 239, 239, 0.1);
}

/* Segunda fila - Navegación principal */
.navbar-main {
  padding: 0.7rem 0;
  background: #e2dada;
  border-bottom: 1px solid #f0f0f0;
}

.navbar-main .navbar-container {
  gap: 2rem;
}

/* Menú de categorías */
.categories-menu {
  position: relative;
}

.categories-trigger {
  background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
  color: white;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(34, 139, 34, 0.3);
  min-width: 150px;
}

.categories-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 139, 34, 0.4);
}

.hamburger-icon {
  font-size: 1.2rem;
}

.dropdown-arrow {
  margin-left: auto;
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.categories-trigger.active .dropdown-arrow {
  transform: rotate(180deg);
}

/* Dropdown Simple de Categorías */
.categories-dropdown-simple {
  position: absolute;
  top: calc(400% + 10px);
  left: 0;
  background: white;
  border-radius: 15px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid #e8e8e8;
  width: 300px;
  z-index: 1001;
  overflow: hidden;
  animation: slideDownFade 0.3s ease;
  max-height: 400px;
  overflow-y: auto;
}

.category-item-hover {
  position: relative;
  border-bottom: 1px solid #f0f0f0;
}

.category-item-hover:last-child {
  border-bottom: none;
}

.category-main-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
}

.category-main-item:hover {
  background: var(--light-gray);
  color: var(--primary-green);
}

.category-icon-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.category-name {
  font-weight: 600;
  font-size: 0.95rem;
}

/* Submenu de subcategorías al hover */
.subcategories-hover-menu {
  position: absolute;
  left: 100%;
  top: 0;
  background: #f2f2f2;
  border-radius: 15px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid #e8e8e8;
  width: 250px;
  z-index: 1002;
  overflow: hidden;
  animation: slideInRight 0.2s ease;
}

.subcategory-hover-item {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.9rem;
}

.subcategory-hover-item:last-child {
  border-bottom: none;
}

.subcategory-hover-item:hover {
  background: var(--primary-green);
  color: #f6efef;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Mega Dropdown Pantalla Completa */
.mega-dropdown-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000px;
  animation: fadeInScale 0.3s ease;
}

.fullscreen-overlay {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.fullscreen-content {
  background: white;
  border-radius: 20px;
  width: 90%;
  max-width: 100px;
  height: 80%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.fullscreen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  background: linear-gradient(135deg, var(--primary-green), var(--primary-orange));
  color: #a39f9f;
}

.fullscreen-header h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
}

.close-fullscreen {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.close-fullscreen:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.categories-grid-fullscreen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 2rem;
  overflow-y: auto;
  flex: 1;
  max-height: calc(100vh - 200px);
}

@media (max-width: 1200px) {
  .categories-grid-fullscreen {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .categories-grid-fullscreen {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
}

.category-section-fullscreen {
  background: linear-gradient(145deg, #f8f9fa, #e9ecef);
  border-radius: 15px;
  padding: 1.5rem;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
}

.category-section-fullscreen:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-green);
}

.category-header-fullscreen {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--primary-green);
}

.category-icon-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.category-name-fullscreen {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary-green);
}

.subcategories-list-fullscreen {
  display: grid;
  gap: 0.8rem;
}

.subcategory-item-fullscreen {
  background: white;
  border: none;
  padding: 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-align: left;
  border: 1px solid #e9ecef;
}

.subcategory-item-fullscreen:hover {
  background: var(--primary-green);
  color: white;
  transform: translateX(10px);
  box-shadow: 0 4px 15px rgba(34, 139, 34, 0.3);
}

.subcategory-icon {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
}

.subcategory-name {
  font-weight: 600;
  font-size: 0.95rem;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Mega Dropdown Original (como fallback) */
.mega-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: white;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid #e8e8e8;
  width: 800px;
  z-index: 1001;
  overflow: hidden;
  animation: slideDownFade 0.3s ease;
}

@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding: 2rem;
}

.category-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 700;
  color: var(--primary-green);
  font-size: 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #f0f0f0;
}

.category-icon {
  font-size: 1.4rem;
}

.subcategories-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.subcategory-item {
  background: none;
  border: none;
  text-align: left;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
  color: #666;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.subcategory-item:hover {
  background: var(--light-gray);
  color: var(--primary-green);
  transform: translateX(5px);
}

.dropdown-footer {
  background: var(--light-gray);
  padding: 1rem 2rem;
  text-align: center;
}

.view-all-btn {
  background: none;
  border: none;
  color: var(--primary-green);
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.view-all-btn:hover {
  background: var(--primary-green);
  color: white;
}

/* Barra de búsqueda avanzada */
.search-container-advanced {
  flex: 1;
  max-width: 600px;
}

.search-form {
  display: flex;
  background: #f8f9fa;
  border: 2px solid #e8e8e8;
  border-radius: 25px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.search-form:focus-within {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(34, 139, 34, 0.1);
}

.search-input-wrapper {
  flex: 1;
  position: relative;
}

.search-input-advanced {
  width: 100%;
  border: none;
  outline: none;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  background: transparent;
  color: var(--dark-gray);
}

.search-input-advanced::placeholder {
  color: #999;
  font-weight: 400;
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e8e8e8;
  border-top: none;
  border-radius: 0 0 15px 15px;
  padding: 1rem 1.5rem;
  display: none;
  gap: 0.5rem;
  z-index: 1002;
}

.search-form:focus-within .search-suggestions {
  display: flex;
}

.suggestion-tag {
  background: #f0f0f0;
  border: none;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  cursor: pointer;
  font-size: 0.8rem;
  color: #666;
  transition: all 0.2s ease;
}

.suggestion-tag:hover {
  background: var(--primary-green);
  color: white;
}

.search-btn-advanced {
  background: linear-gradient(135deg, var(--primary-orange), var(--accent-orange));
  color: #f0efef;
  border: none;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
  min-width: 100px;
  justify-content: center;
}

.search-btn-advanced:hover {
  background: linear-gradient(135deg, var(--accent-orange), var(--primary-green));
  transform: scale(1.02);
}

.search-icon-advanced {
  font-size: 1.1rem;
}

/* Categorías rápidas */
.quick-categories {
  display: flex;
  gap: 1rem;
}

.quick-category {
  background: #fbf4f4;
  border: 2px solid #f0f0f0;
  padding: 0.6rem 1rem;
  border-radius: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--dark-gray);
}

.quick-category:hover {
  border-color: var(--primary-green);
  background: var(--light-gray);
  transform: translateY(-2px);
}

.cat-icon {
  font-size: 1.1rem;
}

.cat-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Barra de Navegación Principal - Posicionada arriba */
.main-navigation-bar-top {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-bottom: 2px solid #b5b9c0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 100;
  order: -1; /* Para que aparezca primero */
  width: 100%;
  margin-top: 8px !important;
}

.main-nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-nav-item {
  position: relative;
  flex: 1;
}

.main-nav-button {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  width: 100%;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
  font-weight: 600;
  color: var(--dark-gray);
  position: relative;
  overflow: hidden;
}

.main-nav-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(34, 139, 34, 0.1), 
    transparent);
  transition: left 0.5s ease;
}

.main-nav-button:hover::before {
  left: 100%;
}

.main-nav-button:hover {
  background: linear-gradient(135deg, rgba(34, 139, 34, 0.05), rgba(255, 140, 0, 0.05));
  border-bottom-color: var(--primary-orange);
  transform: translateY(-2px);
}

.main-nav-button.active {
  background: linear-gradient(135deg, rgba(34, 139, 34, 0.1), rgba(255, 140, 0, 0.1));
  border-bottom-color: var(--primary-green);
  color: var(--primary-green);
}

.main-nav-icon {
  font-size: 1.2rem;
  filter: none;
}

.main-nav-text {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.main-nav-arrow {
  font-size: 0.8rem;
  margin-left: auto;
  transition: transform 0.3s ease;
}

.main-nav-button.active .main-nav-arrow {
  transform: rotate(180deg);
}

/* Dropdown de navegación principal */
.main-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border: 1px solid #e9ecef;
  min-width: 250px;
  z-index: 100px;
  overflow: hidden;
  animation: slideDownFade 0.3s ease;
}

.main-nav-sub-item {
  background: none;
  border: none;
  width: 100%;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid #f0f0f0;
  text-align: center;
}

.main-nav-sub-item:last-child {
  border-bottom: none;
}

.main-nav-sub-item:hover {
  background: linear-gradient(135deg, var(--primary-green), var(--primary-orange));
  color: white;
  transform: translateX(5px);
}

.sub-item-icon {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
}

.sub-item-text {
  font-weight: 600;
  font-size: 0.9rem;
}

/* Tercera fila - Navegación secundaria */
.navbar-secondary {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 0.7rem 0;
  border-bottom: 1px solid #e8e8e8;
}

.secondary-menu {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  justify-content: center;
}

.secondary-item {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.85rem;
  color: #666;
  font-weight: 500;
  transition: all 0.3s ease;
}

.secondary-item:hover {
  background: #e8e3e3;
  color: var(--primary-green);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.secondary-item span:first-child {
  font-size: 1rem;
}
.nav-logo {
  width: 150px;
  height: auto;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-icon {
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 0.5rem;
  border-radius: 8px;
  transition: var(--transition);
}

.nav-icon:hover {
  background: rgb(111, 109, 109,0.2);
  transform: scale(1.05);
}

.nav-icon-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.cart-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--primary-orange);
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
}

/* Dashboard styles */
.dashboard {
  min-height: 100vh;
  background: #f5f5f5;
}

.dashboard-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  padding-bottom: 200px; /* Espacio para navbar inferior móvil */
  background: var(--background-secondary);
  min-height: 100vh;
}

/* Desktop optimization - Mejor aprovechamiento del espacio */
@media (min-width: 1200px) {
  .container,
  .main-container {
    max-width: 1600px;
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 100px;
    position: relative;
    z-index: 1;
  }
  
  .dashboard-main {
    max-width: 1600px;
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* Cuando hay navbar adicional visible */
.dashboard-main.with-page-nav {
  padding-top: 250px !important; /* Header (185px) + Page Nav (60px) + Margen (5px) = 250px */
}

.perfil-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  padding-bottom: 90px; /* Espacio para navbar inferior */
}

.vendedor-main {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  padding-bottom: 90px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.vendedor-main * {
  box-sizing: border-box;
  max-width: 100%;
}

.compras-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  padding-bottom: 90px; /* Espacio para navbar inferior */
}

/* Profile Button with Frame Styles */
.profile-btn-with-frame {
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 0.3rem;
  border-radius: 50%;
  transition: var(--transition);
  margin: 0;
}

.profile-btn-with-frame:hover {
  transform: scale(1.05);
}

.profile-frame {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-frame-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  filter: none;
}

.profile-photo-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  background: var(--primary-green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.profile-photo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: bold;
  border-radius: 50%;
}

.header-center-vendedor {
  flex: 1;
  text-align: center;
}

.vendedor-title {
  color: var(--dark-gray);
  font-weight: bold;
  font-size: 1.5rem;
  margin: 0;
}

/* Notificaciones Styles */
.notifications-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1rem;
}

.notifications-filters {
  flex: 1;
}

.notifications-actions {
  display: flex;
  gap: 0.75rem;
}

/* Botones minimalistas y sobrios - Mobile-first */
.btn-mark-read,
.btn-clear-all {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid;
  white-space: nowrap;
  min-width: auto;
}

.btn-mark-read {
  background: transparent;
  color: #5CB85C;
  border-color: #5CB85C;
}

.btn-mark-read:hover:not(:disabled) {
  background: #5CB85C;
  color: white;
}

.btn-clear-all {
  background: transparent;
  color: #6c757d;
  border-color: #d1d5db;
}

.btn-clear-all:hover:not(:disabled) {
  background: #6c757d;
  color: white;
}

.btn-mark-read:disabled,
.btn-clear-all:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Responsive: Mobile-first */
@media (max-width: 768px) {
  .notifications-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }

  .notifications-filters {
    width: 100%;
  }

  .notifications-actions {
    width: 100%;
    gap: 0.5rem;
  }

  .btn-mark-read,
  .btn-clear-all {
    flex: 1;
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
  }
}

@media (max-width: 480px) {
  .btn-mark-read,
  .btn-clear-all {
    padding: 0.5rem 0.625rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 360px) {
  .notifications-actions {
    gap: 0.375rem;
  }

  .btn-mark-read,
  .btn-clear-all {
    padding: 0.5rem;
    font-size: 0.7rem;
  }
}

.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Notification styles moved to NotificationCenter.css */

.empty-state-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

/* Cart Page Styles */
.cart-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.empty-cart {
  text-align: center;
  padding: 4rem 2rem;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.cart-item-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}

.cart-item-details {
  flex: 1;
}

.cart-item-details h4 {
  margin: 0 0 0.5rem 0;
  color: var(--dark-gray);
}

.cart-item-category {
  color: #666;
  font-size: 0.9rem;
  margin: 0;
}

.cart-item-price {
  font-weight: 600;
  color: var(--primary-yellow);
  margin: 0.5rem 0 0 0;
}

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quantity-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity {
  min-width: 40px;
  text-align: center;
  font-weight: 600;
}

.cart-item-total {
  font-weight: 600;
  color: var(--dark-gray);
  min-width: 100px;
  text-align: right;
}

.remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: #dc3545;
  font-size: 1.2rem;
}

.cart-summary {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.summary-details {
  margin-bottom: 2rem;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}

.summary-line.total {
  border-top: 2px solid #eee;
  margin-top: 1rem;
  padding-top: 1rem;
  font-weight: 600;
  font-size: 1.2rem;
}

.free-shipping {
  color: #28a745;
  font-weight: 600;
}

.cart-actions {
  display: flex;
  gap: 1rem;
}

.checkout-btn {
  flex: 1;
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
  text-transform: none;
}

.checkout-btn:hover {
  background: linear-gradient(135deg, #45a049 0%, #4CAF50 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}

/* Payment Methods Styles */
.payment-methods-content {
  padding: 2rem;
}

.payment-methods-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.add-payment-form {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
  border: 2px solid var(--primary-green);
}

.add-payment-form h4 {
  margin: 0 0 1.5rem 0;
  color: var(--primary-green);
  font-size: 1.2rem;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
}

.no-payment-methods {
  text-align: center;
  padding: 4rem 2rem;
}

.payment-methods-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.payment-method-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-left: 4px solid var(--primary-green);
}

.payment-icon {
  font-size: 2rem;
}

.payment-info {
  flex: 1;
}

.payment-info h4 {
  margin: 0 0 0.5rem 0;
  color: var(--dark-gray);
}

.payment-info p {
  margin: 0 0 0.3rem 0;
  color: #666;
}

.payment-info small {
  color: #999;
  font-size: 0.8rem;
}

.payment-actions {
  display: flex;
  gap: 1rem;
}

.payment-security {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  padding: 1.5rem;
  border-radius: 12px;
  border-left: 4px solid #28a745;
  margin-bottom: 2rem;
}

.payment-security h4 {
  margin: 0 0 1rem 0;
  color: var(--primary-green);
}

.payment-security ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
}

.payment-security li {
  padding: 0.3rem 0;
  color: #666;
}

.payment-settings {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.payment-settings h4 {
  margin: 0 0 1rem 0;
  color: var(--primary-green);
}

.payment-settings .form-group {
  margin-bottom: 1rem;
}

.payment-settings label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--dark-gray);
  cursor: pointer;
}

.payment-settings input[type="checkbox"] {
  transform: scale(1.2);
  accent-color: var(--primary-green);
}

/* Logout Styles */
.logout-content {
  padding: 2rem;
}

.logout-confirmation {
  text-align: center;
  background: white;
  padding: 3rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
}

.logout-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.logout-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.logout-btn {
  min-width: 150px;
}

.logout-info {
  background: #f8f9fa;
  padding: 2rem;
  border-radius: 12px;
}

.logout-info ul {
  list-style: none;
  padding: 0;
}

.logout-info li {
  padding: 0.5rem 0;
}

/* Wishlist Styles */
.wishlist-content {
  padding: 2rem;
}

.wishlist-header {
  margin-bottom: 2rem;
}

.empty-wishlist {
  text-align: center;
  padding: 4rem 2rem;
}

.wishlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.wishlist-item {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.wishlist-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.wishlist-info h4 {
  margin: 0 0 0.5rem 0;
}

.wishlist-price {
  font-weight: 600;
  color: var(--primary-yellow);
  margin-bottom: 1rem;
}

.wishlist-actions {
  display: flex;
  gap: 0.5rem;
}

/* Pedidos Stats */
.pedidos-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: var(--primary-yellow);
}

/* Timeline */
.pedidos-timeline {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.pedido-timeline-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}

.timeline-icon {
  font-size: 1.5rem;
}

.timeline-content h4 {
  margin: 0 0 0.5rem 0;
}

.timeline-content p {
  margin: 0;
}

/* Vendor Chat */
.chat-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  height: 500px;
}

.chat-lista {
  background: white;
  border-radius: 12px;
  padding: 1rem;
  overflow-y: auto;
}

.chat-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.chat-item:hover,
.chat-item.activo {
  background: #f8f9fa;
}

.chat-avatar {
  width: 40px;
  height: 40px;
  background: #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-info {
  flex: 1;
}

.chat-info h4 {
  margin: 0 0 0.25rem 0;
  font-size: 0.9rem;
}

.chat-info p {
  margin: 0;
  font-size: 0.8rem;
  color: #666;
}

.chat-tiempo {
  font-size: 0.7rem;
  color: #999;
}

.chat-badge {
  background: var(--primary-yellow);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

.chat-mensajes {
  background: white;
  border-radius: 12px;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mensaje-entrante,
.mensaje-saliente {
  max-width: 70%;
  padding: 0.75rem 1rem;
  border-radius: 12px;
}

.mensaje-entrante {
  background: #f1f3f4;
  align-self: flex-start;
}

.mensaje-saliente {
  background: var(--primary-yellow);
  align-self: flex-end;
}

.mensaje-tiempo {
  font-size: 0.7rem;
  color: #666;
  display: block;
  margin-top: 0.25rem;
}

.chat-input {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.chat-input input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.btn-enviar {
  padding: 0.75rem 1.5rem;
  background: var(--primary-yellow);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* Barra de Búsqueda estilo MercadoLibre exacto */
.search-section-new {
  margin: 0;
  padding: 16px 0;
  background: var(--delaferia-yellow);
  border-radius: 0;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.search-section-new::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    transparent 0%, 
    rgba(34, 139, 34, 0.03) 25%,
    rgba(255, 140, 0, 0.03) 50%,
    rgba(34, 139, 34, 0.03) 75%,
    transparent 100%);
  animation: shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.search-container-new {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  gap: 1rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--background-primary);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  padding: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
  transition: var(--transition-fast);
  height: 38px;
}

.search-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(34, 139, 34, 0.06), 
    transparent);
  transition: left 0.8s ease;
}

.search-box:focus-within {
  border-color: var(--primary-green);
  box-shadow: 
    0 16px 40px rgba(139, 69, 19, 0.12),
    0 8px 20px rgba(196, 160, 122, 0.16),
    0 0 0 3px rgba(34, 139, 34, 0.1),
    inset 0 1px 0 rgba(245, 230, 211, 1);
  transform: translateY(-2px);
}

.search-box:focus-within::before {
  left: 100%;
}

.search-icon {
  font-size: 1.1rem;
  margin-right: 1.2rem;
  color: var(--primary-green);
  font-weight: 400;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.search-box:focus-within .search-icon {
  opacity: 1;
  color: var(--primary-orange);
  transform: scale(1.1);
}

.search-input-new {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.95rem;
  padding: 0.5rem 0;
  color: var(--text-dark);
  font-weight: 400;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.search-input-new::placeholder {
  color: var(--text-gray);
  font-style: normal;
  font-weight: 400;
}

.search-filters-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(34, 139, 34, 0.1);
  border: 1px solid var(--primary-green);
  border-radius: 15px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: var(--transition);
  color: var(--primary-green);
  font-weight: 600;
}

.search-filters-btn:hover {
  background: var(--primary-green);
  color: white;
  transform: scale(1.05);
}

.filter-icon {
  font-size: 1rem;
}

.search-btn-new {
  background: var(--gray-300);
  color: var(--gray-600);
  border: none;
  border-radius: 0 2px 2px 0;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: none;
  position: relative;
  overflow: hidden;
  height: 38px;
  border-left: 1px solid var(--border-light);
}

.search-btn-new::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.3), 
    transparent);
  transition: left 0.5s ease;
}

.search-btn-new:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 10px 30px rgba(34, 139, 34, 0.4),
    0 4px 15px rgba(255, 140, 0, 0.3);
}

.search-btn-new:hover::before {
  left: 100%;
}

/* Búsquedas populares mejoradas */
.popular-searches-new {
  margin-top: 1.5rem;
  position: relative;
  z-index: 1;
}

.popular-container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.popular-label {
  font-weight: 700;
  color: var(--primary-green);
  font-size: 1rem;
  min-width: fit-content;
}

.popular-tags {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.popular-tag {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.9) 0%, 
    rgba(245, 245, 220, 0.8) 100%);
  border: 2px solid rgba(34, 139, 34, 0.2);
  color: var(--primary-green);
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  backdrop-filter: none !important;
  box-shadow: 0 4px 12px rgba(34, 139, 34, 0.1);
}

.popular-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(34, 139, 34, 0.1), 
    transparent);
  transition: left 0.5s ease;
}

.popular-tag:hover {
  background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
  color: white;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(34, 139, 34, 0.3);
  border-color: var(--primary-orange);
}

.popular-tag:hover::before {
  left: 100%;
}

/* Sidebar de Categorías estilo MercadoLibre */
.categories-sidebar {
  background: white;
  border-radius: var(--border-radius);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-card);
}

.categories-sidebar h3 {
  margin: 0 0 1rem 0;
  color: var(--text-dark);
  font-size: 1rem;
  font-weight: 500;
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.category-item-sidebar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem;
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  color: var(--text-gray);
  font-size: 0.85rem;
}

.category-item-sidebar:hover {
  background: var(--light-gray);
  color: var(--primary-green);
}

.category-icon-sidebar {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Grid principal con sidebar */
.dashboard-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1rem;
  align-items: start;
}

/* Categories */
.categories {
  margin-bottom: 2rem;
}

.categories h2 {
  margin-bottom: 1rem;
  color: var(--text-dark);
  font-size: 1.2rem;
  font-weight: 500;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.8rem;
}

.category-item {
  background: var(--background-primary);
  padding: 16px;
  border-radius: var(--radius-small);
  text-align: center;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
  position: relative;
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.category-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, var(--primary-green), var(--primary-orange));
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

.category-item:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-medium), var(--shadow-glow);
  border-color: var(--primary-orange);
  color: white;
}

.category-item:hover::before {
  opacity: 0.9;
}

.category-item:hover .category-icon {
  filter: none;
}

.category-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 0.5rem;
}

.category-item span {
  display: block;
  font-weight: 600;
  color: var(--dark-gray);
  font-size: 0.9rem;
}

/* Productos Destacados */
.featured-products-section {
  margin: 3rem 0;
  padding: 0 2rem;
}

/* CRÍTICO: Grid de productos destacados - SOLUCIÓN DEFINITIVA */
.featured-products-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  padding: 20px 0 !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Grid de productos general (mismo estilo que destacados) */
.products-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  padding: 20px 0 !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Responsive: 3 columnas en tablets */
@media (max-width: 992px) {
  .featured-products-grid,
  .products-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }
}

/* Responsive: 2 columnas en móvil - MÍNIMO 2 PRODUCTOS POR FILA */
@media (max-width: 768px) {
  .featured-products-grid,
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    padding: 16px 8px !important;
  }
}

/* Para móviles muy pequeños mantenemos 2 columnas */
@media (max-width: 480px) {
  .featured-products-grid,
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 12px 4px !important;
  }
}

/* Estilos para las tarjetas de productos destacados */
.featured-product-card {
  background: white !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 260px !important;
  width: 100% !important;
}

.featured-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-color: var(--primary-orange);
}

.featured-product-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
}

.featured-product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.featured-product-info h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #1a202c;
  margin: 0;
}

.featured-product-info .product-category {
  font-size: 0.875rem;
  color: #718096;
  margin: 4px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.section-header h2 {
  font-size: 2.5rem;
  background: linear-gradient(135deg, var(--primary-green), var(--primary-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  font-weight: 800;
}

.section-header p {
  font-size: 1.2rem;
  color: var(--gray);
  font-weight: 500;
}


.product-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(226, 232, 240, 0.8);
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  height: auto;
  min-height: 290px; /* Ajustado +10px (280px → 290px) */
}

.product-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.3);
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Cambio a contain para evitar cortes */
  object-position: center;
  transition: all 0.3s ease;
  padding: 4px; /* Pequeño padding interno */
  background: #ffffff;
  position: relative;
  border-radius: 0;
}

.product-card:hover .product-image {
  transform: scale(1.05);
  filter: brightness(1.08) saturate(1.1);
  object-fit: contain; /* Mantener contain en hover */
}

.product-image-container {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border-radius: 0;
  height: 150px; /* Aumentado +10px (140px → 150px) */
  border-bottom: 1px solid rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 100%;
}

.product-image-container::after {
  display: none;
}



.product-info {
  padding: 6px 10px;
  flex: none;
  height: 70px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  overflow: hidden;
}

.product-info h3 {
  margin: 0 0 3px 0;
  color: #1e293b;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 26px;
  letter-spacing: -0.025em;
}

.product-category {
  display: none;
}

.product-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-vendor {
  display: none;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #333333;
}

.product-rating .stars {
  color: #FFE600;
  font-size: 12px;
}

.product-rating .rating-count {
  color: #666666;
  font-size: 12px;
}

.product-price {
  font-size: 18px;
  font-weight: 400;
  color: #333333;
  margin-bottom: 2px;
  letter-spacing: normal;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
}

.product-price-before {
  font-size: 14px;
  color: #999999;
  text-decoration: line-through;
  margin-bottom: 4px;
  font-weight: 400;
}

.product-discount {
  position: absolute;
  top: 16px;
  left: 16px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  letter-spacing: 0.5px;
}

.product-installments {
  color: #00A650;
  font-size: 0.95rem;
  font-weight: 400;
  margin-bottom: 4px;
  line-height: 1.4;
}

.product-shipping {
  color: #059669;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(5, 150, 105, 0.1);
  border-radius: 6px;
  width: fit-content;
  margin-bottom: 6px;
}

.product-shipping img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.add-to-cart-btn {
  background: #3483FA;
  color: white;
  border: none;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 400;
  font-size: 13px;
  transition: all 0.2s ease;
  text-align: center;
  width: 100%;
  box-shadow: none;
  letter-spacing: normal;
  text-transform: none;
  position: relative;
  overflow: hidden;
}

.add-to-cart-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.add-to-cart-btn:hover {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 20px rgba(59, 130, 246, 0.4),
    0 4px 8px rgba(59, 130, 246, 0.3);
}

.add-to-cart-btn:hover::before {
  left: 100%;
}

/* Badge de Popularidad DeLaFeria - Estilo MercadoLibre exacto */
.popularity-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #FF6900;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.popularity-badge.ranking-1 {
  background: #FF6900;
  animation: popularityPulse 2s infinite;
}

.popularity-badge.ranking-2 {
  background: #FF8C00;
}

.popularity-badge.ranking-3 {
  background: #FFA500;
}

.popularity-badge.top-10 {
  background: #00A650;
}

@keyframes popularityPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(255, 105, 0, 0.4);
  }
}

/* Vendor Dashboard Tabs */
.vendor-tabs {
  background: white;
  border-bottom: 2px solid var(--border-color);
  display: flex;
  overflow-x: auto;
}

.vendor-tabs .tab {
  padding: 1rem 2rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  transition: var(--transition);
}

.vendor-tabs .tab:hover {
  background: var(--light-gray);
}

.vendor-tabs .tab.active {
  border-bottom-color: var(--primary-green);
  color: var(--primary-green);
  background: var(--light-gray);
}

/* Slider de navegación horizontal integrado al header */
.header-nav-slider {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.header-nav-slider::-webkit-scrollbar {
  display: none;
}

.header-nav-menu {
  display: flex;
  gap: 1rem;
  align-items: center;
  min-width: max-content;
  padding: 0 1rem;
}

/* Sistema de chat discreto - De la Feria */
.delafera-chat-trigger {
  position: fixed;
  bottom: 90px; /* Aumentado para evitar overlap con navbar inferior */
  right: 20px;
  z-index: 1050; /* Aumentado para estar arriba del navbar inferior */
}

/* Ocultar chatbot durante video fullscreen */
.fullscreen-video-active .delafera-chat-trigger,
.shorts-player-fullscreen .delafera-chat-trigger {
  display: none !important;
}

.delafera-help-button {
  background: linear-gradient(135deg, var(--primary-green), #16a34a);
  color: white;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(34, 197, 94, 0.2),
    0 6px 16px rgba(34, 197, 94, 0.3),
    0 8px 24px rgba(34, 197, 94, 0.15),
    inset 0 1px 2px rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 16px;
  transform: translateZ(0);
  background-size: 100% 100%;
}

.delafera-help-button:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.15),
    0 6px 12px rgba(34, 197, 94, 0.25),
    0 10px 28px rgba(34, 197, 94, 0.35),
    0 12px 32px rgba(34, 197, 94, 0.2),
    inset 0 1px 3px rgba(255, 255, 255, 0.4),
    inset 0 -2px 5px rgba(0, 0, 0, 0.25);
  background: linear-gradient(135deg, #16a34a, var(--primary-green));
}

.delafera-chat-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ef4444;
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s infinite;
}

.delafera-chat-window {
  position: fixed;
  bottom: 160px; /* Aumentado para evitar overlap con navbar inferior */
  right: 20px;
  width: 340px;
  height: 480px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.2);
  z-index: 100;
  overflow: hidden;
}

.delafera-chat-header {
  background: linear-gradient(135deg, var(--primary-green), #16a34a);
  color: white;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}

.chat-brand {
  font-size: 18px;
}

.delafera-close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.2s;
}

.delafera-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Vendor navbar positioning - Force visibility en la parte inferior */
.vendedor-navbar,
.navbar-top.vendedor-navbar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 998 !important;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.98) 0%, 
    rgba(248, 249, 250, 0.95) 100%) !important;
  border-top: 2px solid var(--border-color) !important;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.15) !important;
  height: 60px !important;
  backdrop-filter: blur(10px) !important;
  display: flex !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 0 !important;
  transform: translateZ(0) !important; /* Force hardware acceleration */
}

/* Main content spacing adjustments - valores por defecto que se pueden sobrescribir */
.dashboard-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  position: relative;
  z-index: 1; /* Evitar superposición con elementos fijos */
}

.vendedor-main {
  min-height: calc(100vh - 200px);
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  margin-top: 0 !important;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Optimización desktop - Mejor uso del espacio para vendedor */
@media (min-width: 1200px) {
  /* Header más alto y proporcionado en desktop */
  .dashboard-header {
    height: 220px; /* Más alto para desktop */
  }
  
  .header-content {
    padding: 20px 40px; /* Más espacioso */
  }
  
  .header-comprador {
    min-height: 85px; /* Más alto */
    padding: 15px 0;
  }
  
  .navbar-top {
    height: 65px; /* Más alto para mejor proporción */
    padding: 0 40px;
  }
  
  .vendedor-main {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 3rem;
    padding-right: 3rem;
  }
  
  .dashboard-main {
    /* padding-top manejado por overrides.css */
  }
}

/* Navegación profesional con cards para vendedor */
.vendedor-navigation-cards {
  margin-bottom: 3rem;
}

.nav-cards-grid {
  display: grid;

/* ==================== */
/* PRODUCT Q&A STYLES - PROFESSIONAL DESIGN */
/* ==================== */

.questions-content {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  background: transparent;
}

.question-form-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

.question-form-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary-green);
}

.question-form-section h4 {
  margin: 0 0 1.5rem 0;
  color: var(--dark-gray);
  font-size: 1.2rem;
  font-weight: 600;
  padding: 1.5rem 1.5rem 0;
  letter-spacing: -0.025em;
}

.question-form {
  width: 100%;
  padding: 0 1.5rem 1.5rem;
  max-width: 100%;
}

.question-input-wrapper {
  position: relative;
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: 100%;
}

.question-textarea {
  width: 100%;
  max-width: 100%;
  padding: 1rem 1.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
  min-height: 100px;
  background: #ffffff;
  transition: all 0.3s ease;
  color: var(--dark-gray);
  box-sizing: border-box;
}

.question-textarea::placeholder {
  color: #94a3b8;
  font-weight: 400;
  font-style: normal;
  opacity: 0.8;
}

.question-textarea:focus {
  outline: none;
  border-color: var(--primary-green);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(34, 139, 34, 0.1);
}

.question-textarea:disabled {
  background: #f8f9fa;
  border-color: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
  opacity: 0.7;
}

.question-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0 0;
  border-top: 2px solid rgba(34, 139, 34, 0.1);
  margin-top: 1.5rem;
  width: 100%;
  gap: 1.5rem;
}

.char-counter {
  font-size: 0.9rem;
  color: #64748b;
  font-weight: 500;
  background: rgba(100, 116, 139, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  letter-spacing: 0.025em;
}

.char-counter::before {
  display: none;
}

.btn-submit-question {
  background: linear-gradient(135deg, var(--primary-green) 0%, #059669 100%);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 16px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 6px 20px rgba(34, 139, 34, 0.3),
    0 2px 8px rgba(34, 139, 34, 0.2);
  min-width: 160px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

.btn-submit-question::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.4), 
    transparent);
  transition: left 0.8s ease;
  z-index: 1;
}

.btn-submit-question:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669 0%, var(--primary-green) 100%);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 
    0 12px 35px rgba(34, 139, 34, 0.4),
    0 6px 20px rgba(5, 150, 105, 0.3),
    0 0 0 4px rgba(34, 139, 34, 0.1);
}

.btn-submit-question:hover:not(:disabled)::before {
  left: 100%;
}

.btn-submit-question:active {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 
    0 8px 25px rgba(34, 139, 34, 0.3),
    0 4px 15px rgba(5, 150, 105, 0.2);
}

.btn-submit-question:disabled {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  cursor: not-allowed;
  transform: none;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #64748b;
  opacity: 0.6;
}

.btn-submit-question:disabled::before {
  display: none;
}

.login-prompt {
  background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
  padding: 2.5rem;
  border-radius: 16px;
  text-align: center;
  border: 2px solid #fc8181;
  margin: 2rem;
  box-shadow: 0 4px 12px rgba(252, 129, 129, 0.15);
  position: relative;
}

.login-prompt::before {
  content: '🔒';
  display: block;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.login-prompt p {
  margin: 0;
  color: #742a2a;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.025em;
}

.login-prompt a {
  color: var(--primary-green) !important;
  text-decoration: none;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.login-prompt a:hover {
  background: rgba(34, 139, 34, 0.1);
  transform: translateY(-1px);
}

.questions-list {
  margin-top: 3rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.questions-wrapper h4 {
  margin: 0 0 1.5rem 0;
  color: var(--dark-gray);
  font-size: 1.2rem;
  font-weight: 600;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--primary-green);
}

.questions-wrapper h4::after {
  display: none;
}

.question-item {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.question-item::before {
  display: none;
}

.question-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: #d1d5db;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f1f5f9;
}

.question-user {
  font-weight: 600;
  color: var(--primary-green);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(34, 139, 34, 0.08);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
}

.question-user::before {
  content: '';
  width: 16px;
  height: 16px;
  background: var(--primary-green);
  border-radius: 50%;
  flex-shrink: 0;
}

.question-date {
  font-size: 0.8rem;
  color: #718096;
  font-weight: 500;
  background: #f8fafc;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
}

.question-text {
  margin-bottom: 1.5rem;
  line-height: 1.7;
  color: #2d3748;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.question-text strong {
  color: var(--primary-green);
  margin-right: 0.75rem;
  font-weight: 700;
  background: rgba(34, 139, 34, 0.08);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.9rem;
}

.question-answer {
  background: #f8fafc;
  padding: 1.25rem;
  border-radius: 8px;
  border-left: 3px solid #059669;
  line-height: 1.6;
  color: #374151;
  font-size: 0.95rem;
  box-shadow: none;
  position: relative;
  margin-top: 1rem;
}

.question-answer::before {
  display: none;
}

.question-answer strong {
  color: var(--primary-green);
  margin-right: 0.75rem;
  font-weight: 700;
  background: rgba(34, 139, 34, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.9rem;
}

.question-pending {
  background: #fef9e7;
  color: #92400e;
  padding: 1rem;
  border-radius: 8px;
  border-left: 3px solid #f59e0b;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: none;
  margin-top: 1rem;
}

.question-pending::before {
  content: '';
  width: 16px;
  height: 16px;
  background: #f59e0b;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.no-questions {
  text-align: center;
  padding: 3rem 2rem;
  background: #f8fafc;
  border-radius: 12px;
  margin: 2rem 0;
  border: 1px solid #e2e8f0;
}

.no-questions-icon {
  width: 64px;
  height: 64px;
  background: #e2e8f0;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.no-questions-icon::before {
  content: '?';
  font-size: 24px;
  color: #64748b;
  font-weight: bold;
}

.no-questions p {
  margin: 0.75rem 0;
  font-size: 1rem;
  color: #64748b;
  font-weight: 500;
  letter-spacing: 0.025em;
}

.no-questions p:first-of-type {
  font-size: 1.1rem;
  font-weight: 600;
  color: #374151;
}

/* Responsive para móviles - Diseño profesional */
@media (max-width: 768px) {
  .questions-content {
    padding: 1.5rem 0;
  }
  
  .question-form {
    padding: 0 1.5rem 2rem;
  }
  
  .question-form-section h4 {
    padding: 1.5rem 1.5rem 0;
    font-size: 1.2rem;
  }
  
  .question-textarea {
    padding: 1.5rem 1.25rem;
    min-height: 110px;
    font-size: 1rem;
    border-radius: 12px;
  }
  
  .question-form-footer {
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
  }
  
  .char-counter {
    text-align: center;
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
  }
  
  .btn-submit-question {
    width: 100%;
    justify-content: center;
    padding: 1.5rem 2rem;
    font-size: 1.1rem;
    border-radius: 12px;
    min-height: 56px;
  }
  
  .question-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .question-item {
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: 12px;
  }
  
  .question-text {
    font-size: 1rem;
  }
  
  .question-answer {
    padding: 1.25rem;
    font-size: 1rem;
  }
  
  .questions-wrapper h4 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
  }
  
  .no-questions {
    padding: 3rem 1.5rem;
  }
  
  .no-questions-icon {
    font-size: 3rem;
  }
  
  .login-prompt {
    margin: 1.5rem;
    padding: 2rem;
  }
}

/* Iconos modernos sin emojis para ProductDetail */
.shipping-icon-modern,
.return-icon-modern,
.spec-icon-modern,
.feature-icon-spec {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-green), #28a745);
  flex-shrink: 0;
  position: relative;
}

.shipping-icon-modern::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 2px;
}

.return-icon-modern::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border: 2px solid white;
  border-radius: 50%;
}

.spec-icon-modern::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
}

/* Limpiar iconos de características */
.feature-icon {
  width: 16px;
  height: 16px;
  background: var(--primary-green);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.feature-icon::before {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 10px;
  font-weight: bold;
}

/* Mejorar vendedor rating */
.seller-rating::before {
  content: '★';
  color: #ffc107;
  margin-right: 4px;
}

.seller-location::before {
  content: '📍';
  margin-right: 4px;
}

/* No questions icon placeholder */
.no-questions-icon {
  width: 64px;
  height: 64px;
  background: #f0f0f0;
  border-radius: 50%;
  margin: 0 auto 1rem;
  position: relative;
}

.no-questions-icon::before {
  content: '?';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #666;
  font-weight: bold;
}

/* Related products placeholder */
.related-image {
  width: 80px;
  height: 80px;
  background: #f0f0f0;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  position: relative;
}

.related-image::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: #ddd;
  border-radius: 4px;
}

/* Limpiar diseño de usuario en preguntas */
.question-user {
  font-weight: 600;
  color: var(--primary-green);
  position: relative;
  padding-left: 20px;
}

.question-user::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: var(--primary-green);
  border-radius: 50%;
}

/* Modernizar botones de guía de tallas */
.size-guide-btn {
  background: none;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  color: #6c757d;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
  position: relative;
  padding-left: 2rem;
}

.size-guide-btn::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 2px;
}

.size-guide-btn:hover {
  background: #e9ecef;
  color: #495057;
}

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.nav-card {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
}

.nav-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  border-color: #667eea;
}

.nav-card:hover::before,
.nav-card.active::before {
  opacity: 1;
}

.nav-card.active {
  border-color: #667eea;
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.2);
  transform: translateY(-3px);
}

.nav-card-icon {
  font-size: 3rem;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.nav-card-content {
  flex: 1;
}

.nav-card-content h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  color: #2d3748;
  font-weight: 700;
}

.nav-card-content p {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  color: #667eea;
  font-weight: 600;
}

.nav-card-description {
  color: #718096;
  font-size: 0.95rem;
}

/* Container para ProductUploader sin layout duplicado */
.product-uploader-container {
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.product-uploader-container .product-uploader-professional {
  margin-top: -2rem; /* Compensar el spacing del main */
}

/* Perfil page specific navbar positioning - En la parte inferior */
.perfil-navbar-1 {
  position: fixed !important;
  bottom: 120px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10000 !important;
  background: linear-gradient(135deg, 
    var(--primary-green) 0%, 
    #2c5530 30%,
    var(--primary-orange) 70%,
    #e07400 100%) !important;
  padding: 0.6rem 0 !important;
  font-size: 0.9rem !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  border-top: 2px solid var(--border-color) !important;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.15) !important;
}

.perfil-navbar-2 {
  position: fixed !important;
  bottom: 60px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.98) 0%, 
    rgba(248, 249, 250, 0.95) 100%) !important;
  border-top: 2px solid var(--border-color) !important;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.15) !important;
  height: 60px !important;
  backdrop-filter: blur(10px) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}

.perfil-navbar-3 {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9998 !important;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.98) 0%, 
    rgba(248, 249, 250, 0.95) 100%) !important;
  border-top: 2px solid var(--border-color) !important;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.15) !important;
  height: 60px !important;
  backdrop-filter: blur(10px) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}

.navbar-top.vendedor-navbar .navbar-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  display: flex !important;
  align-items: center !important;
  height: 60px !important;
}

.navbar-top.vendedor-navbar .quick-menu {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  height: 100% !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

.navbar-top.vendedor-navbar .quick-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: var(--dark-gray);
  transition: all 0.3s ease;
  text-decoration: none;
  min-height: 45px;
  white-space: nowrap;
  font-size: 0.9rem;
}

.navbar-top.vendedor-navbar .quick-menu-item:hover {
  background: var(--light-gray);
  color: var(--primary-green);
  transform: translateY(-1px);
}

.navbar-top.vendedor-navbar .quick-menu-item.active {
  background: var(--primary-green);
  color: white;
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3);
}

.navbar-top.vendedor-navbar .quick-icon-text {
  font-size: 0.9rem;
  font-weight: 600;
}

.navbar-top.vendedor-navbar .dropdown-menu {
  position: relative;
}

.navbar-top.vendedor-navbar .dropdown-arrow {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.navbar-top.vendedor-navbar .dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1001;
  min-width: 200px;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
}

.navbar-top.vendedor-navbar .dropdown-content button {
  width: 100%;
  padding: 0.8rem 1rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.9rem;
  color: #495057;
  transition: background 0.2s ease;
}

.navbar-top.vendedor-navbar .dropdown-content button:hover {
  background: #f8f9fa;
  color: var(--primary-green);
}

/* Tab content */
.tab-content {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  min-height: 500px;
  box-sizing: border-box;
  overflow-x: hidden;
}

@media (max-width: 1199px) {
  .tab-content {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .tab-content {
    padding: 1rem;
    margin: 0 0.5rem;
  }
}

@media (max-width: 480px) {
  .tab-content {
    padding: 0.8rem;
    margin: 0 0.25rem;
  }
}

@media (max-width: 1199px) {
  .vendedor-main,
  .product-detail-main {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .vendedor-main,
  .product-detail-main {
    padding: 1rem;
    margin: 0 0.5rem;
  }
}

@media (max-width: 480px) {
  .vendedor-main,
  .product-detail-main {
    padding: 0.4rem;
    margin: 0 0.25rem;
  }

  .product-gallery-section,
  .product-info-section,
  .product-tabs-section,
  .related-products-section {
    padding: 0.5rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0.3rem;
    width: 100%;
    overflow-x: hidden;
  }
}

.tab-header {
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 1rem;
}

.tab-header h2 {
  color: var(--dark-gray);
  margin: 0 0 0.5rem 0;
  font-size: 1.8rem;
}

.tab-header p {
  color: #666;
  margin: 0;
  font-size: 1rem;
}

/* Sub-navigation styles */
.sub-navigation {
  display: flex;
  gap: 2px;
  margin: 1rem 0 2rem 0;
  flex-wrap: wrap;
}

.sub-nav-btn {
  padding: 0.8rem 1.7rem;
  background: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  color: var(--dark-gray);
  transition: all 0.3s ease;
  font-size: 0.85rem;
}

.sub-nav-btn:hover {
  background: var(--light-gray);
  border-color: var(--primary-green);
  color: var(--primary-green);
}

.sub-nav-btn.active {
  background: var(--primary-green);
  color: white;
  border-color: var(--primary-green);
}

.sub-content {
  padding: 1rem 0;
}

.sub-content h3 {
  color: var(--dark-gray);
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
}

/* Dashboard overview styles */
.dashboard-overview {
  display: grid;
  gap: 2rem;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.overview-card {
  background: linear-gradient(135deg, #fff, #f8f9fa);
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 1px solid #e9ecef;
  transition: transform 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.overview-card h3 {
  color: var(--dark-gray);
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
}

.overview-number {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--primary-green);
  margin: 0.5rem 0;
}

.overview-card p {
  color: #666;
  margin: 0;
  font-size: 0.9rem;
}

/* ✅ NUEVO: Store profile section styles */
.store-profile-section {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  margin-bottom: 2rem;
}

.store-profile-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.store-profile-section .section-header h3 {
  margin: 0;
  color: var(--dark-gray);
  font-size: 1.3rem;
}

.store-edit-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.store-edit-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.store-edit-form label {
  font-weight: 600;
  color: var(--dark-gray);
}

.store-name-input {
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.store-name-input:focus {
  outline: none;
  border-color: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(52, 168, 83, 0.1);
}

.store-edit-form .form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.store-info-display {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.store-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.store-info-item .info-label {
  font-weight: 600;
  color: #6c757d;
}

.store-info-item .info-value {
  color: var(--dark-gray);
  font-weight: 500;
}

.store-link {
  color: var(--primary-green);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.store-link:hover {
  color: #2d7a4f;
  text-decoration: underline;
}

/* Recent activity styles */
.recent-activity {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.recent-activity h3 {
  color: var(--dark-gray);
  margin: 0 0 1.5rem 0;
  font-size: 1.3rem;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid var(--primary-green);
}

.activity-icon {
  font-size: 1.5rem;
  width: 40px;
  text-align: center;
}

.activity-content {
  flex: 1;
}

.activity-content p {
  margin: 0 0 0.25rem 0;
  color: var(--dark-gray);
  font-weight: 500;
}

.activity-content small {
  color: #666;
  font-size: 0.8rem;
padding: 2rem 0;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.tab-header h2 {
  color: var(--dark-gray);
  font-size: 1.8rem;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow-light);
}

.empty-state p {
  margin-bottom: 2rem;
  color: #666;
  font-size: 1.1rem;
}

/* Sales summary */
.sales-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.summary-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: var(--shadow-light);
}

.summary-card h3 {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.summary-number {
  font-size: 2rem;
  font-weight: bold;
  color: var(--primary-green);
}

/* Sales table */
.sales-table {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-light);
}

.sales-table table {
  width: 100%;
  border-collapse: collapse;
}

.sales-table th,
.sales-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.sales-table th {
  background: var(--light-gray);
  font-weight: 600;
  color: var(--dark-gray);
}

.sales-table tbody tr:hover {
  background: var(--light-gray);
}

.status {
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status.entregado {
  background: #d4edda;
  color: #155724;
}

.status.en-proceso {
  background: #fff3cd;
  color: #856404;
}

/* Profile info */
.profile-info {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: var(--shadow-light);
}

.profile-field {
  margin-bottom: 1.5rem;
}

.profile-field label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--dark-gray);
}

.profile-field input,
.profile-field textarea,
.profile-field select {
  width: 100%;
  padding: 0.8rem;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 1rem;
  transition: var(--transition);
}

.profile-field input:focus,
.profile-field textarea:focus,
.profile-field select:focus {
  outline: none;
  border-color: var(--primary-green);
}

.profile-field textarea {
  resize: vertical;
  min-height: 100px;
}

/* Product actions */
.product-actions {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-direction: column;
}

.product-actions .btn-add-cart,
.product-actions .btn-buy-now {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
}

.btn-edit,
.btn-delete {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  transition: var(--transition);
}

.btn-edit {
  background: #007bff;
  color: white;
}

.btn-edit:hover {
  background: #0056b3;
}

.btn-delete {
  background: #dc3545;
  color: white;
}

.btn-delete:hover {
  background: #c82333;
}

/* Breadcrumb estilo MercadoLibre exacto */
.breadcrumb {
  background: var(--background-primary);
  padding: 12px 16px;
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: none;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
}

.breadcrumb-item {
  color: var(--text-gray);
  text-decoration: none;
  transition: var(--transition);
}

.breadcrumb-item:hover {
  color: var(--primary-green);
}

.breadcrumb-separator {
  margin: 0 0.5rem;
  color: var(--text-gray);
}

/* Banner Carousel Optimizado */
.banner-carousel {
  margin: 1rem 0;
  text-align: center;
  position: relative;
  z-index: 10;
  padding: 1rem 0;
  max-width: 100%;
}

.banner-container {
  position: relative;
  display: inline-block;
  max-width: 900px;
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.banner-image {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
  object-position: center;
  border-radius: 16px;
  transition: all 0.3s ease;
  background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
}

.banner-image.loading {
  opacity: 0.7;
  filter: blur(1px);
}

.banner-image.loaded {
  opacity: 1;
  filter: none;
}

.banner-image:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* Responsive optimizations */
@media (max-width: 768px) {
  .banner-container {
    width: 98%;
    border-radius: 12px;
  }
  
  .banner-image {
    max-height: 200px;
    border-radius: 12px;
  }
}

@media (max-width: 480px) {
  .banner-carousel {
    padding: 0.5rem 0;
  }
  
  .banner-container {
    width: 100%;
    border-radius: 8px;
  }
  
  .banner-image {
    max-height: 150px;
    border-radius: 8px;
  }
}

.banner-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 20;
}

.banner-nav:hover {
  background: rgba(255, 255, 255, 1);
  color: var(--primary-green);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.banner-nav-prev {
  left: 15px;
}

.banner-nav-next {
  right: 15px;
}

.banner-indicators {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.5rem;
  padding: 0 1rem;
}

.banner-indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #ddd;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.banner-indicator.active {
  background: var(--primary-green);
  border-color: var(--primary-green);
  transform: scale(1.2);
}

.banner-indicator:hover {
  border-color: var(--primary-orange);
  background: var(--primary-orange);
}

/* Mobile optimizations for controls */
@media (max-width: 768px) {
  .banner-nav {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .banner-nav-prev {
    left: 10px;
  }
  
  .banner-nav-next {
    right: 10px;
  }
  
  .banner-indicators {
    gap: 0.6rem;
    margin-top: 1rem;
  }
  
  .banner-indicator {
    width: 12px;
    height: 12px;
  }
}

/* Promo Banner Carousel - Full Width */
.banner-promo-carousel {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.banner-promo-container {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  display: block;
  border-radius: 24px;
}

.banner-promo-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
  transition: transform 0.3s ease;
  border-radius: 24px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

/* Promo Banner Overlay */
.promo-banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  pointer-events: none;
  z-index: 15;
}

.promo-banner-content-carousel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: auto;
}

.promo-banner-content-carousel h2 {
  color: white;
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9);
  line-height: 1.2;
}

.promo-banner-cta-carousel {
  background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
  color: white;
  border: none;
  padding: 10px 24px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.5);
}

.promo-banner-cta-carousel:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.7);
}

.banner-promo-image.loading {
  opacity: 0.7;
  filter: blur(1px);
}

.banner-promo-image.loaded {
  opacity: 1;
  filter: none;
}

.banner-promo-container:hover .banner-promo-image {
  transform: scale(1.01);
}

/* Navigation controls */
.banner-promo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 20;
}

.banner-promo-nav:hover {
  background: rgba(255, 255, 255, 1);
  color: var(--primary-green);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.banner-promo-nav-prev {
  left: 20px;
}

.banner-promo-nav-next {
  right: 20px;
}

/* Indicators */
.banner-promo-indicators {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 0 1rem;
}

.banner-promo-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.banner-promo-indicator.active {
  background: var(--primary-green);
  border-color: var(--primary-green);
  transform: scale(1.3);
}

.banner-promo-indicator:hover {
  border-color: var(--primary-orange);
  background: var(--primary-orange);
}

/* Responsive para diferentes pantallas */
@media (min-width: 1200px) {
  .banner-promo-image {
    max-height: 500px;
  }
  .banner-promo-container {
    border-radius: 28px;
  }
  .banner-promo-image {
    border-radius: 28px;
  }
  .promo-banner-content-carousel h2 {
    font-size: 2rem;
  }
  .promo-banner-cta-carousel {
    font-size: 1.1rem;
    padding: 12px 28px;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .banner-promo-image {
    max-height: 400px;
  }
  .banner-promo-container {
    border-radius: 24px;
  }
  .banner-promo-image {
    border-radius: 24px;
  }
  .promo-banner-content-carousel h2 {
    font-size: 1.6rem;
  }
  .promo-banner-cta-carousel {
    font-size: 0.95rem;
    padding: 9px 22px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .banner-promo-image {
    max-height: 260px;
  }
  .banner-promo-container {
    border-radius: 20px;
  }
  .banner-promo-image {
    border-radius: 20px;
  }
  .banner-promo-nav {
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
  }
  .banner-promo-nav-prev {
    left: 15px;
  }
  .banner-promo-nav-next {
    right: 15px;
  }
  .promo-banner-overlay {
    padding: 15px 20px;
  }
  .promo-banner-content-carousel h2 {
    font-size: 1.3rem;
  }
  .promo-banner-cta-carousel {
    font-size: 0.85rem;
    padding: 8px 18px;
  }
}

@media (max-width: 480px) {
  .banner-promo-image {
    max-height: 220px;
  }
  .banner-promo-container {
    border-radius: 16px;
  }
  .banner-promo-image {
    border-radius: 16px;
  }
  .banner-promo-nav {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  .banner-promo-nav-prev {
    left: 10px;
  }
  .banner-promo-nav-next {
    right: 10px;
  }
  .banner-promo-indicators {
    gap: 0.7rem;
    margin-top: 1rem;
  }
  .banner-promo-indicator {
    width: 14px;
    height: 14px;
  }
  .promo-banner-overlay {
    padding: 10px 15px;
  }
  .promo-banner-content-carousel h2 {
    font-size: 1.1rem;
  }
  .promo-banner-cta-carousel {
    font-size: 0.8rem;
    padding: 7px 16px;
  }
}

@media (max-width: 360px) {
  .banner-promo-image {
    max-height: 200px;
  }
  .banner-promo-container {
    border-radius: 12px;
  }
  .banner-promo-image {
    border-radius: 12px;
  }
  .banner-promo-nav {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  .banner-promo-indicator {
    width: 12px;
    height: 12px;
  }
}

/* Legacy Banner Section */
.banner-section {
  margin: 1rem 0;
  text-align: center;
}

/* Nav Icon Large */

/* Buttons */
.btn-primary {
  background: var(--delaferia-blue);
  color: var(--background-primary);
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-small);
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition-fast);
  box-shadow: none;
  position: relative;
  overflow: hidden;
  font-size: 14px;
  height: 40px;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--secondary-green), var(--primary-orange));
  transform: translateY(-3px);
  box-shadow: var(--shadow-medium), var(--shadow-glow);
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary.auth-btn {
  height: auto;
  min-height: 48px;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.btn-secondary {
  background: #6c757d;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
}

.btn-secondary:hover {
  background: #545b62;
  transform: translateY(-2px);
}

.btn-back {
  background: var(--background-light);
  color: var(--dark-gray);
  border: 1px solid var(--border-color);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-back:hover {
  background: var(--border-color);
}

.btn-edit {
  background: var(--primary-orange);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-edit:hover {
  background: #e85a00;
}

.btn-danger {
  background: #dc3545;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-danger:hover {
  background: #c82333;
}

/* AI Uploader Styles */
.ai-uploader {
  background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(245,245,220,0.8));
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: var(--border-radius);
  border: 3px dashed var(--primary-orange);
  margin-bottom: 2rem;
  position: relative;
  box-shadow: var(--shadow-light);
}

.ai-uploader::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: var(--border-radius);
  background: linear-gradient(45deg, var(--primary-green), var(--primary-orange), var(--secondary-green));
  z-index: -1;
  opacity: 0.3;
}

.ai-uploader h3 {
  color: var(--primary-green);
  margin-bottom: 1rem;
}

.ai-input-section {
  margin-bottom: 1.5rem;
}

.ai-textarea {
  width: 100%;
  padding: 1rem;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 1rem;
}

.ai-textarea:focus {
  outline: none;
  border-color: var(--primary-green);
}

.ai-analyze-btn {
  background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: var(--transition);
}

.ai-analyze-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ai-analyze-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(144, 238, 144, 0.4);
}

.analyzing-indicator {
  text-align: center;
  margin: 2rem 0;
}

.loading-bar {
  width: 100%;
  height: 4px;
  background: var(--border-color);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 1rem;
}

.loading-bar::after {
  content: '';
  display: block;
  width: 30%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

.analyzed-result {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  border: 2px solid var(--primary-green);
  margin-top: 2rem;
}

.product-preview {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.product-preview img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}

.product-details {
  flex: 1;
  min-width: 250px;
}

.result-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.use-product-btn,
.discard-btn {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
}

.use-product-btn {
  background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
  color: white;
}

.discard-btn {
  background: #6c757d;
  color: white;
}

.use-product-btn:hover,
.discard-btn:hover {
  transform: translateY(-2px);
}

/* Manual Upload Styles */
.manual-upload {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  border: 2px solid var(--primary-green);
  margin-top: 2rem;
}

.manual-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.upload-mode-selector {
  text-align: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  border: 2px solid var(--border-color);
}

.upload-mode-selector h3 {
  color: var(--primary-green);
  margin-bottom: 1rem;
}

.upload-mode-selector .btn-primary.active {
  background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

/* Cart Styles */
.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
}

.cart-sidebar {
  background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
  width: 420px;
  max-width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  animation: slideInCart 0.3s ease-out;
}

@keyframes slideInCart {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.cart-header {
  padding: 1.5rem;
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
  position: relative;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

.cart-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
}

.cart-header h2, .cart-header h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.close-cart-btn, .close-cart {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.close-cart-btn:hover, .close-cart:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.cart-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.empty-cart {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.empty-cart p {
  margin-bottom: 1.5rem;
  color: #666;
  font-size: 1.1rem;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.cart-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  margin: 0.5rem 0;
  background: white;
  border-radius: 12px;
  border: 1px solid #e8e8e8;
  transition: all 0.3s ease;
}

.cart-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
  border: 2px solid #f0f0f0;
}

.cart-item-details {
  flex: 1;
}

.cart-item-info {
  flex: 1;
}

.cart-item-info h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: #2c3e50;
  font-weight: 600;
}

.cart-item-details h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: #2c3e50;
  font-weight: 600;
}

.cart-item-price {
  color: #4CAF50;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0.2rem;
}

.quantity-btn {
  background: #4CAF50;
  color: white;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity-btn:hover {
  background: #45a049;
  transform: scale(1.1);
}

.quantity-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quantity {
  min-width: 30px;
  text-align: center;
  font-weight: 600;
  color: #2c3e50;
}

.remove-btn, .remove-item {
  background: #ff6b6b;
  border: none;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  margin-left: 0.5rem;
  transition: all 0.2s ease;
  color: white;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remove-btn:hover, .remove-item:hover {
  background: #ff5252;
  transform: scale(1.05);
}

.remove-btn:disabled, .remove-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cart-footer {
  padding: 1.5rem;
  border-top: 2px solid #e8e8e8;
  background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
}

.cart-total {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 1.3rem;
  color: #2c3e50;
  font-weight: 700;
}

.cart-actions {
  display: flex;
  gap: 1rem;
}

.cart-actions button {
  flex: 1;
}

/* Estilos para Mis Compras */
.compras-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  padding-top: 1rem;
  background: var(--beige-claro);
}

.compras-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--verde-principal);
}

.compras-header h2 {
  color: var(--verde-principal);
  margin: 0;
}

.filtro-select {
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: white;
  color: var(--dark-gray);
}

.compras-lista {
  display: grid;
  gap: 1.5rem;
}

.compra-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border: 1px solid var(--border-color);
}

.compra-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--background-light);
}

.compra-info h3 {
  margin: 0;
  color: var(--primary-green);
}

.compra-info p {
  margin: 0.25rem 0 0 0;
  color: var(--gray);
  font-size: 0.9rem;
}

.estado-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.compra-productos {
  margin: 1rem 0;
}

.producto-compra {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--background-light);
}

.producto-compra:last-child {
  border-bottom: none;
}

.producto-imagen {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

.producto-detalles h4 {
  margin: 0;
  color: var(--dark-gray);
  font-size: 0.9rem;
}

.producto-detalles p {
  margin: 0.25rem 0;
  color: var(--gray);
  font-size: 0.8rem;
}

.producto-precio {
  font-weight: 600;
  color: var(--primary-orange);
}

.compra-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--background-light);
}
.compra-total {
  font-size: 1.1rem;
  color: var(--dark-gray);
}

.compra-acciones {
  display: flex;
  gap: 0.5rem;
}

.no-compras {
  text-align: center;
  padding: 3rem;
  color: var(--gray);
}

.no-compras p {
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

/* Main content spacing for pages with navigation */
.compras-main {
  margin-top: 0;
}

.perfil-main {
  margin-top: 0;
}

.vendedor-main {
  margin-top: 0;
}

/* Sub-navigation styles */
.sub-navigation {
  display: flex;
  gap: 2px;
  margin: 1rem 0;
  padding: 1rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.sub-nav-btn {
  padding: 0.8rem 1.4rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: #495057;
  transition: all 0.3s ease;
}

.sub-nav-btn:hover {
  background: #e9ecef;
  color: #343a40;
}

.sub-nav-btn.active {
  background: var(--primary-green);
  color: white;
  border-color: var(--primary-green);
}

.sub-content {
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-top: 1rem;
}

/* Dropdown menu styles */
.dropdown-menu {
  position: relative;
}

.dropdown-arrow {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.dropdown-menu.open .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  min-width: 200px;
  padding: 0.5rem 0;
}

.dropdown-content button {
  width: 100%;
  padding: 0.8rem 1rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.9rem;
  color: #495057;
  transition: background 0.2s ease;
}

.dropdown-content button:hover {
  background: #f8f9fa;
  color: var(--primary-green);
}

/* Analytics dashboard styles */
.analytics-dashboard {
  padding: 2rem;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.analytics-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.analytics-card h3 {
  margin: 0 0 1rem 0;
  color: var(--dark-gray);
  font-size: 1.1rem;
}

.chart-placeholder {
  text-align: center;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 8px;
  color: #666;
}

.mock-chart {
  font-size: 3rem;
  margin-top: 1rem;
}

.top-products, .category-revenue {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.top-product-item, .revenue-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem;
  background: #f8f9fa;
  border-radius: 6px;
}

.buyer-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
}

.stat-item {
  text-align: center;
}

.stat-item h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  color: #666;
}

.stat-item p {
  margin: 0;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--primary-green);
}

/* Clips integration in dashboard */
.clips-section {
  margin-top: 0;
  padding: 0;
}

.clips-container-dashboard {
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
}

.clips-container-dashboard .clips-feed {
  background: transparent;
  padding: 0;
  min-height: calc(100vh - 160px);
}

.clips-container-dashboard .clips-header {
  display: none; /* Hide the header in dashboard view */
}

.clips-container-dashboard .clips-container {
  max-width: 100%;
  background: #f8ead1;
  border-radius: 15px;
  margin: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Product Variants Section Styles - Layout cuadrado compacto sin scroll */
.product-variants-section {
  margin: 0.5rem 0;
  padding: 0.5rem;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.75rem;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 1;
  height: auto;
  min-height: 520px;
  max-height: none;
  overflow: visible;
}

.product-variants-section.has-variants {
  grid-template-areas: 
    "variants purchase"
    "info purchase";
  grid-template-columns: 1fr 1.4fr;
  grid-template-rows: auto 1fr;
  align-items: start;
}

.product-variants-section.no-variants {
  grid-template-areas: 
    "info purchase"
    "shipping purchase";
  grid-template-columns: 1fr 1.5fr;
  grid-template-rows: auto auto;
  align-items: start;
}

.product-variants-section * {
  display: inherit !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.variants-header {
  margin-bottom: 0.3rem;
}

.variants-header h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.1rem;
  color: #333;
}

.variants-header p {
  font-size: 0.7rem;
  color: #6c757d;
  margin: 0;
}

.variant-group {
  margin-bottom: 0.4rem;
  display: block !important;
  visibility: visible !important;
}

.variant-group:last-child {
  margin-bottom: 0;
}

.variant-group-title {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  letter-spacing: -0.025em;
}

.selected-value {
  color: #059669;
  font-weight: 500;
  background: #ecfdf5;
  padding: 0.05rem 0.2rem;
  border-radius: 3px;
  font-size: 0.65rem;
  border: 1px solid #a7f3d0;
}

.variant-options-grid {
  display: grid !important;
  gap: 0.15rem;
  grid-template-columns: repeat(2, 1fr);
  visibility: visible !important;
  opacity: 1 !important;
  width: 100%;
  max-width: 100%;
}

.variant-option {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.1rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  min-height: 28px;
  max-height: 32px;
  visibility: visible !important;
  opacity: 1 !important;
  font-weight: 500;
  text-align: center;
  font-size: 0.65rem;
  word-break: break-word;
  overflow: hidden;
}

.variant-option:hover {
  border-color: #4CAF50;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
}

.variant-option.selected {
  border-color: #4CAF50;
  background: #e8f5e8;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
  transform: translateY(-1px);
}

.variant-option.out-of-stock {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f8f9fa;
  border-color: #d1d5db;
}

.variant-option.out-of-stock:hover {
  transform: none;
  border-color: #d1d5db;
  box-shadow: none;
}

.variant-name {
  font-weight: 500;
  font-size: 0.56rem;
  text-align: center;
  color: #2d3748;
  line-height: 1.0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.variant-price {
  font-size: 0.6rem;
  color: #4CAF50;
  font-weight: 600;
  margin-top: 0.05rem;
}

.check-mark {
  position: absolute;
  top: 1px;
  right: 2px;
  color: #4CAF50;
  font-weight: bold;
  font-size: 0.7rem;
}

.stock-status {
  font-size: 0.6rem;
  color: #dc3545;
  font-weight: 500;
  margin-top: 0.05rem;
}

/* Columna de variantes compacta - Cuadrante superior izquierdo */
.variants-column-compact {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  height: fit-content;
  min-height: 200px;
  grid-area: variants;
  overflow: visible;
}

.variant-options-grid-compact {
  display: grid !important;
  gap: 0.1rem;
  grid-template-columns: repeat(2, 1fr);
  visibility: visible !important;
  opacity: 1 !important;
  width: 100%;
  max-width: 100%;
}

.variant-option-compact {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.05rem;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  background: white;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  min-height: 26px;
  max-height: 30px;
  visibility: visible !important;
  opacity: 1 !important;
  font-weight: 500;
  text-align: center;
  font-size: 0.60rem;
  word-break: break-word;
  overflow: hidden;
}

.variant-option-compact:hover {
  border-color: #4CAF50;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.2);
}

.variant-option-compact.selected {
  border-color: #4CAF50;
  background: #e8f5e8;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
  transform: translateY(-1px);
}

/* Columna de compra ampliada - Cuadrantes derecho completo */
.purchase-column-expanded {
  background: white;
  border-radius: 8px;
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: fit-content;
  min-height: 400px;
  grid-area: purchase;
  position: relative;
  overflow: visible;
}

/* Área de envío para productos sin variantes */
.shipping-info-section {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  height: fit-content;
  min-height: 120px;
  grid-area: shipping;
  overflow: visible;
}

/* Información integrada del producto - Cuadrante inferior izquierdo */
.integrated-product-info {
  background: white;
  border-radius: 8px;
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  height: fit-content;
  min-height: 180px;
  grid-area: info;
  overflow: visible;
}

.integrated-product-info.full-width {
  grid-area: info;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.6rem;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  margin: 0;
}

.info-label {
  font-size: 0.75rem;
  color: #6c757d;
  font-weight: 500;
}

.condition-badge {
  font-size: 0.8rem;
  font-weight: 600;
  color: #28a745;
  background: #e8f5e8;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  display: inline-block;
  width: fit-content;
}

.category-name {
  font-size: 0.8rem;
  color: #495057;
  font-weight: 500;
}

.seller-name {
  font-size: 0.8rem;
  color: #007bff;
  font-weight: 600;
}

/* ✅ NUEVO: Estilo para vendedor clickeable */
.seller-name.clickable {
  transition: all 0.3s ease;
  border-radius: 4px;
  padding: 2px 6px;
  margin: -2px -6px;
  display: inline-block;
}

.seller-name.clickable:hover {
  background: rgba(0, 123, 255, 0.1);
  color: #0056b3;
  transform: translateX(2px);
}

.seller-rating {
  font-size: 0.7rem;
  color: #6c757d;
  margin-top: 0.1rem;
}

/* Contenedor horizontal para precio y cantidad en móvil */
.price-quantity-horizontal {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 0.3rem;
}

.purchase-column-expanded .pricing-section {
  padding-bottom: 0.3rem;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 0.3rem;
  flex-shrink: 0;
}

.purchase-column-expanded .quantity-selector {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  margin-bottom: 0.3rem;
  flex-shrink: 0;
}

.purchase-column-expanded .quantity-controls {
  border: 2px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 40px;
}

.purchase-column-expanded .quantity-controls button {
  background: white;
  border: none;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  transition: all 0.3s ease;
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.purchase-column-expanded .quantity-controls button:hover:not(:disabled) {
  background: #f8f9fa;
  color: #4CAF50;
}

.purchase-column-expanded .quantity-controls button:disabled {
  color: #ccc;
  cursor: not-allowed;
  background: #f5f5f5;
  opacity: 0.6;
}

.purchase-column-expanded .quantity-input {
  padding: 0.5rem 0.8rem;
  background: white;
  border: none;
  border-left: 1px solid #e9ecef;
  border-right: 1px solid #e9ecef;
  font-weight: 600;
  min-width: 60px;
  max-width: 80px;
  text-align: center;
  font-size: 1rem;
  outline: none;
  height: 40px;
}

.purchase-column-expanded .stock-info {
  color: #6c757d;
  font-size: 0.805rem; /* Aumentado +15% (0.7rem * 1.15) */
  white-space: nowrap;
}

.purchase-column-expanded .shipping-info {
  margin: 0.4rem 0;
  flex-shrink: 0;
}

.purchase-column-expanded .shipping-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
}

.purchase-column-expanded .shipping-item strong {
  font-size: 0.75rem;
}

.purchase-column-expanded .shipping-item p {
  font-size: 0.7rem;
  margin: 0;
}

.purchase-column-expanded .product-actions {
  display: flex;
  flex-direction: row;
  gap: 0.3rem;
  width: 100%;
  margin-top: auto;
  flex-shrink: 0;
}

/* Botones de compra - Estilos con alta especificidad */
.product-variants-section .purchase-column-expanded .btn-buy-now,
.product-variants-section .purchase-column-expanded .btn-add-cart {
  width: 100% !important;
  padding: 0.9rem 1rem !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  min-height: 50px !important;
  max-height: 54px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  flex-direction: row !important;
  border: 2px solid !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Botón Comprar Ahora */
.product-variants-section .purchase-column-expanded .btn-buy-now {
  background: #4CAF50 !important;
  color: white !important;
  border-color: #4CAF50 !important;
}

.product-variants-section .purchase-column-expanded .btn-buy-now::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  transition: left 0.5s ease !important;
  z-index: 0 !important;
}

.product-variants-section .purchase-column-expanded .btn-buy-now:hover {
  background: #45a049 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4) !important;
  border-color: #45a049 !important;
}

.product-variants-section .purchase-column-expanded .btn-buy-now:hover::before {
  left: 100% !important;
}

/* Botón Agregar al Carrito */
.product-variants-section .purchase-column-expanded .btn-add-cart {
  background: white !important;
  color: #4CAF50 !important;
  border-color: #4CAF50 !important;
  border-width: 3px !important;
}

.product-variants-section .purchase-column-expanded .btn-add-cart::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.15), transparent) !important;
  transition: left 0.5s ease !important;
  z-index: 0 !important;
}

.product-variants-section .purchase-column-expanded .btn-add-cart:hover {
  background: rgba(76, 175, 80, 0.1) !important;
  border-color: #45a049 !important;
  color: #45a049 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.3) !important;
}

.product-variants-section .purchase-column-expanded .btn-add-cart:hover::before {
  left: 100% !important;
}

/* Iconos y texto de los botones */
.product-variants-section .purchase-column-expanded .btn-buy-now svg,
.product-variants-section .purchase-column-expanded .btn-add-cart svg {
  position: relative !important;
  z-index: 1 !important;
  width: 16px !important;
  height: 16px !important;
}

.product-variants-section .purchase-column-expanded .btn-buy-now span,
.product-variants-section .purchase-column-expanded .btn-add-cart span {
  position: relative !important;
  z-index: 1 !important;
}

/* Estados deshabilitados */
.product-variants-section .purchase-column-expanded .btn-buy-now:disabled,
.product-variants-section .purchase-column-expanded .btn-add-cart:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.product-variants-section .purchase-column-expanded .btn-buy-now:disabled:hover,
.product-variants-section .purchase-column-expanded .btn-add-cart:disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Borde más visible para agregar al carrito */
.product-variants-section .purchase-column-expanded .btn-add-cart {
  border-width: 4px !important;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2) !important;
}

.product-variants-section .purchase-column-expanded .btn-add-cart:hover {
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4) !important;
}

/* Color variant specific styles - Diseño minimalista y sofisticado */
.color-variant {
  min-width: 60px;
  height: 36px;
  background: #ffffff;
  border: 2px solid #cbd5e0 !important;
  border-radius: 6px !important;
  padding: 0.3rem 0.5rem !important;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 0.96rem !important;
  color: #475569;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sobreescribir específicamente el texto dentro de los botones de variantes */
.color-variant .variant-name,
.size-variant .variant-name,
.variant-option-compact .variant-name {
  font-size: 0.56rem !important;
  line-height: 1.1 !important;
}

.color-variant span,
.size-variant span {
  font-size: 0.60rem !important;
}

.variant-option-compact {
  font-size: 0.60rem !important;
}

.color-variant:hover {
  border-color: #94a3b8 !important;
  background: #f8fafc !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: #334155;
}

.color-variant.selected {
  border-color: var(--primary-green) !important;
  background: var(--primary-green) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
  font-weight: 600;
}

.color-variant .color-preview {
  display: none; /* Eliminar completamente el círculo de color */
}

/* Size variant specific styles - Diseño minimalista y profesional */
.size-variant {
  min-width: 55px;
  height: 36px;
  background: #ffffff;
  border: 2px solid #cbd5e0 !important;
  border-radius: 6px !important;
  padding: 0.3rem 0.5rem !important;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 0.96rem !important;
  color: #475569;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-variant:hover {
  border-color: #94a3b8 !important;
  background: #f8fafc !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: #334155;
}

.size-variant.selected {
  border-color: #4f46e5 !important;
  background: #4f46e5 !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
  font-weight: 600;
}

/* Model variant specific styles - Mejorado con bordes más marcados */
.model-variant {
  min-width: 140px;
  background: linear-gradient(135deg, #ffffff, #f8f9fa);
  border: 3px solid #8b5cf6 !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  color: #2d3748;
  text-align: center;
  box-shadow: 0 3px 8px rgba(139, 92, 246, 0.15);
}

.model-variant:hover {
  border-color: #7c3aed !important;
  background: linear-gradient(135deg, #faf5ff, #f3e8ff) !important;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3);
  color: #6d28d9;
}

.model-variant.selected {
  border-color: #6d28d9 !important;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
  color: white !important;
  box-shadow: 0 6px 20px rgba(109, 40, 217, 0.5);
  transform: translateY(-2px) scale(1.02);
}

.variant-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #2d3748;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e2e8f0;
}

.selected-variant {
  color: #4CAF50;
  font-weight: 700;
  background: #e8f5e8;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.9rem;
}

.variant-options {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* Color Variants */
.color-options {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.color-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.8rem;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.color-option:hover {
  border-color: #4CAF50;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

.color-option.selected {
  border-color: #4CAF50;
  background: #e8f5e8;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.color-option.out-of-stock {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f8f9fa;
}

.color-preview {
  display: none;
}

.color-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.color-name {
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  color: #495057;
}

/* Size Variants */
.size-options {
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}

.size-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 0.6rem;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 72px;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.size-option:hover {
  border-color: #4CAF50;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

.size-option.selected {
  border-color: #4CAF50;
  background: #e8f5e8;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.size-option.out-of-stock {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f8f9fa;
}

.size-label {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

/* Model Variants */
.model-options {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.model-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.model-option:hover {
  border-color: #4CAF50;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

.model-option.selected {
  border-color: #4CAF50;
  background: #e8f5e8;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.model-option.out-of-stock {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f8f9fa;
}

.model-name {
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  color: #333;
  margin-bottom: 0.25rem;
}

/* Common variant styles */
.variant-price {
  font-size: 0.8rem;
  color: #4CAF50;
  font-weight: 600;
  margin-top: 0.25rem;
}

.stock-label {
  font-size: 0.7rem;
  color: #dc3545;
  font-weight: 500;
  margin-top: 0.25rem;
  background: #fee;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
}

.selected-check {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 20px;
  height: 20px;
  background: #4CAF50;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: bold;
}

.size-guide-btn {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  color: #6c757d;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
}

.size-guide-btn:hover {
  background: #e9ecef;
  color: #495057;
}

/* Variantes compactas para área de precio */
.pricing-variants-compact {
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(248, 249, 250, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.pricing-variants-compact .variant-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.5rem;
}

.pricing-variants-compact .variant-options {
  gap: 0.5rem;
}

.pricing-variants-compact .color-option,
.pricing-variants-compact .size-option,
.pricing-variants-compact .model-option {
  padding: 0.6rem;
  border-radius: 8px;
  min-height: 60px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pricing-variants-compact .color-preview {
  width: 32px;
  height: 32px;
}

.pricing-variants-compact .variant-price {
  font-size: 0.75rem;
  font-weight: 600;
  color: #16a34a;
}

/* Responsive variants */
@media (max-width: 768px) {
  .variant-options {
    gap: 0.5rem;
  }
  
  .color-options {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
  
  .size-options {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  }
  
  .model-options {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
  
  .color-option, .size-option, .model-option {
    padding: 0.5rem;
  }
  
  .variant-title {
    font-size: 1rem;
  }
  
  .pricing-variants-compact {
    margin: 0.75rem 0;
    padding: 0.8rem;
  }
  
  .pricing-variants-compact .color-option,
  .pricing-variants-compact .size-option,
  .pricing-variants-compact .model-option {
    padding: 0.5rem;
    min-height: 50px;
  }
}

/* Unified Variants Styles */
.unified-variants-section {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.variants-section-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.variants-section-title::before {
  content: "🎨";
  font-size: 1.1rem;
}

.unified-variant-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  margin-bottom: 0.75rem;
  background: white;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.unified-variant-item:hover {
  border-color: #4CAF50;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.1);
}

.unified-variant-item:last-child {
  margin-bottom: 0;
}

.variant-info {
  flex: 1;
}

.variant-name {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.25rem;
}

.variant-attributes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.variant-attribute {
  font-size: 0.85rem;
  color: #6c757d;
  background: #e9ecef;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.variant-details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  margin: 0 1rem;
}

.variant-price-display {
  font-size: 1.1rem;
  font-weight: 600;
  color: #4CAF50;
}

.variant-stock {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
}

.variant-stock.in-stock {
  background: #d4edda;
  color: #155724;
}

.variant-stock.out-of-stock {
  background: #f8d7da;
  color: #721c24;
}

.unified-variant-select {
  padding: 0.5rem 1rem;
  border: 2px solid #4CAF50;
  border-radius: 6px;
  background: white;
  color: #4CAF50;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.unified-variant-select:hover {
  background: #4CAF50;
  color: white;
}

.unified-variant-select.selected {
  background: #4CAF50;
  color: white;
}

.unified-variant-select:disabled {
  background: #f8f9fa;
  color: #6c757d;
  border-color: #dee2e6;
  cursor: not-allowed;
}

/* Responsive unified variants */
@media (max-width: 768px) {
  .unified-variant-item {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  
  .variant-details {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0;
  }
  
  .unified-variant-select {
    width: 100%;
  }
}

/* Overview dashboard styles */
.dashboard-overview {
  padding: 2rem;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.overview-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
}

.overview-card h3 {
  margin: 0 0 1rem 0;
  color: #666;
  font-size: 1rem;
}

.overview-number {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--primary-green);
  margin-bottom: 0.5rem;
}

.overview-card p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}

.recent-activity {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.recent-activity h3 {
  margin: 0 0 1.5rem 0;
  color: var(--dark-gray);
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.activity-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-green);
  color: white;
  border-radius: 50%;
}

.activity-content p {
  margin: 0 0 0.2rem 0;
  font-weight: 500;
  color: var(--dark-gray);
}

.activity-content small {
  color: #666;
}

/* Edit products list styles */
.edit-products-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.edit-product-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
}

.edit-product-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}

.edit-product-info {
  flex: 1;
}

.edit-product-info h4 {
  margin: 0 0 0.5rem 0;
  color: var(--dark-gray);
}

.edit-product-info p {
  margin: 0;
  color: var(--primary-green);
  font-weight: 600;
}

/* Wishlist styles */
.wishlist-content {
  padding: 2rem;
}

.wishlist-header {
  margin-bottom: 2rem;
}

.wishlist-header h3 {
  margin: 0 0 0.5rem 0;
  color: var(--dark-gray);
}

.wishlist-header p {
  margin: 0;
  color: #666;
}

.empty-wishlist {
  text-align: center;
  padding: 4rem 2rem;
}

.wishlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

.wishlist-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.wishlist-item:hover {
  transform: translateY(-2px);
}

.wishlist-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.wishlist-info {
  padding: 1.5rem;
}

.wishlist-info h4 {
  margin: 0 0 0.5rem 0;
  color: var(--dark-gray);
}

.wishlist-price {
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary-green);
}

.wishlist-actions {
  display: flex;
  gap: 0.5rem;
}

.wishlist-actions button {
  flex: 1;
  padding: 0.8rem;
  border-radius: 6px;
  font-size: 0.9rem;
}

/* Pedidos timeline styles */
.pedidos-content {
  padding: 2rem;
}

.pedidos-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
}

.stat-card h3 {
  margin: 0 0 0.5rem 0;
  color: #666;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: var(--primary-green);
}

.pedidos-timeline {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.pedidos-timeline h3 {
  margin: 0 0 1.5rem 0;
  color: var(--dark-gray);
}

.pedido-timeline-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.timeline-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-green);
  color: white;
  border-radius: 50%;
}

.timeline-content h4 {
  margin: 0 0 0.5rem 0;
  color: var(--dark-gray);
}

.timeline-content small {
  color: #666;
}

/* Estilos para Perfil */
.perfil-content {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  align-items: start;
}

.perfil-avatar {
  /* ✅ HALLAZGO #27: Mayor énfasis en la sección del avatar */
  text-align: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  padding: 2.5rem 2rem;
  border-radius: 16px;
  box-shadow: 
    0 6px 20px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.05);
  border: 2px solid rgba(34, 139, 34, 0.1);
}

.avatar-container {
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
}

.avatar-circle {
  /* ✅ HALLAZGO #27: Mejorar jerarquía visual del avatar */
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--verde-principal), var(--naranja-principal));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: bold;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  
  /* Jerarquía visual mejorada */
  border: 5px solid white;
  box-shadow: 
    0 0 0 3px var(--verde-principal),
    0 10px 30px rgba(34, 139, 34, 0.4),
    0 4px 15px rgba(0, 0, 0, 0.2);
}

.avatar-circle:hover {
  transform: scale(1.08);
  box-shadow: 
    0 0 0 3px var(--naranja-principal),
    0 12px 35px rgba(255, 140, 0, 0.5),
    0 6px 20px rgba(0, 0, 0, 0.25);
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-upload-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 50%;
  cursor: pointer;
}

.avatar-container:hover .avatar-upload-overlay {
  opacity: 1;
}

.avatar-upload-text {
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

.avatar-input {
  display: none;
}

.change-photo-btn {
  background: var(--primary-green);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.change-photo-btn:hover {
  background: var(--secondary-green);
  transform: translateY(-2px);
}

.perfil-avatar h3 {
  color: var(--verde-principal);
  margin: 0.5rem 0;
}

.perfil-avatar p {
  color: #666;
  margin: 0;
}

.perfil-form {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--dark-gray);
}

.form-group input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.9rem;
}

.form-group p {
  padding: 0.75rem 0;
  color: var(--gray);
  border-bottom: 1px solid var(--background-light);
}

.perfil-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--background-light);
}

/* Responsive para Modern Navbar */
@media (max-width: 1200px) {
  .quick-categories {
    display: none;
  }

  .secondary-menu {
    gap: 1.5rem;
  }

  .secondary-item {
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
  }
}

@media (max-width: 768px) {
  .navbar-top {
    display: none;
  }

  .navbar-main .navbar-container {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }

  .categories-trigger {
    width: 100%;
    justify-content: center;
  }

  .search-container-advanced {
    width: 100%;
    max-width: none;
  }

  .mega-dropdown {
    width: calc(100vw - 2rem);
    left: 1rem;
  }

  .categories-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
  }

  .secondary-menu {
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }

  .secondary-item {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
}

@media (max-width: 480px) {
  .quick-menu {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .quick-menu-item {
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
  }

  .categories-trigger {
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
  }

  .search-input-advanced {
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
  }

  .search-btn-advanced {
    padding: 0.8rem 1.2rem;
    min-width: 100px;
  }

  .navbar-secondary {
    display: none;
  }
}

/* Filtros estilo MercadoLibre */
.filters-section {
  background: white;
  border-radius: var(--border-radius);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-card);
}

.filters-header {
  display: flex;
  justify-content: between;
  align-items: center;
  margin-bottom: 1rem;
}

.filters-header h4 {
  margin: 0;
  color: var(--text-dark);
  font-size: 0.9rem;
  font-weight: 500;
}

.clear-filters {
  background: none;
  border: none;
  color: var(--primary-green);
  cursor: pointer;
  font-size: 0.8rem;
  text-decoration: underline;
}

.filter-group {
  margin-bottom: 1rem;
}

.filter-group h5 {
  margin: 0 0 0.5rem 0;
  color: var(--text-dark);
  font-size: 0.85rem;
  font-weight: 500;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-gray);
}

.filter-option input[type="checkbox"] {
  accent-color: var(--primary-green);
}

.filter-option:hover {
  color: var(--text-dark);
}

/* Resultados y ordenamiento */
.results-header {
  background: white;
  padding: 1rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  box-shadow: var(--shadow-card);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.results-count {
  color: var(--text-gray);
  font-size: 0.85rem;
}

.sort-options {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.sort-select {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-small);
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  background: white;
  cursor: pointer;
}

/* Badge de envío gratis */
.free-shipping-badge {
  background: var(--primary-green);
  color: white;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 500;
  margin-left: 0.5rem;
}

/* Responsive Design - Optimizado para móvil */
@media (max-width: 1200px) {
  .dashboard-layout {
    grid-template-columns: 200px 1fr;
    gap: 0.8rem;
  }

  .nav-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
  }
}

@media (max-width: 1200px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
  }
  
  .categories-sidebar {
    display: none;
  }

  .nav-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
  }

  .nav-card {
    padding: 1.5rem;
  }

  .nav-card-icon {
    width: 70px;
    height: 70px;
    font-size: 2.5rem;
  }

  .vendedor-main {
    padding: 1rem;
  }
}

@media (max-width: 768px) {
  .header-content {
    padding: 0 1rem;
  }

  .header-comprador {
    min-height: 70px;
  }

  .header-comprador-top {
    padding: 0.5rem 0;
  }

  .header-comprador-nav {
    gap: 0.2rem;
    top: 0.3rem;
    right: 0;
  }

  .logo-comprador {
    width: 160px;
  }

  .dashboard-header {
    height: 185px;
  }

  .navbar-top {
    height: 50px;
  }

  .dashboard-main {
    padding: 0.5rem;
    padding-bottom: 120px;
  }

  .vendedor-main {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .nav-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .nav-card {
    padding: 1.5rem;
    flex-direction: column;
    text-align: center;
  }

  .nav-card-icon {
    width: 60px;
    height: 60px;
    font-size: 2rem;
    margin: 0 auto 1rem;
  }

  .nav-card-content h3 {
    font-size: 1.3rem;
  }

  .nav-card-content p {
    font-size: 1rem;
  }

  .nav-card-description {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .header-content {
    padding: 0 0.5rem;
  }

  .vendedor-main {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .nav-card {
    padding: 1rem;
  }

  .nav-card-icon {
    width: 50px;
    height: 50px;
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
  }

  .nav-card-content h3 {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
  }

  .nav-card-content p {
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
  }

  .nav-card-description {
    font-size: 0.8rem;
  };
    text-align: center;
    gap: 1rem;
  }

  .nav-card-icon {
    width: 60px;
    height: 60px;
    font-size: 2rem;
  }

  .nav-card-content h3 {
    font-size: 1.3rem;
  }

  .nav-card-content p {
    font-size: 1rem;
  }

  .search-container {
    padding: 0 1rem;
  }

  .search-input {
    padding: 0.8rem;
    font-size: 0.9rem;
  }

  .search-btn {
    padding: 0.8rem 1rem;
  }

  .category-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.8rem;
  }

  .category-item {
    padding: 1rem;
  }

  .category-icon {
    width: 45px;
    height: 45px;
  }

  .product-card {
    min-height: 310px;
  }

  .vendor-tabs {
    flex-wrap: wrap;
  }

  .vendor-tabs .tab {
    flex: 1;
    min-width: 100px;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
  }

  .tab-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .sales-summary {
    grid-template-columns: 1fr;
  }

  .sales-table {
    overflow-x: auto;
  }

  .product-preview {
    flex-direction: column;
  }

  .result-actions {
    flex-direction: column;
  }

  .cart-sidebar {
    width: 100vw;
  }

  .perfil-content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .compra-footer {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .compra-acciones {
    justify-content: center;
  }

  .ai-uploader {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .manual-form {
    gap: 0.8rem;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 0.7rem;
    font-size: 0.9rem;
  }

/* Banner Responsive */
@media (max-width: 768px) {
  .banner-nav {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }

  .banner-nav-prev {
    left: 5px;
  }

  .banner-nav-next {
    right: 5px;
  }

  .banner-indicator {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 480px) {
  .auth-container {
    padding: 0.5rem;
  }

  .auth-card {
    padding: 1rem;
  }

  .banner-carousel {
    margin: 0.5rem 0;
  }

  .banner-nav {
    width: 30px;
    height: 30px;
    font-size: 0.9rem;
  }

  .header-content {
    padding: 0 0.5rem;
  }

  .logo-comprador {
    width: 140px;
  }

  .header-comprador-nav {
    gap: 0.1rem;
  }

  .icon-img-large {
    width: 28px;
    height: 28px;
  }

  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .category-item {
    padding: 0.8rem;
  }

  .category-icon {
    width: 35px;
    height: 35px;
  }

  .dashboard-tabs {
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .dashboard-tabs .tab {
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
  }

  .search-container {
    padding: 0 0.5rem;
  }

  .dashboard-main {
    padding: 0.3rem;
  }

  .product-card {
    min-height: 290px;
  }

  .product-info {
    padding: 1rem;
  }

  .product-info h3 {
    font-size: 0.9rem;
  }

  .product-price {
    font-size: 1.3rem;
  }
}

/* Checkout Styles */
.checkout-container {
  min-height: 100vh;
  background: #f8f9fa;
}

.checkout-main {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.checkout-progress {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.checkout-progress .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.checkout-progress .step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 15px;
  right: -50%;
  width: 100%;
  height: 2px;
  background: #e9ecef;
  z-index: 1;
}

.checkout-progress .step.completed:not(:last-child)::after {
  background: var(--primary-green);
}

.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e9ecef;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 2;
}

.step.active .step-number {
  background: var(--primary-green);
  color: white;
}

.step.completed .step-number {
  background: var(--primary-green);
  color: white;
}

.step-title {
  font-size: 0.8rem;
  color: #6c757d;
  text-align: center;
}

.step.active .step-title {
  color: var(--primary-green);
  font-weight: 600;
}

.checkout-content {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.step-content h2 {
  margin: 0 0 1.5rem 0;
  color: var(--dark-gray);
}

/* Order Summary Styles */
.order-summary {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.order-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #f8f9fa;
}

.order-item:last-child {
  border-bottom: none;
}

.order-item .item-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

.order-item .item-details {
  flex: 1;
}

.order-item .item-details h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

.order-item .item-details p {
  margin: 0;
  color: #6c757d;
  font-size: 0.9rem;
}

.order-item .item-price {
  font-weight: 600;
  color: var(--primary-green);
}

.order-totals {
  border-top: 2px solid #e9ecef;
  padding-top: 1rem;
  margin-top: 1rem;
}

.total-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.total-line.total {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--primary-green);
  border-top: 1px solid #e9ecef;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

/* Shipping Form Styles */
.shipping-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--dark-gray);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-green);
  box-shadow: 0 0 0 2px rgba(34, 139, 34, 0.2);
}

/* Shipping Methods Styles */
.shipping-methods {
  margin: 1.5rem 0;
}

.shipping-methods h3 {
  margin: 0 0 1rem 0;
  color: var(--dark-gray);
}

.shipping-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.shipping-option {
  display: flex;
  align-items: center;
  padding: 1rem;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.shipping-option:hover {
  border-color: var(--primary-green);
  background: rgba(34, 139, 34, 0.05);
}

.shipping-option input[type="radio"] {
  margin-right: 1rem;
}

.shipping-option .option-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.shipping-cost {
  font-weight: 600;
  color: var(--primary-green);
}

/* Shipping Method Selector Styles */
.shipping-method-selector {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 12px;
  border: 2px solid #e9ecef;
}

.shipping-method-selector h4 {
  margin: 0 0 1rem 0;
  color: var(--dark-gray);
  font-size: 1.1rem;
  font-weight: 600;
}

.shipping-method-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.shipping-method-option {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.shipping-method-option:hover {
  border-color: var(--primary-green);
  background: rgba(34, 139, 34, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.shipping-method-option.selected {
  border-color: var(--primary-green);
  background: rgba(34, 139, 34, 0.1);
  box-shadow: 0 4px 12px rgba(34, 139, 34, 0.2);
}

.method-icon {
  font-size: 2rem;
  margin-right: 1rem;
  flex-shrink: 0;
}

.method-content h5 {
  margin: 0 0 0.5rem 0;
  color: var(--dark-gray);
  font-size: 1rem;
  font-weight: 600;
}

.method-content p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .shipping-method-options {
    grid-template-columns: 1fr;
  }
  
  .shipping-method-option {
    padding: 1rem;
  }
  
  .method-icon {
    font-size: 1.5rem;
    margin-right: 0.8rem;
  }
}

/* Vendor shipping option styles */
.vendor-option {
  border-left: 4px solid #FF9800;
  background: linear-gradient(to right, rgba(255, 152, 0, 0.05), transparent);
}

.vendor-option:hover {
  border-color: #FF9800;
  background: linear-gradient(to right, rgba(255, 152, 0, 0.1), transparent);
}

.vendor-option.selected {
  border-color: #FF9800;
  background: linear-gradient(to right, rgba(255, 152, 0, 0.15), transparent);
}

.vendor-price {
  font-weight: 600;
  color: #FF9800;
  font-style: italic;
}

.option-description {
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.25rem;
  font-style: italic;
}

.vendor-info-note {
  background: #FFF3E0;
  border: 1px solid #FFB74D;
  border-radius: 6px;
  padding: 0.75rem;
  margin-top: 1rem;
}

.vendor-info-note p {
  margin: 0;
  font-size: 0.9rem;
  color: #E65100;
}

.vendor-payment-note {
  background: #FFF3E0;
  border: 1px solid #FFB74D;
  border-radius: 6px;
  padding: 0.75rem;
  margin-top: 1rem;
}

.vendor-payment-note p {
  margin: 0;
  font-size: 0.9rem;
  color: #E65100;
}

.shipping-summary {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1.5rem;
}

/* Payment Methods Styles */
.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.payment-option {
  display: flex;
  align-items: center;
  padding: 1rem;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.payment-option:hover {
  border-color: var(--primary-green);
  background: rgba(34, 139, 34, 0.05);
}

.payment-option input[type="radio"] {
  margin-right: 1rem;
}

.payment-content {
  flex: 1;
}

.payment-content strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--dark-gray);
}

.payment-content p {
  margin: 0;
  color: #6c757d;
  font-size: 0.9rem;
}

.card-form {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  margin: 1rem 0;
}

/* Order Confirmation Styles */
.order-confirmation {
  text-align: center;
  padding: 2rem 0;
}

.success-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.order-details {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  margin: 2rem 0;
  text-align: left;
}

.order-details h3 {
  margin: 0 0 1rem 0;
  color: var(--dark-gray);
}

.next-steps {
  background: #e8f5e8;
  padding: 1.5rem;
  border-radius: 8px;
  margin: 2rem 0;
  text-align: left;
}

.next-steps h3 {
  margin: 0 0 1rem 0;
  color: var(--primary-green);
}

.next-steps ul {
  margin: 0;
  padding-left: 1.5rem;
}

.next-steps li {
  margin-bottom: 0.5rem;
  color: var(--dark-gray);
}

/* Step Actions */
.step-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e9ecef;
}

.step-actions .btn-secondary {
  background: #6c757d;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease;
}

.step-actions .btn-secondary:hover {
  background: #5a6268;
}

.step-actions .btn-primary {
  background: var(--primary-green);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease;
}

.step-actions .btn-primary:hover {
  background: #2c5530;
}

.step-actions .btn-primary:disabled {
  background: #a1a1aa;
  cursor: not-allowed;
}

.btn-full {
  width: 100%;
}

/* Stock Issues Styles */
.stock-issues {
  max-width: 500px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.stock-issue {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  padding: 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.empty-cart-message {
  max-width: 500px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

/* Mis Compras Styles */
.mis-compras-container {
  background: white;
  min-height: 100vh;
}

.mis-compras-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: white;
  border-bottom: 1px solid #e9ecef;
  position: sticky;
  top: 185px;
  z-index: 100;
}

.mis-compras-header h1 {
  margin: 0;
  color: var(--dark-gray);
  font-size: 1.5rem;
}

.compras-tabs {
  display: flex;
  background: white;
  border-bottom: 1px solid #e9ecef;
  padding: 0 1.5rem;
  overflow-x: auto;
  white-space: nowrap;
}

.compras-tabs .tab {
  background: none;
  border: none;
  padding: 1rem 1.5rem;
  cursor: pointer;
  font-weight: 500;
  color: #6c757d;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.compras-tabs .tab:hover {
  color: var(--primary-green);
}

.compras-tabs .tab.active {
  color: var(--primary-green);
  border-bottom-color: var(--primary-green);
}

.compras-content {
  padding: 1.5rem;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.order-card {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.order-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.order-number {
  font-weight: 600;
  color: var(--dark-gray);
}

.order-status {
  font-weight: 500;
  font-size: 0.9rem;
}

.order-date {
  color: #6c757d;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.order-items-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.items-images {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.item-preview-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.more-items {
  width: 40px;
  height: 40px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #6c757d;
}

.items-info {
  flex: 1;
}

.item-count {
  margin: 0 0 0.25rem 0;
  font-weight: 500;
  color: var(--dark-gray);
}

.tracking {
  margin: 0;
  font-size: 0.8rem;
  color: #6c757d;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid #f8f9fa;
}

.order-total {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-green);
}

.btn-view-details {
  background: var(--primary-green);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.3s ease;
}

.btn-view-details:hover {
  background: #2c5530;
}

/* Product Detail Page Styles */
.product-detail-page {
  min-height: 100vh;
  background: #f8f9fa;
  overflow-x: hidden;
}

.product-detail-main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  padding-bottom: 80px;
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
}

.product-detail-main * {
  box-sizing: border-box;
  max-width: 100%;
}

/* 🔧 COMPACTO: Sección de variantes optimizada */
.product-variants-section {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
  background: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.product-variants-section.has-variants {
  grid-template-columns: 1fr 2fr;
  grid-template-areas: 
    "variants purchase"
    "info purchase";
}

.product-variants-section.no-variants {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "info purchase";
}

.variants-column-compact {
  grid-area: variants;
}

.integrated-product-info {
  grid-area: info;
}

.integrated-product-info.full-width {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1rem;
}

.purchase-column-expanded {
  grid-area: purchase;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.purchase-content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.quantity-selector {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.quantity-label {
  font-size: 1.296rem; /* Aumentado +20% adicional (1.08rem * 1.2) */
  font-weight: 600;
  color: #333;
}

.quantity-controls {
  display: flex;
  align-items: center;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  width: fit-content;
  min-width: 140px; /* Ancho mínimo funcional */
}

.quantity-btn {
  background: white;
  border: none;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  transition: background 0.3s ease;
}

.quantity-btn:hover:not(:disabled) {
  background: #f8f9fa;
}

.quantity-btn:disabled {
  color: #ccc;
  cursor: not-allowed;
}

.quantity-input {
  padding: 0.75rem 1rem;
  background: white;
  border: none;
  border-left: 1px solid #e9ecef;
  border-right: 1px solid #e9ecef;
  font-weight: 600;
  min-width: 52px;
  max-width: 72px;
  text-align: center;
  font-size: 1rem;
  outline: none;
}

.stock-info {
  font-size: 1.035rem; /* Aumentado +15% (0.9rem * 1.15) */
  color: #666;
}

.product-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.error-message {
  background: #ffebee;
  color: #c62828;
  padding: 0.75rem;
  border-radius: 6px;
  font-size: 0.9rem;
}

.btn-buy-now,
.btn-add-cart {
  padding: 0.9rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-buy-now {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
}

.btn-buy-now:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.btn-add-cart {
  background: #f8f9fa;
  color: #333;
  border: 4px solid #4CAF50;
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

.btn-add-cart:hover {
  background: rgba(76, 175, 80, 0.1);
  border-color: #45a049;
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

.auth-notice {
  text-align: center;
  color: #666;
  font-size: 0.8rem;
  margin: 0;
}

.auth-notice a {
  color: #4CAF50;
  text-decoration: none;
}

.shipping-info {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.shipping-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.shipping-item strong {
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 0.2rem;
  display: block;
}

.shipping-item p {
  font-size: 0.8rem;
  color: #666;
  margin: 0;
}

@media (max-width: 768px) {
  .product-variants-section.has-variants {
    grid-template-areas: 
      "variants purchase"
      "info purchase";
    grid-template-columns: 1fr 1.3fr;
    grid-template-rows: auto auto;
    height: auto;
    min-height: 480px;
    max-height: none;
    padding: 1rem;
    gap: 0.8rem;
  }

  .product-variants-section.no-variants {
    grid-template-areas: 
      "info purchase"
      "shipping purchase";
    grid-template-columns: 1fr 1.4fr;
    grid-template-rows: auto auto;
    height: auto;
    min-height: 350px;
    max-height: none;
    padding: 1rem;
    gap: 0.8rem;
  }

  .shipping-info-section {
    padding: 0.8rem;
    min-height: 100px;
    gap: 0.6rem;
  }

  .purchase-column-expanded .btn-buy-now,
  .purchase-column-expanded .btn-add-cart {
    font-size: clamp(0.7rem, 2.8vw, 0.8rem);
    padding: 0.7rem 0.4rem;
    min-height: 42px;
    max-height: 46px;
    letter-spacing: -0.03em;
    flex-direction: row;
    gap: 0.4rem;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
}

  .variants-column-compact {
    padding: 0.4rem;
    gap: 0.3rem;
  }

  .integrated-product-info {
    padding: 0.4rem;
    gap: 0.3rem;
  }

  .purchase-column-expanded {
    padding: 0.6rem;
    gap: 0.3rem;
  }

  .variant-group-title {
    font-size: 0.75rem;
  }

  .variant-option-compact {
    min-height: 24px;
    max-height: 28px;
    font-size: 0.55rem;
  }

  .info-label {
    font-size: 0.7rem;
  }

  .purchase-column-expanded .btn-buy-now,
  .purchase-column-expanded .btn-add-cart {
    min-height: 32px;
    max-height: 36px;
    font-size: 0.75rem;
    padding: 0.5rem 0.6rem;
    flex-direction: row;
    gap: 0.3rem;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

/* Loading and Error States */
.product-detail-loading,
.product-detail-not-found {
  min-height: 100vh;
  background: #f8f9fa;
}

.loading-container,
.not-found-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e9ecef;
  border-top: 4px solid var(--primary-green);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

.not-found-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

/* 🔧 COMPACTO: Product Gallery optimizada */
.product-gallery-section {
  background: white;
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

.main-image-container {
  position: relative;
  text-align: center;
  margin-bottom: 0.5rem;
}

.main-product-image,
.main-image {
  width: 100%;
  max-width: 500px;
  height: 400px;
  object-fit: contain;
  border-radius: 8px;
  background: #f8f9fa;
}

.favorite-btn-detail {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.favorite-btn-detail:hover {
  transform: scale(1.1);
}

.favorite-btn-detail.active {
  background: rgba(255, 182, 193, 0.9);
}

.discount-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(255, 87, 51, 0.12);
  color: #ff5733;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
}

/* 🔧 COMPACTO: Thumbnails más pequeños */
.image-thumbnails {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.thumbnail {
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  background: none;
  padding: 0;
}

.thumbnail.active {
  border-color: var(--primary-green);
}

.thumbnail img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* Clases de orientación para thumbnails */
.thumbnail img.landscape {
  object-fit: cover;
  object-position: center;
}

.thumbnail img.portrait {
  object-fit: cover;
  object-position: center;
}

.thumbnail img.square {
  object-fit: cover;
  object-position: center;
}

.thumbnail img.placeholder {
  object-fit: contain;
  opacity: 0.7;
  filter: grayscale(0.3);
}

.thumbnail:hover img {
  transform: scale(1.1);
}

/* Clases de orientación para main-image y fullscreen-image */
.main-image.landscape,
.fullscreen-image.landscape {
  object-fit: cover;
  object-position: center;
}

.main-image.portrait,
.fullscreen-image.portrait {
  object-fit: cover;
  object-position: center;
  width: auto;
  height: 100%;
  max-width: 100%;
}

.main-image.square,
.fullscreen-image.square {
  object-fit: cover;
  object-position: center;
}

.main-image.placeholder,
.fullscreen-image.placeholder {
  object-fit: contain;
  opacity: 0.7;
  filter: grayscale(0.3);
}

/* Product Info Section */
.product-info-section {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

.product-header {
  margin-bottom: 0.5rem;
  padding-top: 0.875rem;
}

.product-category-tag {
  display: inline-block;
  background: var(--light-green);
  color: var(--primary-green);
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.product-brand {
  display: block;
  color: var(--primary-green);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.product-brand:hover {
  text-decoration: underline;
}

.product-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 1rem;
  line-height: 1.3;
  margin-top: 0.5rem;
}

.product-rating-detail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.stars {
  display: flex;
  gap: 2px;
}

.star {
  color: #ddd;
  font-size: 1.2rem;
}

.star.filled {
  color: #ffd700;
}

.rating-text {
  font-size: 0.9rem;
  color: var(--gray);
}

/* Pricing Section */
.pricing-section {
  padding: 1.5rem 0;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 1.5rem;
}

.original-price {
  font-size: 1rem;
  color: #999;
  text-decoration: line-through;
  margin-bottom: 0.5rem;
}

.current-price {
  font-size: 2.4rem; /* Aumentado +20% (2rem * 1.2) */
  font-weight: 800;
  color: var(--dark-gray);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.discount-percentage {
  background: var(--primary-green);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
}

.installments-info {
  color: var(--primary-green);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Product Variants */
.product-variants {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e9ecef;
}

.product-variants h4 {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.color-options {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.color-option {
  width: 50px;
  height: 50px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  background: none;
  padding: 0;
}

.color-option.selected {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 2px rgba(34, 139, 34, 0.2);
}

.color-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.size-options {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.size-option {
  padding: 0.75rem 1rem;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}

.size-option:hover {
  border-color: var(--primary-green);
}

.size-option.selected {
  border-color: var(--primary-green);
  background: var(--light-green);
  color: var(--primary-green);
}

.size-guide-btn {
  background: none;
  border: none;
  color: var(--primary-green);
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
}

/* Shipping Info */
.shipping-info {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e9ecef;
}

.shipping-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.shipping-icon {
  font-size: 1.5rem;
  margin-top: 0.25rem;
}

.shipping-item strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--dark-gray);
}

.shipping-item p {
  color: var(--gray);
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.shipping-details-btn,
.return-details-btn {
  background: none;
  border: none;
  color: var(--primary-green);
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
}

/* Purchase Section */
.purchase-section {
  margin-bottom: 1.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
}

/* Selector de cantidad - ProductDetail */
.quantity-selector {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  margin-bottom: 1rem !important;
  width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.quantity-controls {
  display: flex !important;
  align-items: center !important;
  border: 2px solid #e9ecef !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  width: fit-content !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: white !important;
}

.quantity-controls button {
  background: white !important;
  border: none !important;
  padding: 0.75rem 1rem !important;
  cursor: pointer !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  transition: background 0.3s ease !important;
  display: block !important;
  visibility: visible !important;
  min-width: 40px !important;
  height: auto !important;
}

.quantity-controls button:hover:not(:disabled) {
  background: #f8f9fa !important;
}

.quantity-controls button:disabled {
  color: #ccc !important;
  cursor: not-allowed !important;
  background: #f8f9fa !important;
}

.quantity-display {
  padding: 0.75rem 1rem;
  background: #f8f9fa;
  font-weight: 600;
  min-width: 50px;
  text-align: center;
}

.quantity-input {
  padding: 0.75rem 1rem !important;
  background: white !important;
  border: none !important;
  border-left: 1px solid #e9ecef !important;
  border-right: 1px solid #e9ecef !important;
  font-weight: 600 !important;
  min-width: 52px !important;
  max-width: 72px !important;
  text-align: center !important;
  font-size: 1rem !important;
  outline: none !important;
  -moz-appearance: textfield !important;
  transition: all 0.3s ease !important;
  display: block !important;
  visibility: visible !important;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-input:focus {
  background: #f8f9fa !important;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2) !important;
}

.quantity-input:invalid {
  border-color: #dc3545 !important;
}

.stock-info {
  color: #666 !important;
  font-size: 1.035rem !important; /* Aumentado +15% (0.9rem * 1.15) */
  display: block !important;
  visibility: visible !important;
}

.purchase-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.btn-buy-now,
.btn-add-cart {
  flex: 1;
  min-width: 150px;
  max-width: 100%;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-buy-now {
  background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
  color: white;
  border: 2px solid var(--primary-green);
}

.btn-buy-now:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 139, 34, 0.3);
  border-color: var(--secondary-green);
}

.btn-add-cart {
  background: white;
  color: var(--primary-green);
  border: 2px solid var(--primary-green);
}

.btn-add-cart:hover {
  background: var(--light-green);
  border-color: var(--secondary-green);
}

.btn-buy-now:disabled,
.btn-add-cart:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Info de Envío y Devolución - Texto clickeable */
/* Contenedor horizontal para envío/devolución + vendedor en móvil */
.shipping-seller-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0;
}

.shipping-return-text {
  display: flex;
  gap: 12px;
  margin: 0;
  font-size: 0.75rem;
}

.info-text-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #3483fa;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.info-text-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.info-icon-inline {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.info-text-link svg {
  color: #666;
}

/* Sección del Vendedor - Minimalista */
.seller-minimal {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  padding: 6px 0;
}

.seller-avatar-mini {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #e0e0e0;
}

.seller-avatar-placeholder-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  color: #2e7d32;
  font-size: 14px;
}

.seller-name-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}

.seller-name-link:hover {
  color: #3483fa;
}

.seller-goto {
  font-size: 0.7rem;
  color: #3483fa;
  font-weight: 400;
}

/* Seller Info (legacy - puede ser removido si no se usa) */
.seller-info {
  padding-top: 1.5rem;
  border-top: 1px solid #e9ecef;
}

.seller-info h4 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.seller-details {
  display: flex;
  gap: 1rem;
  color: var(--gray);
  font-size: 0.9rem;
  flex-wrap: wrap;
}

/* 🔧 COMPACTO: Secciones optimizadas del Product Detail */
.product-description-section,
.product-specifications-section,
.product-questions-section {
  background: white;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.6);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

.product-description-section:hover,
.product-specifications-section:hover,
.product-questions-section:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 🔧 COMPACTO: Headers de sección más pequeños */
.section-header-unified {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding: 0.875rem 1rem;
  border-bottom: 2px solid var(--primary-green);
  position: relative;
  overflow: hidden;
}

.section-header-unified::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(34, 139, 34, 0.1), transparent);
  transition: left 0.8s ease;
}

.section-header-unified:hover::before {
  left: 100%;
}

.section-header-unified h3 {
  margin: 0;
  color: var(--dark-gray);
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
}

/* 🔧 COMPACTO: Contenido de secciones balanceado (legible y compacto) */
.description-content-unified,
.specifications-content-unified,
.questions-content-unified {
  padding: 1rem;
}

/* Description Content */
.description-content h3 {
  margin-bottom: 1rem;
  color: var(--dark-gray);
}

.description-text {
  margin-bottom: 1.5rem;
}

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

.description-text p.expanded {
  display: block;
}

.show-more-btn {
  background: none;
  border: none;
  color: var(--primary-green);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.features-section h4 {
  margin-bottom: 1rem;
  color: var(--dark-gray);
}

.features-list {
  list-style: none;
  padding: 0;
}

.features-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.feature-icon {
  color: var(--primary-green);
  font-weight: bold;
}

/* Estilos mejorados para características en vista unificada - Diseño profesional y sutil */
.features-list-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.feature-item-spec {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: transparent;
  border-radius: 0;
  border: none;
  border-left: 3px solid rgba(34, 139, 34, 0.3);
  transition: border-left-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.feature-item-spec::before {
  display: none;
}

.feature-item-spec:hover {
  background: rgba(34, 139, 34, 0.02);
  border-left-color: var(--primary-green);
}

.feature-icon-spec {
  color: var(--primary-green);
  font-weight: normal;
  font-size: 0.9rem;
  background: transparent;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  box-shadow: none;
  flex-shrink: 0;
  border: 2px solid var(--primary-green);
}

.feature-icon-spec::before {
  content: '✓';
  font-size: 0.7rem;
  font-weight: bold;
  color: var(--primary-green);
}

.feature-text {
  font-size: 1rem;
  color: var(--dark-gray);
  line-height: 1.5;
  font-weight: 400;
  flex-grow: 1;
}

/* Especificaciones principales mejoradas - Diseño más sutil y sofisticado */
.main-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.spec-highlight {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: #fafbfc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.spec-highlight::before {
  display: none;
}

.spec-highlight:hover {
  background: #f8fafc;
  transform: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border-color: #cbd5e1;
}

.spec-icon {
  font-size: 1.2rem;
  background: #f1f5f9;
  color: #64748b;
  padding: 0.6rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  box-shadow: none;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
}

.spec-highlight div {
  font-size: 1rem;
  line-height: 1.5;
}

.spec-highlight strong {
  color: var(--dark-gray);
  font-weight: 700;
  margin-right: 0.5rem;
}

/* Especificaciones detalladas mejoradas */
.detailed-specs {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 2px solid rgba(226, 232, 240, 0.8);
}

.detailed-specs h4 {
  margin-bottom: 1.5rem;
  color: var(--dark-gray);
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid var(--primary-green);
}

/* Specifications Content */
.specifications-content h3 {
  margin-bottom: 1.5rem;
  color: var(--dark-gray);
}

.main-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.spec-highlight {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid var(--primary-green);
}

.spec-icon {
  font-size: 1.5rem;
}

.detailed-specs {
  margin-top: 2rem;
}

.spec-category {
  margin-bottom: 2rem;
}

.spec-category h4 {
  margin-bottom: 1rem;
  color: var(--dark-gray);
  font-size: 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary-green);
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.5rem;
}

.spec-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
}

.spec-item:hover {
  background: #e9ecef;
  border-color: var(--primary-green);
}

.spec-label {
  font-weight: 600;
  color: var(--dark-gray);
  font-size: 0.9rem;
}

.spec-value {
  font-weight: 500;
  color: #495057;
  font-size: 0.9rem;
  text-align: right;
  max-width: 60%;
  word-break: break-word;
}

/* Estilos para variantes unificadas mejoradas */
.unified-variants-section {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: linear-gradient(135deg, #fefefe, #f8fafc);
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.variants-section-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 1.5rem;
  text-align: center;
  background: linear-gradient(135deg, var(--primary-green), #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.variants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}

.unified-variant-card {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.unified-variant-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-green), #059669);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.unified-variant-card:hover {
  border-color: var(--primary-green);
  box-shadow: 0 8px 25px -8px rgba(34, 197, 94, 0.3);
  transform: translateY(-2px);
}

.unified-variant-card:hover::before {
  transform: scaleX(1);
}

.unified-variant-card.selected {
  border-color: var(--primary-green);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(34, 197, 94, 0.02));
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.unified-variant-card.selected::before {
  transform: scaleX(1);
}

.unified-variant-card.out-of-stock {
  opacity: 0.6;
  border-color: #d1d5db;
  cursor: not-allowed;
}

.variant-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.variant-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-gray);
  line-height: 1.3;
}

.stock-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stock-badge.available {
  background: rgba(34, 197, 94, 0.1);
  color: #166534;
}

.stock-badge.low {
  background: rgba(251, 146, 60, 0.1);
  color: #ea580c;
}

.stock-badge.out {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.variant-attributes {
  margin: 1rem 0;
  display: grid;
  gap: 0.5rem;
}

.variant-attribute-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.attr-key {
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
}

.attr-value {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--dark-gray);
}

.variant-details {
  margin: 1rem 0;
}

.variant-price-display {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary-green);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.price-diff {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

.variant-sku {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
}

/* ========================================
   INFORMACIÓN ADICIONAL DEL PRODUCTO
   ======================================== */

.product-additional-info-section {
  background: white;
  border-radius: 8px;
  padding: 0.5rem;
  margin-bottom: 0.3rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.6);
}

.product-additional-info-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.4rem 0;
  color: #2c2c2c;
}

.additional-info-content {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.additional-info-content .info-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.additional-info-content .info-row:last-child {
  border-bottom: none;
}

.additional-info-content .info-label {
  font-weight: 600;
  color: #555;
  min-width: 100px;
}

.additional-info-content .info-value {
  color: #333;
}

.additional-info-content .specs-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}

.additional-info-content .spec-item {
  display: flex;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.additional-info-content .spec-key {
  font-weight: 500;
  color: #666;
}

.additional-info-content .spec-value {
  color: #333;
}

/* ========================================
   CARACTERÍSTICAS DEL PRODUCTO - NUEVO DISEÑO PROFESIONAL
   ======================================== */

/* 🔧 COMPACTO: Características más compactas */
.product-characteristics-section {
  background: white;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.6);
  overflow: hidden;
}

.product-characteristics-section:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 🔧 COMPACTO: Header de características reducido */
.characteristics-header {
  background: linear-gradient(135deg, #F5F5DC 0%, #E8E4D0 100%);
  padding: 0.875rem 1rem;
  border-bottom: 2px solid var(--primary-green);
  position: relative;
  overflow: hidden;
}

.characteristics-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(34, 139, 34, 0.1), transparent);
  transition: left 0.8s ease;
}

.characteristics-header:hover::before {
  left: 100%;
}

.characteristics-header h3 {
  margin: 0;
  color: #2c2c2c;
  font-size: 1.5rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

/* 🔧 COMPACTO: Contenido de características reducido */
.characteristics-content {
  padding: 1rem;
}

/* Características destacadas con iconos */
.highlighted-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid #f0f0f0;
}

.highlighted-feature-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem;
  background: linear-gradient(135deg, #fefefe 0%, #f8f9fa 100%);
  border-radius: 12px;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.highlighted-feature-item:hover {
  background: linear-gradient(135deg, #F5F5DC 0%, #E8E4D0 100%);
  border-color: var(--primary-green);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 139, 34, 0.1);
}

.feature-icon-badge {
  font-size: 2rem;
  min-width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-green), #059669);
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(34, 139, 34, 0.2);
}

.feature-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.feature-label-highlight {
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.feature-value-highlight {
  font-size: 1rem;
  font-weight: 700;
  color: #2c2c2c;
}

/* Grid de secciones de especificaciones */
.specs-sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.specs-section {
  background: #fefefe;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e9ecef;
}

.specs-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2c2c2c;
  padding: 1rem 1.25rem;
  margin: 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 2px solid var(--primary-green);
}

/* Tabla de especificaciones con filas alternadas */
.specs-table {
  display: flex;
  flex-direction: column;
}

.spec-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0.85rem 1.25rem;
  gap: 1rem;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s ease;
}

.spec-row:last-child {
  border-bottom: none;
}

/* Filas alternadas con beige claro */
.spec-row.even {
  background: #F5F5DC;
}

.spec-row.odd {
  background: white;
}

.spec-row:hover {
  background: linear-gradient(90deg, rgba(34, 139, 34, 0.05), rgba(34, 139, 34, 0.02));
}

.spec-row-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #495057;
}

.spec-row-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: #2c2c2c;
  text-align: right;
  word-break: break-word;
}

/* Responsive para móvil */
@media (max-width: 768px) {
  .characteristics-header h3 {
    font-size: 1.25rem;
  }

  .highlighted-features {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .highlighted-feature-item {
    padding: 1rem;
  }

  .feature-icon-badge {
    font-size: 1.5rem;
    min-width: 45px;
    height: 45px;
    border-radius: 10px;
  }

  .specs-sections-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .specs-section-title {
    font-size: 1rem;
    padding: 0.85rem 1rem;
  }

  .spec-row {
    grid-template-columns: 1fr;
    padding: 0.75rem 1rem;
    gap: 0.25rem;
  }

  .spec-row-label {
    font-weight: 700;
    color: #2c2c2c;
  }

  .spec-row-value {
    text-align: left;
    font-weight: 500;
    color: #495057;
  }

  .characteristics-content {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .highlighted-features {
    gap: 0.6rem;
  }

  .highlighted-feature-item {
    padding: 0.85rem;
  }

  .feature-icon-badge {
    font-size: 1.25rem;
    min-width: 40px;
    height: 40px;
  }

  .feature-label-highlight {
    font-size: 0.75rem;
  }

  .feature-value-highlight {
    font-size: 0.9rem;
  }

  .characteristics-content {
    padding: 1rem;
  }
}

/* Lista de características principales y features */
.features-list-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: linear-gradient(135deg, #fefefe 0%, #f8f9fa 100%);
  border-radius: 12px;
  border: 2px solid #e9ecef;
}

.features-list-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2c2c2c;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--primary-green);
}

.features-bullets-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.75rem;
}

.feature-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: white;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
}

.feature-bullet-item:hover {
  background: #F5F5DC;
  border-color: var(--primary-green);
  transform: translateX(4px);
}

.feature-bullet-icon {
  color: var(--primary-green);
  font-weight: 700;
  font-size: 1.1rem;
  min-width: 20px;
  margin-top: 2px;
}

.feature-bullet-text {
  flex: 1;
  color: #2c2c2c;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Responsive para lista de features */
@media (max-width: 768px) {
  .features-list-section {
    padding: 1.25rem;
    margin: 1.5rem 0;
  }

  .features-list-title {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }

  .features-bullets-list {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .feature-bullet-item {
    padding: 0.65rem;
  }

  .feature-bullet-text {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .features-list-section {
    padding: 1rem;
  }

  .features-bullets-list {
    gap: 0.5rem;
  }

  .feature-bullet-item {
    padding: 0.6rem;
  }
}

.unified-variant-select {
  width: 100%;
  padding: 0.85rem 1.2rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  color: var(--dark-gray);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.unified-variant-select:hover:not(:disabled) {
  border-color: var(--primary-green);
  background: rgba(34, 197, 94, 0.05);
  color: var(--primary-green);
  transform: translateY(-1px);
}

.unified-variant-select.selected {
  background: linear-gradient(135deg, var(--primary-green), #059669);
  border-color: var(--primary-green);
  color: white;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.unified-variant-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f3f4f6;
  color: #9ca3af;
}

.check-icon {
  font-weight: bold;
  font-size: 1rem;
}

/* Responsive para variantes */
@media (max-width: 768px) {
  .variants-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .unified-variant-card {
    padding: 1rem;
  }
  
  .variant-price-display {
    font-size: 1.1rem;
  }
  
  .variant-name {
    font-size: 1rem;
  }
border-radius: 4px;
  border: 1px solid #e9ecef;
}

.spec-label {
  font-weight: 600;
  color: var(--gray);
}

.spec-value {
  font-weight: 600;
  color: var(--dark-gray);
  text-align: right;
}

/* Reviews Content - COMPACTA 30% */
.reviews-content h3 {
  margin-bottom: 0.5rem;
  color: var(--dark-gray);
  font-size: 0.875rem;
  font-weight: 600;
}

.reviews-summary {
  margin-bottom: 0.6rem;
}

.rating-overview {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem;
  background: #f8f9fa;
  border-radius: 6px;
}

.big-rating {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-green);
  line-height: 1;
}

.stars-large {
  display: flex;
  gap: 2px;
}

.stars-large .star {
  font-size: 0.75rem;
}

.reviews-count {
  color: var(--gray);
  font-weight: 500;
  font-size: 0.7rem;
}

.no-reviews {
  text-align: center;
  padding: 0.6rem;
  color: var(--gray);
  font-size: 0.75rem;
  line-height: 1.3;
}

.no-reviews p {
  margin: 0.15rem 0;
}

/* Product Reviews Section - COMPACTA 30% */
.product-reviews-section {
  background: white;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0.75rem;
  overflow-x: hidden;
}

/* Related Products Section */
.related-products-section {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
  overflow-x: hidden;
}

.related-products-section h3 {
  margin-bottom: 0.5rem;
  color: var(--dark-gray);
}

.related-products-section p {
  margin-bottom: 1.5rem;
  color: var(--gray);
}

.related-products-placeholder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.related-item {
  text-align: center;
  padding: 1rem;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.related-item:hover {
  border-color: var(--primary-green);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.related-image {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* Responsive Design */
@media (max-width: 1199px) {
  .product-detail-main {
    padding: 1.5rem;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .product-detail-main {
    padding: 1rem;
    margin: 0 0.5rem;
  }

  .product-gallery-section,
  .product-info-section,
  .product-tabs-section,
  .related-products-section {
    border-radius: 8px;
    margin-bottom: 0.5rem;
    padding: 1rem;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    overflow-x: hidden;
  }

  /* 🔧 FIX MÓVIL: Columnas balanceadas 50-50 en tablet */
  .product-variants-section.has-variants {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: 
      "variants purchase"
      "info purchase" !important;
  }

  .product-variants-section {
    min-height: 520px;
    height: auto;
    gap: 1rem;
  }

  .purchase-column-expanded {
    min-height: 480px;
  }

  .purchase-column-expanded .quantity-controls button {
    min-width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .purchase-column-expanded .quantity-display {
    min-width: 48px;
    height: 38px;
    font-size: 1rem;
  }

  .main-product-image {
    height: 300px;
  }

  .product-title {
    font-size: 1.3rem;
  }

  .current-price {
    font-size: 1.5rem;
  }

  .purchase-buttons {
    flex-direction: column;
  }

  .btn-buy-now,
  .btn-add-cart {
    min-width: 100%;
  }

  .main-specs {
    grid-template-columns: 1fr;
  }

  .specs-grid {
    grid-template-columns: 1fr;
  }

  .spec-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .spec-value {
    text-align: left;
  }

  .quantity-selector {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .tabs-header {
    flex-wrap: wrap;
  }

  .tab {
    flex: none;
    min-width: 33.333%;
  }
}

@media (max-width: 480px) {
  .product-detail-main {
    padding: 0.8rem;
    margin: 0 0.25rem;
  }

  .product-gallery-section,
  .product-info-section,
  .product-tabs-section,
  .related-products-section {
    padding: 0.75rem;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    overflow-x: hidden;
  }

  /* 🔧 FIX MÓVIL PEQUEÑO: Apilar en 1 columna para pantallas muy pequeñas */
  .product-variants-section.has-variants {
    grid-template-columns: 1fr !important;
    grid-template-areas: 
      "variants"
      "info"
      "purchase" !important;
  }

  .product-variants-section.no-variants {
    grid-template-columns: 1fr !important;
    grid-template-areas: 
      "info"
      "purchase" !important;
  }

  .product-variants-section {
    min-height: auto;
    height: auto;
    gap: 0.8rem;
    padding: 1rem;
  }

  .purchase-column-expanded {
    min-height: 500px;
    padding: 1rem;
  }

  .purchase-column-expanded .quantity-controls {
    gap: 0.3rem;
  }

  .purchase-column-expanded .quantity-controls button {
    min-width: 40px;
    height: 40px;
    font-size: 1.1rem;
    border-width: 2px;
  }

  .purchase-column-expanded .quantity-display {
    min-width: 50px;
    height: 40px;
    font-size: 1.1rem;
    border-width: 2px;
  }

  .purchase-buttons {
    flex-direction: column;
    gap: 0.5rem;
  }

  .btn-buy-now,
  .btn-add-cart {
    min-width: 100%;
    max-width: 100%;
    flex: none;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
  }

  .product-actions {
    width: 100%;
    max-width: 100%;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Order Detail Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.order-detail-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #e9ecef;
}

.modal-header h2 {
  margin: 0;
  color: var(--dark-gray);
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6c757d;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: var(--dark-gray);
}

.modal-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.order-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.order-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.status-icon {
  font-size: 1.2rem;
}

.order-basic-info p {
  margin: 0.5rem 0;
  color: var(--dark-gray);
}

.order-items h3,
.order-shipping h3,
.order-payment h3,
.order-history h3 {
  margin: 0 0 1rem 0;
  color: var(--dark-gray);
  font-size: 1.1rem;
  border-bottom: 2px solid var(--primary-green);
  padding-bottom: 0.5rem;
}

.order-item-detail {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.order-item-detail .item-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}

.order-item-detail .item-info {
  flex: 1;
}

.order-item-detail .item-info h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

.order-item-detail .item-info p {
  margin: 0;
  color: #6c757d;
  font-size: 0.9rem;
}

.order-item-detail .item-price {
  font-weight: 600;
  color: var(--primary-green);
}

.shipping-address {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
}

.shipping-address p {
  margin: 0.25rem 0;
  color: var(--dark-gray);
}

.history-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.history-event {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid var(--primary-green);
}

.event-date {
  color: #6c757d;
  font-size: 0.9rem;
  white-space: nowrap;
  min-width: 150px;
}

.event-description {
  color: var(--dark-gray);
  font-weight: 500;
}

.modal-footer {
  padding: 1.5rem;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: flex-end;
}

/* Estilos para pagos móviles */
.payment-mobile-container {
  padding: 10px;
  margin: 0;
}

.payment-mobile-container .dlocal-payment {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 15px;
}

.mobile-payment-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
  padding: 15px 0;
  border-bottom: 1px solid #e1e8ed;
  margin-bottom: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .checkout-main {
    padding: 1rem 0.5rem;
  }
  
  .checkout-progress {
    padding: 1rem;
  }
  
  .checkout-progress .step {
    font-size: 0.8rem;
  }
  
  .step-number {
    width: 25px;
    height: 25px;
    font-size: 0.8rem;
  }
  
  .checkout-content {
    padding: 1rem;
  }
  
  .order-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .order-item .item-image {
    width: 50px;
    height: 50px;
  }
  
  .step-actions {
    flex-direction: column;
  }
  
  .modal-content {
    margin: 0.5rem;
    max-height: 95vh;
  }
  
  .modal-body {
    padding: 1rem;
  }
  
  .order-item-detail {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .order-footer {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .mis-compras-header {
    padding: 1rem;
  }
  
  .compras-content {
    padding: 1rem;
  }
}

/* Level Badge Styles */
.level-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.level-badge-small {
  padding: 0.2rem 0.4rem;
  font-size: 0.8rem;
}

.level-badge-medium {
  padding: 0.3rem 0.6rem;
  font-size: 0.9rem;
}

.level-badge-large {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

.level-badge-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 0.9rem;
}

.level-badge-small .level-badge-icon {
  width: 20px;
  height: 20px;
  font-size: 0.7rem;
}

.level-badge-large .level-badge-icon {
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
}

.level-badge-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.level-name {
  font-weight: 600;
  color: var(--dark-gray);
}

.level-purchases,
.level-sales {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Benefits List Styles */
.benefits-list {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.benefits-list h4 {
  margin: 0 0 1rem 0;
  color: var(--dark-gray);
  font-size: 1.1rem;
}

.benefits-grid {
  display: grid;
  gap: 0.8rem;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem;
  background: white;
  border-radius: 8px;
  border-left: 4px solid var(--primary-green);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.benefit-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.benefit-icon {
  font-size: 1.2rem;
  width: 30px;
  display: flex;
  justify-content: center;
}

/* Level Progress Styles */
.level-progress {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin: 0.5rem 0;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-green), #28a745);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.progress-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.stat-item {
  text-align: center;
  padding: 0.8rem;
  background: rgba(76, 175, 80, 0.1);
  border-radius: 8px;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--primary-green);
}

.stat-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

/* Level Alert Styles */
.level-alert {
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  animation: slideIn 0.5s ease;
}

.level-alert.success {
  background: linear-gradient(135deg, #d4edda, #c3e6cb);
  border: 1px solid #28a745;
  color: #155724;
}

.level-alert.warning {
  background: linear-gradient(135deg, #fff3cd, #ffeaa7);
  border: 1px solid #ffc107;
  color: #856404;
}

.level-alert.danger {
  background: linear-gradient(135deg, #f8d7da, #f5bcc3);
  border: 1px solid #dc3545;
  color: #721c24;
}

.alert-icon {
  font-size: 1.5rem;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: 600;
  margin-bottom: 0.3rem;
}

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

/* Home Page Styles */
.home-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.home-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: white;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.home-main {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 2rem;
}

/* Hero Section */
.hero-section {
  background: linear-gradient(135deg, var(--primary-green) 0%, #28a745 100%);
  color: white;
  padding: 4rem 2rem;
  text-align: center;
  border-radius: 20px;
  margin: 2rem 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.hero-content p {
  font-size: 1.3rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-btn {
  padding: 1rem 2rem;
  font-size: 1.1rem;
  border-radius: 25px;
  font-weight: 600;
  min-width: 200px;
}

/* Benefits Section */
.benefits-section {
  padding: 4rem 2rem;
  background: white;
  margin: 2rem 1rem;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.benefit-card {
  text-align: center;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 15px;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  border-color: var(--primary-green);
}

.benefit-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}

.benefit-card h3 {
  color: var(--primary-green);
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}

.benefit-card p {
  color: #6c757d;
  font-size: 1rem;
}

/* Category hover effects */
.category-item {
  position: relative;
  overflow: hidden;
}

.category-hover-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(76, 175, 80, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.category-item:hover .category-hover-effect {
  opacity: 1;
}

/* Product card overlay for login prompt */
.product-card {
  position: relative;
}

.login-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  border-radius: 12px;
}

.product-card:hover .login-overlay {
  opacity: 1;
}

/* Mobile App Section */
.mobile-app-section {
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin: 2rem 1rem;
  border-radius: 20px;
}

.app-download-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  max-width: 1000px;
  margin: 0 auto;
  gap: 2rem;
  flex-wrap: wrap;
}

.app-info h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.app-info p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}

.app-features {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.app-features span {
  font-size: 1rem;
  opacity: 0.9;
}

.app-buttons {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

.app-store-btn {
  background: white;
  border: none;
  border-radius: 10px;
  padding: 0.5rem;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.app-store-btn:hover {
  transform: scale(1.05);
}

.app-store-btn img {
  width: 150px;
  height: 45px;
  object-fit: contain;
}

/* Info Footer */
.info-footer {
  background: #2c3e50;
  color: white;
  padding: 3rem 2rem 1rem;
  margin: 2rem 1rem 0;
  border-radius: 20px 20px 0 0;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.footer-section h4 {
  color: var(--primary-green);
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section li {
  padding: 0.3rem 0;
  cursor: pointer;
  transition: color 0.3s ease;
}

.footer-section li:hover {
  color: var(--primary-green);
}

.social-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.social-links span {
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 0.3rem 0;
}

.social-links span:hover {
  color: var(--primary-green);
}

.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #34495e;
  color: #bdc3c7;
}

/* Auth buttons in header */
.login-btn,
.register-btn {
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  margin-left: 0.5rem;
}

.login-btn {
  background: var(--primary-green);
  color: white;
  border: none;
}

.register-btn {
  background: transparent;
  color: var(--primary-green);
  border: 2px solid var(--primary-green);
}

.login-btn:hover {
  background: #45a049;
  transform: translateY(-1px);
}

.register-btn:hover {
  background: var(--primary-green);
  color: white;
  transform: translateY(-1px);
}

/* Responsive Design for Home */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2rem;
  }
  
  .hero-content p {
    font-size: 1.1rem;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-btn {
    min-width: 250px;
  }
  
  .app-download-card {
    flex-direction: column;
    text-align: center;
  }
  
  .app-buttons {
    flex-direction: row;
    justify-content: center;
  }
  
  .home-main {
    margin: 0 0.5rem;
  }
  
  .benefits-section,
  .mobile-app-section,
  .hero-section {
    margin: 1rem 0;
  }
}

/* Mystery Box Styles */
.mystery-box {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  margin: 1rem 0;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  animation: mysteryGlow 2s ease-in-out infinite alternate;
}

@keyframes mysteryGlow {
  from {
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  }
  to {
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.5);
  }
}

.mystery-box-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.mystery-box h3 {
  margin: 0.5rem 0;
  font-size: 1.3rem;
}

.mystery-box-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid white;
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  margin-top: 1rem;
  transition: all 0.3s ease;
}

.mystery-box-btn:hover {
  background: white;
  color: #667eea;
  transform: scale(1.05);
}

/* Estilos ostentosos antiguos eliminados - Sistema de niveles ahora usa componentes minimalistas */

/* Advanced Search Autocomplete Styles */
.search-suggestions-advanced {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 15px 15px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 1002;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.suggestions-section,
.history-section {
  padding: 0.5rem 0;
}

.suggestions-header {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color);
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
}

.suggestion-item:hover {
  background-color: var(--light-gray);
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-icon {
  font-size: 0.9rem;
  color: var(--text-muted);
  width: 16px;
  text-align: center;
}

.suggestion-text {
  flex: 1;
  font-size: 0.9rem;
  color: var(--dark-gray);
}

.history-item .suggestion-icon {
  color: var(--primary-green);
}

/* Voice Search Animation */
.voice-search-btn.recording {
  animation: pulse 1s infinite;
  background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
  }
}

/* Advanced Filters Panel */
.filters-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(5px);
}

.filters-panel {
  background: white;
  border-radius: 15px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, var(--primary-green), #28a745);
  color: white;
  border-radius: 15px 15px 0 0;
}

.filters-header h3 {
  margin: 0;
  font-size: 1.3rem;
}

.close-filters {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-filters:hover {
  background: rgba(255, 255, 255, 0.2);
}

.filters-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.filter-group label {
  font-weight: 600;
  color: var(--dark-gray);
  font-size: 0.95rem;
}

.filter-group select,
.filter-group input[type="number"] {
  padding: 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.9rem;
  transition: border-color 0.3s ease;
}

.filter-group select:focus,
.filter-group input:focus {
  outline: none;
  border-color: var(--primary-green);
  box-shadow: 0 0 0 2px rgba(34, 139, 34, 0.2);
}

.price-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.price-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.price-input-group label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.price-range-display {
  text-align: center;
  font-size: 0.9rem;
  color: var(--primary-green);
  font-weight: 600;
  padding: 0.5rem;
  background: rgba(34, 139, 34, 0.1);
  border-radius: 6px;
}

.radio-group,
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.radio-option,
.checkbox-option {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.radio-option:hover,
.checkbox-option:hover {
  background: rgba(34, 139, 34, 0.05);
}

.radio-option input,
.checkbox-option input {
  margin: 0;
  transform: scale(1.2);
  accent-color: var(--primary-green);
}

.rating-filter {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rating-option {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.rating-option:hover {
  background: rgba(34, 139, 34, 0.05);
}

.stars {
  color: #ffc107;
  font-size: 1rem;
}

.filters-actions {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid var(--border-color);
}

.filters-actions button {
  flex: 1;
  padding: 0.8rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Messaging System Styles */
.messaging-system {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 600px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.messaging-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--primary-green), #2e8b57);
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.close-chat-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.close-chat-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.recipient-details h3 {
  margin: 0;
  font-size: 1.1rem;
}

.typing-indicator {
  font-size: 0.9rem;
  opacity: 0.8;
  animation: pulse 1.5s infinite;
}

.chat-actions {
  display: flex;
  gap: 0.5rem;
}

.report-btn, .block-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}

.report-btn:hover, .block-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #f8f9fa;
}

.message {
  display: flex;
  flex-direction: column;
  max-width: 70%;
  animation: slideIn 0.3s ease;
}

.message.sent {
  align-self: flex-end;
}

.message.received {
  align-self: flex-start;
}

.message-content {
  background: white;
  padding: 0.75rem 1rem;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  word-wrap: break-word;
}

.message.sent .message-content {
  background: var(--primary-green);
  color: white;
  border-bottom-right-radius: 6px;
}

.message.received .message-content {
  border-bottom-left-radius: 6px;
}

.moderated-content {
  opacity: 0.7;
  position: relative;
}

.moderation-notice {
  font-size: 0.8rem;
  color: #ff6b6b;
  margin-left: 0.5rem;
}

.message-attachment {
  margin-top: 0.5rem;
  border-radius: 8px;
  overflow: hidden;
}

.attachment-image {
  max-width: 200px;
  max-height: 150px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.attachment-image:hover {
  transform: scale(1.05);
}

.attachment-file {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  cursor: pointer;
}

.file-icon {
  font-size: 1.5rem;
}

.file-info {
  display: flex;
  flex-direction: column;
}

.file-name {
  font-weight: 500;
  font-size: 0.9rem;
}

.file-size {
  font-size: 0.8rem;
  opacity: 0.7;
}

.message-time {
  font-size: 0.8rem;
  opacity: 0.6;
  margin-top: 0.25rem;
  text-align: right;
}

.message.received .message-time {
  text-align: left;
}

.attachments-preview {
  background: #f1f3f4;
  border-top: 1px solid var(--border-color);
  padding: 1rem;
}

.attachments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.attachments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.attachment-preview {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  padding: 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.attachment-name {
  font-size: 0.9rem;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remove-attachment {
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-input-container {
  padding: 1rem;
  background: white;
  border-top: 1px solid var(--border-color);
}

.message-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f8f9fa;
  border-radius: 25px;
  padding: 0.5rem;
}

.attachment-btn {
  background: none;
  border: none;
  padding: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}

.attachment-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

.message-input {
  flex: 1;
  border: none;
  background: none;
  padding: 0.5rem;
  font-size: 1rem;
  outline: none;
}

.send-btn {
  background: var(--primary-green);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.send-btn:hover:not(:disabled) {
  background: #2e8b57;
  transform: translateY(-1px);
}

.send-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Conversations List Styles */
.conversations-list {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.conversations-header {
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--primary-green), #2e8b57);
  color: white;
}

.conversations-header h2 {
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.unread-badge {
  background: #ff6b6b;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: bold;
}

.conversations-search {
  margin-bottom: 1rem;
}

.search-input {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  outline: none;
}

.conversations-filters {
  display: flex;
  gap: 0.5rem;
}

.conversations-filters button {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.conversations-filters button.active,
.conversations-filters button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.conversations-content {
  max-height: 500px;
  overflow-y: auto;
}

.no-conversations {
  text-align: center;
  padding: 3rem;
  color: #666;
}

.no-conversations-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.conversation-item {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.conversation-item:hover {
  background: #f8f9fa;
}

.conversation-item.unread {
  background: rgba(34, 139, 34, 0.05);
  border-left: 4px solid var(--primary-green);
}

.conversation-item.archived {
  opacity: 0.6;
}

.conversation-avatar {
  position: relative;
  margin-right: 1rem;
}

.avatar-placeholder {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary-green);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
}

.unread-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: #ff6b6b;
  border-radius: 50%;
  border: 2px solid white;
}

.conversation-content {
  flex: 1;
  min-width: 0;
}

.conversation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.recipient-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--dark-gray);
}

.conversation-time {
  font-size: 0.8rem;
  color: #666;
}

.last-message {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-product {
  font-size: 0.8rem;
  color: var(--primary-green);
  margin-top: 0.25rem;
}

.conversation-actions {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.conversation-item:hover .conversation-actions {
  opacity: 1;
}

.action-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.action-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

.action-btn.delete:hover {
  background: rgba(255, 107, 107, 0.1);
}

/* Modal Styles for Reports */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: white;
  border-radius: 15px;
  padding: 0;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
  margin: 0;
  color: var(--dark-gray);
}

.modal-body {
  padding: 1.5rem;
}

.modal-body label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--dark-gray);
}

.modal-body select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 1rem;
}

.modal-actions {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid var(--border-color);
  justify-content: flex-end;
}

.btn-danger {
  background: #ff6b6b;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-danger:hover {
  background: #ff5252;
}

/* Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Product Recommendations Styles */
.recommendations-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.recommendations-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--primary-green);
}

.recommendations-header h3 {
  margin: 0;
  color: var(--dark-gray);
  font-size: 1.3rem;
}

.refresh-recommendations {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.refresh-recommendations:hover {
  background: rgba(34, 139, 34, 0.1);
  transform: rotate(180deg);
}

.recommendations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.recommendation-card {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.recommendation-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: var(--primary-green);
}

.recommendation-image-container {
  position: relative;
  overflow: hidden;
}

.recommendation-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.recommendation-card:hover .recommendation-image {
  transform: scale(1.05);
}

.discount-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #e74c3c;
  color: white;
  padding: 0.3rem 0.6rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.shipping-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--success-green);
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
}

.recommendation-info {
  padding: 1rem;
}

.recommendation-title {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark-gray);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.recommendation-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.recommendation-rating .stars {
  color: #ffc107;
  font-size: 0.8rem;
}

.rating-text {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.recommendation-price {
  margin-bottom: 0.5rem;
}

.original-price {
  text-decoration: line-through;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-right: 0.5rem;
}

/* 🔧 COMPACTO: Precio MÁS GRANDE como ML */
.current-price {
  font-size: 2.4rem; /* Aumentado +20% (2rem * 1.2) */
  font-weight: 600;
  color: #1e293b;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.recommendation-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 1rem;
}

.seller,
.location {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.add-to-cart-btn-recommendation {
  width: 100%;
  background: linear-gradient(135deg, var(--primary-green), #28a745);
  color: white;
  border: none;
  padding: 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

.add-to-cart-btn-recommendation:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 139, 34, 0.4);
}

.recommendations-footer {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.view-more-recommendations {
  background: none;
  border: 2px solid var(--primary-green);
  color: var(--primary-green);
  padding: 0.8rem 2rem;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.view-more-recommendations:hover {
  background: var(--primary-green);
  color: white;
  transform: translateY(-2px);
}

/* Responsive para filtros y recomendaciones */
@media (max-width: 768px) {
  .filters-panel {
    width: 95%;
    max-height: 95vh;
  }
  
  .filters-content {
    padding: 1rem;
    gap: 1rem;
  }
  
  .price-range {
    grid-template-columns: 1fr;
  }
  
  .filters-actions {
    flex-direction: column;
    padding: 1rem;
  }
  
  .recommendations-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.8rem;
  }
  
  .recommendation-image {
    height: 120px;
  }
  
  .recommendation-info {
    padding: 0.8rem;
  }
}

/* Vendor Chat Styles */
.vendor-chat-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(5px);
}

.vendor-chat-container {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  height: 600px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.chat-header {
  background: linear-gradient(135deg, var(--primary-green), #28a745);
  color: white;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.close-chat-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-chat-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.chat-messages {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.empty-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  text-align: center;
}

.message {
  display: flex;
  margin-bottom: 0.8rem;
}

.buyer-message {
  justify-content: flex-end;
}

.vendor-message {
  justify-content: flex-start;
}

.message-content {
  max-width: 70%;
  padding: 0.8rem 1rem;
  border-radius: 18px;
  position: relative;
}

.buyer-message .message-content {
  background: var(--primary-green);
  color: white;
  border-bottom-right-radius: 4px;
}

.vendor-message .message-content {
  background: white;
  color: var(--dark-gray);
  border: 1px solid #e9ecef;
  border-bottom-left-radius: 4px;
}

.message-content p {
  margin: 0 0 0.3rem 0;
}

.message-time {
  font-size: 0.75rem;
  opacity: 0.7;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.5rem 1rem;
}

.chat-input-section {
  border-top: 1px solid #e9ecef;
  padding: 1rem;
  background: white;
}

.chat-input-container {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.chat-input {
  flex: 1;
  padding: 0.8rem 1rem;
  border: 1px solid #ddd;
  border-radius: 25px;
  outline: none;
  transition: border-color 0.3s ease;
}

.chat-input:focus {
  border-color: var(--primary-green);
}

.send-message-btn {
  background: var(--primary-green);
  color: white;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.send-message-btn:hover:not(:disabled) {
  background: #28a745;
  transform: scale(1.05);
}

.send-message-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.chat-quick-questions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.quick-question-btn {
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid var(--primary-green);
  color: var(--primary-green);
  padding: 0.4rem 0.8rem;
  border-radius: 15px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

.quick-question-btn:hover {
  background: var(--primary-green);
  color: white;
}

/* Chat List Styles */
.chat-list {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chat-list h3 {
  margin: 0 0 1rem 0;
  color: var(--dark-gray);
}

.no-chats {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: 2rem;
}

.chat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  margin-bottom: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.chat-item:hover {
  background: rgba(76, 175, 80, 0.05);
  border-color: var(--primary-green);
}

.chat-info h4 {
  margin: 0 0 0.3rem 0;
  font-size: 1rem;
  color: var(--dark-gray);
}

.last-message {
  margin: 0 0 0.3rem 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.chat-time {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.unread-badge {
  background: #dc3545;
  color: white;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
}

/* Responsive Chat */
@media (max-width: 768px) {
  .vendor-chat-container {
    width: 95%;
    height: 90vh;
  }
  
  .chat-header {
    padding: 1rem;
  }
  
  .message-content {
    max-width: 85%;
  }
  
  .chat-quick-questions {
    justify-content: center;
  }
  
  .quick-question-btn {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
}

/* Profile Menu Dropdown */
.profile-menu-container {
  position: relative;
}

.profile-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border: 1px solid #e9ecef;
  min-width: 250px;
  z-index: 1000;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.profile-menu-header {
  padding: 1rem;
  background: linear-gradient(135deg, var(--primary-green), #28a745);
  color: white;
}

.profile-menu-info h4 {
  margin: 0 0 0.3rem 0;
  font-size: 1rem;
  font-weight: 600;
}

.profile-menu-info p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.9;
}

.profile-menu-options {
  padding: 0.5rem 0;
}

.profile-menu-item {
  width: 100%;
  padding: 0.8rem 1rem;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  text-align: left;
}

.profile-menu-item:hover {
  background: rgba(76, 175, 80, 0.05);
  color: var(--primary-green);
}

.profile-menu-item.logout-item {
  color: #dc3545;
}

.profile-menu-item.logout-item:hover {
  background: rgba(220, 53, 69, 0.05);
  color: #dc3545;
}

.menu-icon {
  width: 20px;
  height: 20px;
  font-size: 1rem;
}

.menu-divider {
  margin: 0.5rem 0;
  border: none;
  border-top: 1px solid #e9ecef;
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 1rem;
}

.header-action-btn {
  background: none;
  border: none;
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.header-action-btn:hover {
  background: none;
  transform: scale(1.1);
}

.action-icon {
  width: 31px !important;
  height: 31px !important;
  object-fit: contain !important;
  max-width: 31px !important;
  max-height: 31px !important;
  min-width: 31px !important;
  min-height: 31px !important;
}

.cart-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #dc3545;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: bold;
}

/* Notification styles moved to NotificationCenter.css */

/* Social Login Buttons */
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.google-btn:hover {
  background: #f8f9fa;
  border-color: #4285f4;
}

.facebook-btn:hover {
  background: #f8f9fa;
  border-color: #1877f2;
}

.social-icon-img {
  width: 20px;
  height: 20px;
}

.social-icon {
  font-size: 1.2rem;
}

.facebook-icon {
  background: #1877f2;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
}

/* ========================================
   🎨 PROFILE NAVIGATION - PROFESSIONAL CARDS SYSTEM
   ======================================== */

.profile-navigation-section {
  margin-bottom: 2.5rem;
  padding: 0 1rem;
}

.profile-nav-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

.profile-nav-card {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  position: relative;
  overflow: hidden;
}

.profile-nav-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(135deg, #059669 0%, #3b82f6 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.profile-nav-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: #3b82f6;
}

.profile-nav-card:hover::before {
  opacity: 1;
}

.profile-nav-card.active {
  border-color: #059669;
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.15);
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.02) 0%, rgba(59, 130, 246, 0.02) 100%);
}

.profile-nav-card.active::before {
  opacity: 1;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.profile-nav-card-icon {
  width: 64px;
  height: 64px;
  min-width: 64px;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
  position: relative;
}

.profile-nav-card.active .profile-nav-card-icon {
  background: linear-gradient(135deg, #047857 0%, #059669 100%);
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35);
}

.profile-nav-card-icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 2.5;
}

.profile-nav-card-content {
  flex: 1;
  min-width: 0;
}

.profile-nav-card-content h3 {
  margin: 0 0 0.35rem 0;
  font-size: 1.15rem;
  color: #1f2937;
  font-weight: 600;
  line-height: 1.3;
}

.profile-nav-card-content p {
  margin: 0;
  font-size: 0.9rem;
  color: #6b7280;
  font-weight: 500;
  line-height: 1.4;
}

.profile-nav-card.active .profile-nav-card-content h3 {
  color: #059669;
}

.profile-nav-card.active .profile-nav-card-content p {
  color: #047857;
}

.profile-nav-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  min-width: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
  animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5);
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .profile-nav-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  
  .profile-nav-card {
    padding: 1.25rem;
  }
  
  .profile-nav-card-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
  }
  
  .profile-nav-card-icon svg {
    width: 28px;
    height: 28px;
  }
  
  .profile-nav-card-content h3 {
    font-size: 1.05rem;
  }
  
  .profile-nav-card-content p {
    font-size: 0.85rem;
  }
}

@media (max-width: 768px) {
  .profile-navigation-section {
    padding: 0 0.5rem;
    margin-bottom: 2rem;
  }
  
  .profile-nav-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .profile-nav-card {
    padding: 1rem 1.25rem;
  }
  
  .profile-nav-card-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
  }
  
  .profile-nav-card-icon svg {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 480px) {
  .profile-nav-card {
    padding: 0.875rem 1rem;
  }
  
  .profile-nav-card-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }
  
  .profile-nav-card-icon svg {
    width: 24px;
    height: 24px;
  }
  
  .profile-nav-card-content h3 {
    font-size: 0.95rem;
  }
  
  .profile-nav-card-content p {
    font-size: 0.8rem;
  }
}

/* Seller Request Styles */
.seller-invitation {
  padding: 2rem;
}

.invitation-header {
  text-align: center;
  margin-bottom: 3rem;
}

.invitation-header h2 {
  color: var(--primary-green);
  margin-bottom: 1rem;
}

.seller-benefits {
  margin-bottom: 3rem;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.benefit-item {
  text-align: center;
  padding: 2rem 1rem;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.benefit-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.benefit-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}

.benefit-item h4 {
  color: var(--primary-green);
  margin-bottom: 0.5rem;
}

.seller-request-form {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.form-section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e9ecef;
}

.form-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.form-section h4 {
  color: var(--primary-green);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Request Status */
.request-status {
  text-align: center;
  padding: 3rem 2rem;
  border-radius: 12px;
  margin: 2rem 0;
}

.request-status.pending {
  background: linear-gradient(135deg, #fff3cd, #ffeaa7);
  border: 1px solid #ffeaa7;
}

.request-status.approved {
  background: linear-gradient(135deg, #d4edda, #c3e6cb);
  border: 1px solid #c3e6cb;
}

.request-status.rejected {
  background: linear-gradient(135deg, #f8d7da, #f1aeb5);
  border: 1px solid #f1aeb5;
}

.status-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.status-info {
  background: rgba(255, 255, 255, 0.8);
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
}

/* FAQ Styles */
.faq-main {
  background: #f8f9fa;
  min-height: 100vh;
}

.faq-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.faq-header {
  text-align: center;
  margin-bottom: 3rem;
}

.faq-header h1 {
  color: var(--primary-green);
  margin-bottom: 1rem;
}

.faq-search {
  display: flex;
  max-width: 500px;
  margin: 2rem auto 0;
  background: white;
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.faq-search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.8rem;
  font-size: 1rem;
}

.faq-search-btn {
  background: var(--primary-green);
  border: none;
  color: white;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  cursor: pointer;
}

.faq-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  justify-content: center;
}

.faq-category-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border: 2px solid #e9ecef;
  background: white;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.faq-category-btn.active {
  background: var(--primary-green);
  color: white;
  border-color: var(--primary-green);
}

.faq-category-btn:hover:not(.active) {
  background: #f8f9fa;
  border-color: var(--primary-green);
}

.category-icon {
  font-size: 1.2rem;
}

.faq-list {
  background: white;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.faq-item {
  border-bottom: 1px solid #e9ecef;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  width: 100%;
  padding: 1.5rem;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  transition: all 0.3s ease;
}

.faq-question:hover {
  background: #f8f9fa;
}

.faq-question.expanded {
  background: rgba(76, 175, 80, 0.05);
  color: var(--primary-green);
}

.faq-toggle {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--primary-green);
}

.faq-answer {
  padding: 0 1.5rem 1.5rem;
  color: #666;
  line-height: 1.6;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.search-results-header {
  padding: 1rem 1.5rem;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.no-results {
  text-align: center;
  padding: 3rem;
  color: #666;
}

.no-results-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.faq-contact {
  margin-top: 3rem;
}

.contact-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.contact-options {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* Cart Page Styles */
.cart-main {
  background: #f8f9fa;
  min-height: 100vh;
}

.cart-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.cart-header {
  text-align: center;
  margin-bottom: 2rem;
}

.cart-header h1 {
  color: var(--primary-green);
  margin-bottom: 0.5rem;
}

.cart-content {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 2rem;
}

.cart-items {
  background: white;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cart-item {
  display: grid;
  grid-template-columns: 100px 1fr auto auto auto;
  gap: 1rem;
  padding: 1.5rem;
  border-bottom: 1px solid #e9ecef;
  align-items: center;
}

.cart-item:last-child {
  border-bottom: none;
}

.item-image img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}

.item-details h3 {
  margin: 0 0 0.5rem 0;
  color: var(--primary-green);
}

.item-description {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.item-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8rem;
  color: #888;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 0.2rem;
}

.quantity-btn {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  color: var(--primary-green);
}

.quantity-display {
  padding: 0.5rem;
  min-width: 40px;
  text-align: center;
  font-weight: 600;
}

.item-price {
  text-align: right;
}

.unit-price {
  font-size: 0.9rem;
  color: #666;
}

.total-price {
  font-weight: 600;
  color: var(--primary-green);
  font-size: 1.1rem;
}

.remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.remove-btn:hover {
  background: rgba(220, 53, 69, 0.1);
}

.cart-summary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.summary-card {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.summary-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  padding: 0.3rem 0;
}

.summary-line.discount {
  color: var(--primary-green);
}

.summary-line.total {
  font-size: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
}

.promo-code {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
}

.promo-input {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.promo-input input {
  flex: 1;
  padding: 0.8rem;
  border: 1px solid #e9ecef;
  border-radius: 8px;
}

.apply-promo-btn {
  padding: 0.8rem 1rem;
  background: var(--primary-green);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.promo-success {
  color: var(--primary-green);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.cart-actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1rem;
}

.checkout-btn {
  font-size: 1.1rem;
  font-weight: 600;
  padding: 1rem;
}

.shipping-info, .trust-badges {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.shipping-info ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
}

.shipping-info li {
  padding: 0.3rem 0;
  font-size: 0.9rem;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.badge {
  background: #e9ecef;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  color: #666;
}

.empty-cart {
  text-align: center;
  padding: 4rem 2rem;
  background: white;
  border-radius: 12px;
  margin: 2rem auto;
  max-width: 500px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.empty-cart-icon {
  font-size: 5rem;
  margin-bottom: 1rem;
  color: #ddd;
}

.empty-cart-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* Notification Panel Styles */
.notification-panel {
  position: relative;
}

.notification-trigger {
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 0.3rem;
  border-radius: 8px;
  transition: var(--transition);
  margin: 0 0.4rem;
}

.notification-trigger:hover {
  background: rgba(255,255,255,0.2);
  transform: scale(1.05);
}

/* Notification styles moved to NotificationCenter.css */

.clear-all-btn {
  background: none;
  border: none;
  color: var(--primary-green);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}

.clear-all-btn:hover {
  text-decoration: underline;
}

.notification-list {
  max-height: 300px;
  overflow-y: auto;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Categorias Page Styles - ELIMINADO padding (controlado por categoryGrid.css) */
.categorias-page {
  min-height: 100vh;
  background: #FAFAFA !important; /* Color uniforme */
  padding-top: 0 !important; /* SIN padding - controlado por nuevo diseño */
}

.categorias-main {
  max-width: 100% !important; /* Ancho completo */
  margin: 0 !important;
  padding: 0 !important; /* SIN padding - controlado por nuevo diseño */
}

.categorias-container {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.categorias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.categoria-card {
  background: linear-gradient(145deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(245, 245, 220, 0.9) 100%);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 2px solid rgba(34, 139, 34, 0.1);
  position: relative;
  overflow: visible;
  backdrop-filter: blur(10px);
}

.categoria-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 
    0 20px 60px rgba(34, 139, 34, 0.2),
    0 10px 30px rgba(255, 140, 0, 0.15);
  border-color: var(--primary-orange);
}

.categoria-icon-container {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, var(--primary-green), var(--primary-orange));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(34, 139, 34, 0.3);
}

.categoria-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: none;
}

.categoria-titulo {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 0.5rem;
}

.categoria-contador {
  color: var(--gray);
  font-size: 0.9rem;
  margin: 0;
}

/* Panel de subcategorías */
.subcategorias-panel {
  position: absolute;
  top: 0;
  left: 100%;
  width: 300px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
  border: 2px solid var(--primary-green);
  z-index: 1001;
  animation: slideInRight 0.3s ease;
  overflow: hidden;
}

.subcategorias-header {
  background: linear-gradient(135deg, var(--primary-green), var(--primary-orange));
  color: white;
  padding: 1rem;
  text-align: center;
}

.subcategorias-header h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.subcategorias-lista {
  max-height: 300px;
  overflow-y: auto;
}

.subcategoria-item {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  font-weight: 500;
}

.subcategoria-item:last-child {
  border-bottom: none;
}

.subcategoria-item:hover {
  background: var(--primary-green);
  color: white;
  transform: translateX(10px);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Responsive para categorías */
@media (max-width: 768px) {
  .categorias-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .categoria-card {
    padding: 1.5rem;
  }

  .categoria-icon-container {
    width: 60px;
    height: 60px;
  }

  .categoria-icon {
    width: 35px;
    height: 35px;
  }

  .subcategorias-panel {
    left: -150px;
    width: 250px;
  }
}

@media (max-width: 480px) {
  .categorias-grid {
    grid-template-columns: 1fr;
  }

  .subcategorias-panel {
    left: 0;
    width: 100%;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Categorías Page Modern Styles */
.categorias-page-modern {
  min-height: 100vh;
  background: #f0f0f0;
}

.categorias-header-modern {
  background: #FFD700;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.back-btn-modern {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.back-btn-modern:hover {
  background: rgba(0,0,0,0.1);
}

.categorias-header-modern h1 {
  margin: 0;
  color: #333;
  font-size: 1.3rem;
  font-weight: 600;
}

.categorias-main-modern {
  padding: 1.5rem;
}

.categorias-grid-modern {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.categoria-card-modern {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.12);
  position: relative;
  overflow: visible;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.categoria-card-modern:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.categoria-icon-wrapper {
  width: 120px;
  height: 120px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-green), var(--primary-orange));
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(34, 139, 34, 0.3);
}

.categoria-icon-modern {
  width: 85px;
  height: 85px;
  object-fit: contain;
  filter: none;
}

.categoria-titulo-modern {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin: 0;
  line-height: 1.3;
}

/* Panel de subcategorías moderno */
.subcategorias-panel-modern {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  max-width: 90vw;
  max-height: 80vh;
  background: white;
  border-radius: 15px;
  box-shadow: 0 15px 50px rgba(0,0,0,0.4);
  border: 2px solid var(--primary-green);
  z-index: 10001;
  animation: slideInCenter 0.3s ease;
  overflow: hidden;
}

@keyframes slideInCenter {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.subcategorias-header-modern {
  background: var(--primary-green);
  color: white;
  padding: 1rem;
  text-align: center;
}

.subcategorias-header-modern h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.subcategorias-lista-modern {
  max-height: 300px;
  overflow-y: auto;
}

.subcategoria-item-modern {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-size: 0.9rem;
  color: #666;
}

.subcategoria-item-modern:last-child {
  border-bottom: none;
}

.subcategoria-item-modern:hover {
  background: var(--primary-green);
  color: white;
}

/* Navigation Buttons with Icons */
.back-btn-icon {
  background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
  border: none;
  border-radius: 12px;
  padding: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(34, 139, 34, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-right: 1rem;
}

.back-btn-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.3), 
    transparent);
  transition: left 0.5s ease;
}

.back-btn-icon:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(34, 139, 34, 0.4);
}

.back-btn-icon:hover::before {
  left: 100%;
}

.btn-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: none;
  transition: all 0.3s ease;
}

.back-btn-icon:hover .btn-icon {
  transform: scale(1.1);
  filter: none;
}

/* Enhanced Icon Effects */
.enhanced-icon-btn {
  position: relative;
  overflow: visible;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background: none;
  backdrop-filter: none;
  border-radius: 12px;
  box-shadow: none;
}

.enhanced-icon-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(34, 139, 34, 0.3), 
    rgba(255, 140, 0, 0.3),
    transparent);
  transition: left 0.6s ease;
  z-index: 0;
}

.enhanced-icon-btn:hover::before {
  left: 100%;
}

.enhanced-icon-btn:hover {
  transform: scale(1.05);
  box-shadow: none;
  background: none;
}

.enhanced-icon {
  transition: all 0.4s ease;
  filter: none;
  position: relative;
  z-index: 1;
}

.enhanced-icon-btn:hover .enhanced-icon {
  transform: scale(1.1);
  filter: none;
}

.enhanced-badge {
  background: linear-gradient(135deg, #ff4757, #ff3742);
  animation: pulse 2s infinite;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
}

@keyframes glow {
  from {
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
  }
  to {
    box-shadow: 0 4px 16px rgba(255, 71, 87, 0.8);
  }
}

/* Enhanced Search Button */
.enhanced-search-btn {
  background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 4px 15px rgba(34, 139, 34, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.3);
}

.enhanced-search-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.4), 
    transparent);
  transition: left 0.5s ease;
}

.enhanced-search-btn:hover::before {
  left: 100%;
}

.enhanced-search-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 
    0 8px 25px rgba(34, 139, 34, 0.4),
    0 4px 15px rgba(255, 140, 0, 0.2);
  background: linear-gradient(135deg, var(--primary-green), var(--primary-orange));
}

.search-icon {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
  transition: all 0.3s ease;
}

.enhanced-search-btn:hover .search-icon {
  transform: scale(1.1);
  filter: brightness(0) invert(1);
}

/* Enhanced Filter Button */
.enhanced-filter-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(34, 139, 34, 0.3);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.4s ease;
  backdrop-filter: blur(5px);
}

.enhanced-filter-btn:hover {
  border-color: var(--primary-green);
  background: rgba(34, 139, 34, 0.1);
  transform: scale(1.1);
}

.filter-icon {
  width: 16px;
  height: 16px;
  transition: all 0.3s ease;
}

.enhanced-filter-btn:hover .filter-icon {
  filter: hue-rotate(45deg) brightness(1.2);
}

/* Enhanced Voice and Camera Buttons */
.enhanced-voice-btn, .enhanced-camera-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.enhanced-voice-btn:hover {
  background: rgba(74, 144, 226, 0.1);
  border-color: #4a90e2;
  transform: scale(1.05);
}

.enhanced-camera-btn:hover {
  background: rgba(255, 140, 0, 0.1);
  border-color: var(--primary-orange);
  transform: scale(1.05);
}

.voice-icon, .camera-icon {
  width: 18px;
  height: 18px;
  transition: all 0.3s ease;
}

.enhanced-voice-btn:hover .voice-icon {
  filter: hue-rotate(180deg) brightness(1.3);
}

.enhanced-camera-btn:hover .camera-icon {
  filter: hue-rotate(30deg) brightness(1.2);
}

/* Enhanced Navigation Buttons */
.enhanced-nav-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(250,250,250,0.9));
  backdrop-filter: blur(10px);
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.5);
}

.enhanced-nav-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(74, 144, 226, 0.3), 
    transparent);
  transition: left 0.6s ease;
  z-index: 0;
}

.enhanced-nav-btn:hover::before {
  left: 100%;
}

.enhanced-nav-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 
    0 6px 20px rgba(74, 144, 226, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.8);
  background: linear-gradient(145deg, 
    rgba(74, 144, 226, 0.1), 
    rgba(255, 255, 255, 0.9));
}

.enhanced-nav-btn.active {
  background: linear-gradient(145deg, 
    rgba(74, 144, 226, 0.15), 
    rgba(34, 139, 34, 0.08));
  box-shadow: 
    0 2px 8px rgba(74, 144, 226, 0.2),
    inset 0 1px 2px rgba(74, 144, 226, 0.1);
  transform: translateY(-1px);
}

.enhanced-label {
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.enhanced-nav-btn:hover .enhanced-label {
  color: #4a90e2;
  font-weight: 600;
}

.enhanced-nav-btn.active .enhanced-label {
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Header adjustments for icon buttons */
.page-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  background: white;
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-header h1 {
  margin: 0;
  color: var(--dark-gray);
  font-size: 1.8rem;
  font-weight: 700;
}

.compras-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--verde-principal);
  gap: 1rem;
}

.compras-header h2 {
  color: var(--verde-principal);
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
}

.faq-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  background: linear-gradient(135deg, 
    var(--primary-green) 0%, 
    var(--secondary-green) 100%);
  color: white;
  border-radius: 15px 15px 0 0;
  box-shadow: 0 4px 15px rgba(34, 139, 34, 0.3);
}

.faq-header h1 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
}

.categorias-header-modern {
  background: linear-gradient(135deg, 
    var(--primary-green) 0%, 
    var(--primary-orange) 100%);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  color: white;
}

.categorias-header-modern h1 {
  margin: 0;
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
}

.checkout-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  background: white;
  border-bottom: 2px solid var(--primary-green);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.checkout-header h1 {
  margin: 0;
  color: var(--dark-gray);
  font-size: 1.8rem;
  font-weight: 700;
}

/* Icon button variations */
.back-btn-icon.home-style {
  background: linear-gradient(135deg, var(--primary-orange), var(--accent-orange));
}

.back-btn-icon.cart-style {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.back-btn-icon.category-style {
  background: linear-gradient(135deg, #ff9a9e, #fecfef);
}

/* Responsive para categorías modernas */
@media (max-width: 768px) {
  .categorias-grid-modern {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .categoria-card-modern {
    padding: 1rem;
  }

  .categoria-icon-wrapper {
    width: 50px;
    height: 50px;
  }

  .categoria-icon-modern {
    width: 40px;
    height: 40px;
  }

  .categoria-titulo-modern {
    font-size: 0.8rem;
  }

  .subcategorias-panel-modern {
    left: -200px;
    width: 250px;
  }
}

/* Performance Optimization Styles */
.lazy-image {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.lazy-image.loaded {
  opacity: 1;
}

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

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Advanced Search Styles */
.advanced-search-container {
  background: white;
  border-radius: 15px;
  padding: 1.5rem;
  margin: 1rem 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.search-filters-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-group label {
  font-weight: 600;
  color: var(--dark-gray);
  font-size: 0.9rem;
}

.filter-select,
.filter-input {
  padding: 0.6rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.9rem;
  transition: border-color 0.3s ease;
}

.filter-select:focus,
.filter-input:focus {
  outline: none;
  border-color: var(--primary-green);
}

.voice-search-btn {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  color: white;
  cursor: pointer;
  margin-left: 0.5rem;
  transition: all 0.3s ease;
}

.voice-search-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

.voice-search-btn.recording {
  animation: pulse 2s infinite;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.search-suggestions-advanced {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 15px 15px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1001;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.suggestion-item {
  padding: 0.8rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
}

.suggestion-item:hover {
  background-color: var(--light-gray);
}

.suggestion-item:last-child {
  border-bottom: none;
}

.search-history-panel {
  background: white;
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.search-history-header h4 {
  margin: 0;
  color: var(--dark-gray);
}

.clear-history-btn {
  background: none;
  border: none;
  color: var(--primary-green);
  cursor: pointer;
  font-size: 0.9rem;
}

.clear-history-btn:hover {
  text-decoration: underline;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.history-item:hover {
  background-color: var(--light-gray);
}

.history-icon {
  margin-right: 0.8rem;
  color: var(--gray);
}

.history-text {
  flex: 1;
  font-size: 0.9rem;
  color: var(--dark-gray);
}

.history-time {
  font-size: 0.8rem;
  color: var(--gray);
}

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

.performance-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.performance-indicator.show {
  opacity: 1;
}

/* Sub-tabs styling */
.sub-tabs {
  display: flex;
  background: white;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 2rem;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sub-tab {
  flex: 1;
  padding: 1rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-weight: 600;
  color: var(--gray);
  transition: all 0.3s ease;
  position: relative;
}

.sub-tab:hover {
  background: var(--light-gray);
  color: var(--primary-green);
}

.sub-tab.active {
  background: var(--light-gray);
  border-bottom-color: var(--primary-green);
  color: var(--primary-green);
}

.sub-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary-green);
}

/* FAQ Improved Styles */
.faq-main-improved {
  background: linear-gradient(135deg, #f8fffe 0%, #f1f8f6 100%);
  min-height: calc(100vh - 185px);
}

.faq-container-improved {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem 2rem 1rem;
}

.faq-header-improved {
  text-align: center;
  margin-bottom: 0.5rem;
  position: relative;
}

.faq-hero {
  margin-bottom: 0.5rem;
}

.faq-hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a365d;
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.faq-hero p {
  font-size: 1.2rem;
  color: #4a5568;
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto;
}

.faq-search-improved {
  position: relative;
  max-width: 600px;
  margin: 0 auto 0.5rem auto;
  background: white;
  border-radius: 50px;
  padding: 0.5rem 1rem;
  box-shadow: 0 8px 25px rgba(34, 139, 34, 0.15);
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.faq-search-improved:focus-within {
  border-color: var(--primary-green);
  box-shadow: 0 8px 30px rgba(34, 139, 34, 0.25);
  transform: translateY(-2px);
}

.search-icon {
  color: #a0aec0;
  font-size: 1.1rem;
}

.faq-search-input-improved {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.75rem 0;
  font-size: 1rem;
  color: #2d3748;
  background: transparent;
}

.faq-search-input-improved::placeholder {
  color: #a0aec0;
}

.clear-search {
  background: #f7fafc;
  border: none;
  color: #718096;
  padding: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clear-search:hover {
  background: #e2e8f0;
  color: #4a5568;
}

.faq-content-improved {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 0;
}

.faq-categories-improved {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  position: sticky;
  top: 200px;
}

.faq-categories-improved h2 {
  margin: 0 0 1.5rem 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: #2d3748;
  border-bottom: 3px solid var(--primary-green);
  padding-bottom: 0.5rem;
}

.categories-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.category-card {
  /* ✅ WCAG 2.2 AA: Touch target mínimo 48×48px */
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
  padding: 1.25rem 1rem;
  background: #f7fafc;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  width: 100%;
}

.category-card:hover {
  background: #edf2f7;
  border-color: var(--primary-green);
  transform: translateY(-1px);
}

.category-card.active {
  background: var(--primary-green);
  color: white;
  box-shadow: 0 4px 15px rgba(34, 139, 34, 0.3);
}

.category-icon-improved {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  flex-shrink: 0;
}

.category-card.active .category-icon-improved {
  background: rgba(255, 255, 255, 0.3);
}

.category-text h3 {
  margin: 0 0 0.25rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: inherit;
}

.category-text span {
  font-size: 0.85rem;
  opacity: 0.8;
  color: inherit;
}

.faq-answers-section {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.search-results-header-improved {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e2e8f0;
}

.search-results-header-improved h2 {
  margin: 0 0 0.5rem 0;
  color: #2d3748;
  font-size: 1.4rem;
  font-weight: 600;
}

.results-count {
  color: #718096;
  font-size: 0.9rem;
  background: #f7fafc;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
}

.current-category-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e2e8f0;
}

.category-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.category-icon-large {
  font-size: 2rem;
  background: var(--primary-green);
  color: white;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
}

.category-info h2 {
  margin: 0;
  color: #2d3748;
  font-size: 1.5rem;
  font-weight: 600;
}

.no-results-improved {
  text-align: center;
  padding: 4rem 2rem;
  color: #718096;
}

.no-results-graphic {
  position: relative;
  margin-bottom: 2rem;
  display: inline-block;
}

.search-icon-large {
  font-size: 4rem;
  opacity: 0.3;
}

.empty-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  opacity: 0.6;
}

.no-results-improved h3 {
  margin: 0 0 1rem 0;
  color: #4a5568;
  font-size: 1.3rem;
}

.no-results-improved p {
  margin: 0 0 2rem 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.no-results-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* Estilos para la sección de recomendaciones sin resultados */
.no-results-recommendations {
  padding: 2rem;
}

.recommendations-header {
  text-align: center;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid #e2e8f0;
}

.recommendations-header h2 {
  margin: 0 0 0.5rem 0;
  color: #2d3748;
  font-size: 1.5rem;
  font-weight: 600;
}

.recommendations-header p {
  color: #718096;
  font-size: 1rem;
}

.recommendation-section {
  margin-bottom: 4rem;
}

.recommendation-section h3 {
  margin: 0 0 1.5rem 0;
  color: #2d3748;
  font-size: 1.2rem;
  font-weight: 600;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.categories-suggestion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.category-suggestion-card {
  /* ✅ WCAG 2.2 AA: Touch target mínimo 48×48px */
  background: white;
  min-height: 80px;
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.category-suggestion-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-green);
}

.category-suggestion-card .category-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.category-suggestion-card h4 {
  margin: 0 0 0.25rem 0;
  color: #2d3748;
  font-size: 1rem;
  font-weight: 600;
}

.category-suggestion-card p {
  margin: 0;
  color: #718096;
  font-size: 0.85rem;
}

.new-search-section {
  text-align: center;
  background: #f8f9fa;
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.new-search-section h3 {
  margin: 0 0 1.5rem 0;
  color: #2d3748;
  font-size: 1.2rem;
  font-weight: 600;
}

.search-again-container {
  max-width: 500px;
  margin: 0 auto;
}

.search-again-input {
  width: 100%;
  padding: 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  margin-bottom: 1rem;
  transition: border-color 0.3s ease;
}

.search-again-input:focus {
  outline: none;
  border-color: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.1);
}

.search-tips {
  color: #718096;
  font-size: 0.9rem;
  margin: 0;
  font-style: italic;
}

/* Responsive para móvil */
@media (max-width: 768px) {
  .no-results-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .categories-suggestion-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .category-suggestion-card {
    padding: 1rem;
  }
  
  .new-search-section {
    padding: 1.5rem;
  }
left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.btn-primary-improved {
  background: var(--primary-green);
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(34, 139, 34, 0.2);
}

.btn-primary-improved:hover {
  background: #1e7e34;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 139, 34, 0.3);
}

.faq-list-improved {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item-improved {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item-improved:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-green);
}

.faq-question-improved {
  width: 100%;
  padding: 1.5rem 2rem;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  color: #2d3748;
}

.faq-question-improved:hover {
  background: #edf2f7;
}

.faq-question-improved.expanded {
  background: var(--primary-green);
  color: white;
}

.question-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.question-number {
  background: rgba(34, 139, 34, 0.1);
  color: var(--primary-green);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  min-width: 40px;
  text-align: center;
}

.faq-question-improved.expanded .question-number {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.question-text {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
}

.toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(34, 139, 34, 0.1);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.faq-question-improved.expanded .toggle-wrapper {
  background: rgba(255, 255, 255, 0.2);
}

.faq-toggle-improved {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-green);
  transition: all 0.3s ease;
}

.faq-question-improved.expanded .faq-toggle-improved {
  color: white;
}

.faq-answer-improved {
  background: white;
  border-top: 1px solid #e2e8f0;
  animation: slideDownFaq 0.3s ease;
}

.answer-content {
  padding: 2rem;
}

.answer-content p {
  margin: 0;
  line-height: 1.7;
  color: #4a5568;
  font-size: 1rem;
}

@keyframes slideDownFaq {
  from {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  to {
    opacity: 1;
    max-height: 300px;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* Responsive Design */
@media (max-width: 1200px) {
  .faq-content-improved {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .faq-categories-improved {
    position: static;
  }
  
  .categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .faq-container-improved {
    padding: 1rem 0.5rem;
  }
  
  .faq-hero h1 {
    font-size: 2rem;
  }
  
  .faq-hero p {
    font-size: 1rem;
  }
  
  .faq-search-improved {
    margin: 0 1rem;
  }
  
  .categories-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .category-card {
    padding: 1rem;
  }
  
  .faq-answers-section {
    padding: 1.5rem;
  }
  
  .faq-question-improved {
    padding: 1.25rem 1rem;
  }
  
  .question-content {
    gap: 0.75rem;
  }
  
  .question-number {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    min-width: 35px;
  }
  
  .question-text {
    font-size: 0.95rem;
  }
  
  .answer-content {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .faq-container-improved {
    padding: 0.5rem 0.25rem;
  }
  
  .faq-hero h1 {
    font-size: 1.75rem;
  }
  
  .faq-categories-improved,
  .faq-answers-section {
    padding: 1rem;
    border-radius: 12px;
  }
  
  .faq-question-improved {
    padding: 1rem 0.75rem;
  }
  
  .question-text {
    font-size: 0.9rem;
  }
  
  .toggle-wrapper {
    width: 35px;
    height: 35px;
  }
  
  .faq-toggle-improved {
    font-size: 1.3rem;
  }
}

/* Original FAQ Styles for backwards compatibility */
.faq-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  padding-top: 1rem;
}

.faq-content {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

.faq-sidebar {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  height: fit-content;
}

.faq-sidebar h3 {
  margin: 0 0 1rem 0;
  color: var(--dark-gray);
  font-size: 1.1rem;
}

.faq-category {
  display: block;
  width: 100%;
  padding: 0.8rem;
  background: none;
  border: none;
  text-align: left;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--gray);
  font-weight: 500;
}

.faq-category:hover {
  background: var(--light-gray);
  color: var(--primary-green);
}

.faq-category.active {
  background: var(--primary-green);
  color: white;
}

.faq-main {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.faq-main h3 {
  margin: 0 0 1.5rem 0;
  color: var(--dark-gray);
  font-size: 1.3rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary-green);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  padding: 1rem;
  background: var(--light-gray);
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--dark-gray);
  transition: all 0.3s ease;
}

.faq-question:hover {
  background: var(--primary-green);
  color: white;
}

.faq-question.expanded {
  background: var(--primary-green);
  color: white;
}

.faq-toggle {
  font-size: 1.2rem;
  font-weight: bold;
}

.faq-answer {
  padding: 1rem;
  background: white;
  border-top: 1px solid var(--border-color);
  animation: slideDown 0.3s ease;
}

.faq-answer p {
  margin: 0;
  line-height: 1.6;
  color: var(--dark-gray);
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 200px;
  }
}

.faq-contact {
  margin-top: 3rem;
}

.contact-card {
  background: linear-gradient(135deg, var(--primary-green), var(--primary-orange));
  color: white;
  padding: 2rem;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(34, 139, 34, 0.3);
}

.contact-card h3 {
  margin: 0 0 1rem 0;
  font-size: 1.3rem;
}

.contact-card p {
  margin: 0 0 1.5rem 0;
  opacity: 0.9;
}

.contact-options {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.contact-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid white;
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.contact-btn:hover {
  background: white;
  color: var(--primary-green);
}

/* Actividad styles */
.actividad-container {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.actividad-container h3 {
  margin: 0 0 1.5rem 0;
  color: var(--dark-gray);
  font-size: 1.3rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary-green);
}

.actividad-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.actividad-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--light-gray);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.actividad-item:hover {
  background: rgba(34, 139, 34, 0.1);
  transform: translateY(-2px);
}

.actividad-icon {
  font-size: 1.5rem;
  width: 40px;
  text-align: center;
}

.actividad-content h4 {
  margin: 0 0 0.3rem 0;
  color: var(--dark-gray);
  font-size: 1rem;
}

.actividad-content p {
  margin: 0;
  color: var(--gray);
  font-size: 0.9rem;
}

/* Empty states improvements */
.empty-favorites {
  text-align: center;
  padding: 3rem 2rem;
  background: white;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem;
  opacity: 0.6;
}

.empty-favorites h3 {
  color: var(--dark-gray);
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}

.empty-favorites p {
  color: var(--gray);
  margin-bottom: 2rem;
  font-size: 1rem;
}

/* Favorites grid improvements */
.favorites-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  padding-top: 1rem;
}

.favorites-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--primary-green);
}

.favorites-header h2 {
  margin: 0;
  color: var(--primary-green);
  font-size: 1.8rem;
  font-weight: 700;
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.favorite-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
}

.favorite-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.product-image-container {
  position: relative;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

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

.remove-favorite-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remove-favorite-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.product-info {
  padding: 1.5rem;
}

.product-info h3 {
  margin: 0 0 0.5rem 0;
  color: var(--dark-gray);
  font-size: 1.1rem;
  font-weight: 600;
}

.product-price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary-orange);
  margin-bottom: 1rem;
}

.product-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-add-to-cart {
  background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
  color: white;
  border: none;
  padding: 0.8rem 1.2rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  flex: 1;
}

.btn-add-to-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(34, 139, 34, 0.4);
}

@media (max-width: 480px) {
  .categorias-grid-modern {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .categorias-main-modern {
    padding: 1rem;
  }

  .subcategorias-panel-modern {
    left: 0;
    width: 100vw;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Mobile adjustments for navigation buttons */
  .back-btn-icon {
    padding: 0.6rem;
    margin-right: 0.5rem;
  }

  .btn-icon {
    width: 20px;
    height: 20px;
  }

  .page-header {
    padding: 1rem;
  }

  .page-header h1 {
    font-size: 1.4rem;
  }

  .compras-header h2,
  .faq-header h1,
  .categorias-header-modern h1,
  .checkout-header h1 {
    font-size: 1.4rem;
  }

  .faq-header,
  .checkout-header {
    padding: 1rem;
  }
}

/* Header Counter Badges */
.favorites-badge {
  position: absolute;
  top: 2px;
  right: 4px;
  background: #ff4757;
  color: white;
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  z-index: 10;
  border: 2px solid white;
}

.cart-badge.enhanced-badge,
.notification-badge.enhanced-badge,
.favorites-badge.enhanced-badge {
  background: #ff4757;
  color: white;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 2px;
  right: 4px;
  border: 2px solid white;
  font-weight: 700;
  animation: pulse 2s infinite;
  z-index: 10;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Favorites Page Styles */
.favorites-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.page-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  background: white;
  border-bottom: 1px solid var(--border-color);
}

.back-btn {
  background: none;
  border: none;
  color: var(--primary-green);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: var(--transition);
}

.back-btn:hover {
  background: var(--light-gray);
}

.favorites-tabs {
  display: flex;
  background: white;
  border-bottom: 1px solid var(--border-color);
}

.favorites-tabs .tab {
  flex: 1;
  padding: 1rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
}

.favorites-tabs .tab:hover {
  background: var(--light-gray);
}

.favorites-tabs .tab.active {
  border-bottom-color: var(--primary-green);
  color: var(--primary-green);
}

.favorites-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.favorites-content h2 {
  margin-bottom: 2rem;
  color: var(--dark-gray);
}

.empty-favorites {
  text-align: center;
  padding: 4rem 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow-light);
}

.empty-favorites p {
  margin-bottom: 2rem;
  color: #666;
  font-size: 1.1rem;
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.favorite-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-light);
  transition: var(--transition);
  position: relative;
}

.favorite-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-medium);
}

.favorite-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.favorite-info {
  padding: 1rem;
}

.favorite-info h3 {
  margin-bottom: 0.5rem;
  color: var(--dark-gray);
}

.favorite-category {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.favorite-price {
  color: var(--primary-green);
  font-weight: bold;
  font-size: 1.1rem;
}

.remove-favorite {
  position: absolute;
  top: 10px;
  right: 10px;
  background: white;
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-light);
  transition: var(--transition);
}

.remove-favorite:hover {
  transform: scale(1.1);
}

.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.favorite-store,
.favorite-search {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: var(--shadow-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.store-info h3,
.search-info h3 {
  margin-bottom: 0.5rem;
  color: var(--dark-gray);
}

.store-stats {
  display: flex;
  gap: 1rem;
  color: #666;
  font-size: 0.9rem;
}

.search-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.btn-secondary {
  background: white;
  color: var(--primary-green);
  border: 2px solid var(--primary-green);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-secondary:hover {
  background: var(--primary-green);
  color: white;
}

/* Animación del gradiente del header para navbar */
@keyframes gentleFlowHeader {
  0%, 100% { 
    background-position: 0% 50%; 
    filter: brightness(1.05) saturate(1.1);
  }
  25% { 
    background-position: 100% 20%; 
    filter: brightness(1.1) saturate(1.15);
  }
  50% { 
    background-position: 50% 100%; 
    filter: brightness(1.08) saturate(1.12);
  }
  75% { 
    background-position: 20% 30%; 
    filter: brightness(1.12) saturate(1.18);
  }
}

/* Animaciones suaves */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.category-item,
.product-card {
  animation: fadeInUp 0.6s ease-out;
}

.category-item:nth-child(even) {
  animation-delay: 0.1s;
}

.category-item:nth-child(odd) {
  animation-delay: 0.2s;
}

/* ===== ORDER CONFIRMATION STYLES ===== */
.order-confirmation-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.confirmation-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid #f3f4f6;
}

.status-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.status-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: #1f2937;
}

.status-message {
  font-size: 1.1rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

.order-details-card {
  background: #f9fafb;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid #e5e7eb;
}

.order-details-card h3 {
  margin: 0 0 1.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e5e7eb;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  font-weight: 500;
  color: #6b7280;
}

.detail-value {
  font-weight: 600;
  color: #1f2937;
  text-align: right;
}

.order-items-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.order-items-section h4 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
}

.items-list {
  space-y: 0.5rem;
}

.item-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 0;
  font-size: 0.95rem;
  border-bottom: 1px solid #f3f4f6;
  gap: 1rem;
}

.item-row:last-child {
  border-bottom: none;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.item-title {
  font-weight: 600;
  color: #1f2937;
  font-size: 1rem;
  line-height: 1.4;
}

.item-category {
  font-size: 0.8rem;
  color: #6b7280;
  background: #f3f4f6;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  width: fit-content;
  text-transform: capitalize;
}

.item-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  margin-top: 0.5rem;
}

.item-pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  text-align: right;
  min-width: 140px;
}

.item-quantity {
  font-size: 0.9rem;
  color: #6b7280;
}

.item-unit-price {
  font-size: 0.9rem;
  color: #6b7280;
}

.item-total-price {
  font-weight: 600;
  color: #1f2937;
  font-size: 1rem;
}

.items-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid #e5e7eb;
  font-weight: 600;
  font-size: 1.1rem;
}

.items-total-label {
  color: #374151;
}

.items-total-value {
  color: var(--primary-green);
  font-size: 1.2rem;
}

.polling-info {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.polling-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-weight: 500;
  color: #92400e;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #f59e0b;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.polling-progress {
  width: 100%;
  height: 4px;
  background: #fcd34d;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: #f59e0b;
  transition: width 0.3s ease;
  border-radius: 2px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.confirmation-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.rejected-actions, .processing-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.confirmation-actions .btn-primary {
  background: linear-gradient(135deg, var(--primary-green), #059669);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1;
  min-width: 200px;
}

.confirmation-actions .btn-primary:hover {
  background: linear-gradient(135deg, #059669, var(--primary-green));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.confirmation-actions .btn-secondary {
  background: white;
  color: #6b7280;
  border: 2px solid #e5e7eb;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1;
  min-width: 200px;
}

.confirmation-actions .btn-secondary:hover {
  border-color: #9ca3af;
  color: #374151;
  transform: translateY(-1px);
}

.confirmation-footer {
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.5;
}

.confirmation-loading {
  text-align: center;
  padding: 4rem 2rem;
  color: #6b7280;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .order-confirmation-container {
    margin: 1rem;
    padding: 1.5rem;
  }
  
  .status-icon {
    font-size: 3rem;
  }
  
  .status-title {
    font-size: 1.5rem;
  }
  
  .rejected-actions, .processing-actions {
    flex-direction: column;
  }
  
  .confirmation-actions .btn-primary,
  .confirmation-actions .btn-secondary {
    min-width: auto;
  }
  
  .detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  .detail-value {
    text-align: left;
    font-size: 0.95rem;
  }
}

/* ===== REFUNDS PANEL STYLES ===== */
.refunds-panel {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.refunds-container {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

.orders-section, .refund-form-section, .refund-history-section {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}

.orders-section h3, .refund-form-section h3, .refund-history-section h3 {
  margin: 0 0 1.5rem 0;
  color: #1f2937;
  font-size: 1.25rem;
  font-weight: 600;
}

/* Orders List */
.orders-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.order-item {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f9fafb;
}

.order-item:hover {
  border-color: #d1d5db;
  transform: translateY(-1px);
}

.order-item.selected {
  border-color: var(--primary-green);
  background: rgba(16, 185, 129, 0.05);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.order-id {
  font-weight: 600;
  color: #374151;
  font-family: 'Courier New', monospace;
}

.order-amount {
  font-weight: 700;
  color: var(--primary-green);
  font-size: 1.1rem;
}

.order-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.order-info {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.9rem;
  color: #6b7280;
}

.buyer {
  color: #374151;
  font-weight: 500;
}

.status {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.status-approved {
  background: #d1fae5;
  color: #065f46;
}

.status-pending {
  background: #fef3c7;
  color: #92400e;
}

.order-items {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 0.5rem;
}

.item-summary {
  background: #f3f4f6;
  padding: 0.5rem;
  border-radius: 6px;
  margin-top: 0.25rem;
}

/* Refund Form */
.selected-order-info {
  background: #f0f9ff;
  border: 1px solid #0ea5e9;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.selected-order-info h4 {
  margin: 0 0 0.5rem 0;
  color: #0c4a6e;
  font-size: 1.1rem;
}

.selected-order-info p {
  margin: 0.25rem 0;
  color: #075985;
}

.refund-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 600;
  color: #374151;
  font-size: 0.95rem;
}

.refund-type-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.radio-option:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.radio-option input[type="radio"]:checked + span {
  color: var(--primary-green);
  font-weight: 600;
}

.radio-option input[type="radio"]:checked {
  accent-color: var(--primary-green);
}

.form-input, .form-textarea {
  padding: 0.75rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
  font-family: inherit;
}

.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-group small {
  color: #6b7280;
  font-size: 0.85rem;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.btn-secondary, .btn-danger {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  min-width: 120px;
}

.btn-secondary {
  background: #f3f4f6;
  color: #374151;
  border: 2px solid #e5e7eb;
}

.btn-secondary:hover:not(:disabled) {
  background: #e5e7eb;
  border-color: #d1d5db;
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-secondary:disabled, .btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Refund History */
.refund-history-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.refund-item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  background: #f9fafb;
}

.refund-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.refund-id {
  font-weight: 600;
  color: #374151;
  font-family: 'Courier New', monospace;
}

.refund-amount {
  font-weight: 700;
  color: #ef4444;
  font-size: 1.1rem;
}

.refund-details {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.9rem;
  color: #6b7280;
}

.refund-order, .refund-reason, .refund-date {
  color: #374151;
}

.refund-status {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #6b7280;
  font-style: italic;
}

.loading-message {
  text-align: center;
  padding: 4rem 2rem;
  color: #6b7280;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .refunds-panel {
    padding: 1rem;
  }
  
  .order-info {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .order-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .refund-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .refund-details {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ============================================================================
   🖼️ ESTILOS DESKTOP PARA IMAGEN DE VENDEDOR EN PRODUCTDETAIL
   ============================================================================ */

.seller-avatar-compact {
  width: 69px;
  height: 69px;
  border-radius: 50%;
  object-fit: cover;
  background: #e0e0e0;
}

.seller-avatar-placeholder-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #666;
}

/* ============================================================================
   🔧 LAYOUTS HORIZONTALES MÓVIL - MÁXIMA PRECEDENCIA (FINAL DEL ARCHIVO)
   ============================================================================
   CRÍTICO: Este media query DEBE estar AL FINAL para tener máxima precedencia
   Resetea TODOS los estilos que fuerzan column layout en mobile
   ============================================================================ */

@media (max-width: 480px) {
  /* ✅ PRECIO Y CANTIDAD AUMENTADOS +20% */
  .purchase-column-expanded .current-price {
    font-size: 1.62rem !important; /* Aumentado +20% (1.35rem * 1.2) */
    line-height: 1.1 !important;
  }
  
  .purchase-column-expanded .quantity-label {
    font-size: 0.9072rem !important; /* Aumentado +20% (0.756rem * 1.2) */
  }
  
  /* 🎯 QUANTITY CONTROLS: Tamaño funcional para móvil */
  .purchase-column-expanded .quantity-controls {
    height: 40px !important;
    min-width: 135px !important;
    flex-shrink: 0 !important;
  }
  
  /* 👆 BOTONES: Tamaño táctil mínimo 40px en 480px */
  .purchase-column-expanded .quantity-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  
  .purchase-column-expanded .quantity-input {
    font-size: 0.81rem !important; /* Reducido -10% adicional de 0.9rem */
  }
  
  .purchase-column-expanded .stock-info {
    font-size: 0.7245rem !important; /* Aumentado +15% (0.63rem * 1.15) */
  }

  /* ✅ REDUCCIÓN ESPACIADO VERTICAL */
  .purchase-column-expanded .price-quantity-horizontal {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 0.25rem !important; /* Reducido de 0.4rem para que entre completamente */
    margin-bottom: 0.5rem !important; /* Reducido de 0.8rem */
  }

  .purchase-column-expanded .product-actions {
    gap: 0.4rem !important; /* Reducido de 0.6rem */
    margin-top: 0.4rem !important; /* Reducido espaciado */
    margin-bottom: 0.4rem !important; /* Reducido espaciado */
  }

  /* 📊 PRICING: Reducir espacio en móvil (480px) para dar más al selector */
  .purchase-column-expanded .price-quantity-horizontal .pricing-section {
    flex: 1 !important;
    max-width: calc(45% - 0.2rem) !important;
    width: auto !important;
    min-width: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    flex-shrink: 1 !important;
  }
  
  /* ✅ CORRECCIÓN: Asegurar que elementos de precio se apilen verticalmente */
  .purchase-column-expanded .pricing-section .original-price,
  .purchase-column-expanded .pricing-section .current-price,
  .purchase-column-expanded .pricing-section .product-installments {
    width: 100% !important;
    display: block !important;
  }

  /* 🎯 QUANTITY SELECTOR: Más espacio en móvil (480px) */
  .purchase-column-expanded .price-quantity-horizontal .quantity-selector {
    flex: 1 !important;
    max-width: calc(55% - 0.2rem) !important;
    width: auto !important;
    min-width: 140px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.15rem !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }

  /* ✅ NUEVO LAYOUT SHIPPING-SELLER REORGANIZADO */
  .shipping-seller-container {
    margin: 0.6rem 0 !important; /* Más cerca de botones */
  }
  
  .shipping-seller-row-new {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: flex-start !important;
    margin-bottom: 8px !important;
  }
  
  /* Columna izquierda: Envío y Devolución verticales */
  .shipping-return-column {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    max-width: 50% !important;
  }
  
  /* Columna derecha: Vendedor */
  .seller-info-column {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 50% !important;
  }
  
  .seller-compact {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    text-align: center !important;
  }
  
  .seller-avatar-compact {
    width: 41px !important;
    height: 41px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #e0e0e0 !important;
  }
  
  .seller-avatar-placeholder-compact {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.38rem !important;
    color: #666 !important;
  }
  
  .seller-name-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
  }
  
  .seller-name-link-compact {
    background: none !important;
    border: none !important;
    color: #3483fa !important;
    font-size: 0.8625rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 2px 0 !important;
    text-align: center !important;
  }
  
  .seller-name-link-compact:hover {
    text-decoration: underline !important;
  }
}

/* ============================================================================
   📱 PRODUCT CARD MÓVIL COMPACTO - GRILLA 2x2 (4 PRODUCTOS SIN SCROLL)
   ============================================================================
   Optimización ultra-compacta para dashboard comprador móvil
   ============================================================================ */

@media (max-width: 480px) {
  /* 🎯 TARJETA COMPACTA: Altura total ~165px (permite 4 productos en pantalla) */
  .product-card {
    min-height: 175px !important; /* Ajustado +10px (165px → 175px) */
    height: auto !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
  }

  /* 📷 IMAGEN REDUCIDA: 140px → 90px → 100px (+10px) */
  .product-image-container {
    height: 100px !important; /* Aumentado +10px (90px → 100px) */
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  }

  /* 📝 INFO COMPACTA: 70px → 55px */
  .product-info {
    padding: 5px 8px !important;
    height: 55px !important;
    gap: 2px !important;
  }

  /* 🔤 TÍTULO: Tamaño reducido pero legible */
  .product-info h3 {
    font-size: 11.5px !important;
    line-height: 1.1 !important;
    margin: 0 0 2px 0 !important;
    min-height: 22px !important;
    -webkit-line-clamp: 2 !important;
  }

  /* 💰 PRECIO: Reducido pero visible */
  .product-price {
    font-size: 15px !important;
    margin-bottom: 1px !important;
    font-weight: 600 !important;
  }

  /* 💳 CUOTAS: Más pequeño */
  .product-installments {
    font-size: 9.5px !important;
    margin-bottom: 3px !important;
  }

  /* 🚚 ENVÍO GRATIS: Compacto */
  .product-shipping {
    font-size: 10px !important;
    padding: 2px 6px !important;
    margin-bottom: 4px !important;
  }

  .product-shipping img {
    width: 12px !important;
    height: 12px !important;
  }

  /* 🛒 BOTÓN: Más pequeño pero clickeable */
  .add-to-cart-btn {
    padding: 5px 10px !important;
    font-size: 11px !important;
    border-radius: 5px !important;
  }

  /* 💸 PRECIO ANTERIOR: Reducido */
  .product-price-before {
    font-size: 12px !important;
    margin-bottom: 2px !important;
  }

  /* 🏷️ CATEGORÍA BADGE: Compacto */
  .product-category-badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
    margin-bottom: 3px !important;
  }

  /* 📊 FOOTER: Espaciado mínimo */
  .product-footer {
    gap: 2px !important;
    margin-top: 2px !important;
  }

  /* ⭐ BADGES: Posición y tamaño ajustados */
  .offer-badge,
  .featured-badge {
    font-size: 9px !important;
    padding: 3px 6px !important;
    top: 6px !important;
    right: 6px !important;
  }

  .offer-tag {
    font-size: 8px !important;
    padding: 2px 5px !important;
    top: 6px !important;
    left: 6px !important;
  }

  .offer-tag-minimal {
    font-size: 8px !important;
    padding: 2px 5px !important;
    top: 6px !important;
    left: 6px !important;
  }

  /* ❤️ FAVORITO: Tamaño reducido */
  .favorite-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
    top: 6px !important;
    right: 6px !important;
  }

  /* 🎁 OFERTA INFO: Tamaño ajustado para prevenir overflow */
  .savings {
    font-size: 0.85rem !important;
    padding: 4px 6px !important;
    line-height: 1.3 !important;
  }

  .payment-promo {
    font-size: 0.85rem !important;
    padding: 4px 6px !important;
    line-height: 1.3 !important;
  }

  .expiring-warning {
    font-size: 8px !important;
    padding: 2px 5px !important;
  }

  /* 📐 GRID: Asegurar 2 columnas con gap reducido */
  .featured-products-grid,
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 8px 4px !important;
  }
}

/* ============================================================================
   📱 PANTALLAS MUY PEQUEÑAS (<390px) - PREVENIR OVERFLOW
   ============================================================================ */
@media (max-width: 389px) {
  /* ✅ CORRECCIÓN: Evitar overflow en ProductDetail para pantallas muy pequeñas */
  .tab-content-responsive {
    padding: 0.5rem 0.25rem !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  
  /* ✅ CORRECCIÓN: Ajustar contenedor principal para evitar overflow */
  .product-detail-main {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding: 0.5rem 0.25rem !important;
  }
  
  /* 🎯 CRÍTICO: Reducir padding del contenedor padre para ganar espacio */
  .purchase-column-expanded {
    padding: 0.5rem !important;
  }
  
  /* ✅ CORRECCIÓN: Ajustar price-quantity-horizontal para pantallas muy pequeñas */
  .purchase-column-expanded .price-quantity-horizontal {
    gap: 0.25rem !important;
    padding: 0 !important;
    max-width: 100% !important;
  }
  
  /* 📊 PRICING: Reducir espacio para dar más al selector */
  .purchase-column-expanded .price-quantity-horizontal .pricing-section {
    max-width: calc(40% - 0.1rem) !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex-shrink: 1 !important;
  }
  
  /* 🎯 QUANTITY SELECTOR: Reducido -25% para pantallas <390px */
  .purchase-column-expanded .price-quantity-horizontal .quantity-selector {
    max-width: calc(60% - 0.1rem) !important;
    min-width: 109px !important;
    flex-shrink: 0 !important;
  }
  
  /* ✅ MEJORADO: Tamaños ajustados para prevenir overflow manteniendo legibilidad */
  .purchase-column-expanded .current-price {
    font-size: 1.4rem !important;
    word-break: break-word !important;
  }
  
  .purchase-column-expanded .original-price {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }
  
  .purchase-column-expanded .product-installments {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
    margin: 0.3rem 0 !important;
  }
  
  .purchase-column-expanded .quantity-label {
    font-size: 0.75rem !important;
  }
  
  /* 🎯 QUANTITY CONTROLS: Reducido -25% (135px → 101px) */
  .purchase-column-expanded .quantity-controls {
    min-width: 101px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
  }
  
  /* 👆 BOTONES: Reducido -25% (40px → 30px) manteniendo funcionalidad táctil */
  .purchase-column-expanded .quantity-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }
  
  /* 🔢 INPUT: Reducido -25% (45px → 34px) */
  .purchase-column-expanded .quantity-input {
    min-width: 34px !important;
    max-width: 40px !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    padding: 0.3rem 0.2rem !important;
  }
  
  .purchase-column-expanded .stock-info {
    font-size: 0.6rem !important;
    word-break: break-word !important;
  }
  
  /* ✅ CORRECCIÓN: Asegurar que todos los contenedores respeten el ancho máximo */
  .purchase-column-expanded,
  .product-variants-section,
  .purchase-content {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* ✅ CORRECCIÓN: Prevenir overflow en todos los hijos */
  .purchase-column-expanded * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Ocultar botón de carrito del header solo en móvil */
@media (max-width: 768px) {
  .header-action-btn.cart-btn {
    display: none !important;
  }
}

/* ===================================
   SISTEMA PROFESIONAL DE PRODUCTOS
   Diseño sofisticado y moderno
   =================================== */

/* Badge de oferta minimalista y sutil */
.offer-tag-minimal {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 87, 51, 0.10);
  backdrop-filter: blur(8px);
  color: #ff5733;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  z-index: 2;
  border: 1px solid rgba(255, 87, 51, 0.25);
  box-shadow: 0 2px 8px rgba(255, 87, 51, 0.12);
  transition: all 0.2s ease;
}

.offer-tag-minimal:hover {
  background: rgba(255, 87, 51, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 87, 51, 0.18);
}

/* Products grid moderno - 4 productos por fila en desktop, 2 en móvil */
.products-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px;
  padding: 32px 20px;
  background: #f8fafc;
  max-width: 1400px;
  margin: 0 auto;
}

/* Responsive breakpoints optimizados */
@media (max-width: 1200px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px;
    padding: 24px 16px;
  }
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
    padding: 20px 16px;
    max-width: 100%;
  }
  
  .products-grid .product-card,
  .product-card {
    height: auto !important;
    min-height: 340px !important;
  }
  
  .product-image-container {
    height: 180px;
    flex-shrink: 0;
  }
  
  .product-info {
    height: auto !important;
    flex: 1;
  }
  
  /* 🔧 FIX: Títulos responsive en tablet - UNA SOLA LÍNEA */
  .products-grid .product-card .product-info h3,
  .product-card .product-info h3 {
    white-space: nowrap !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 2px !important;
    column-gap: 2px !important;
    padding: 4px 2px !important;
    max-width: 100% !important;
  }
  
  .products-grid .product-card,
  .product-card {
    height: auto !important;
    min-height: 280px !important;
    border-radius: 12px !important;
  }
  
  /* ✅ CORRECCIÓN: Asegurar altura IGUAL para tarjetas con ofertas - MISMO height que tarjetas sin oferta */
  .products-grid .product-card.with-offer,
  .product-card.with-offer {
    height: auto !important;
    min-height: 280px !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  
  .product-image-container {
    height: 168px !important;
    flex-shrink: 0 !important;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px !important;
  }
  
  /* ✅ UNIFICACIÓN: Imagen IGUAL para tarjetas con ofertas */
  .product-card.with-offer .product-image-container {
    height: 168px !important;
  }
  
  .product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  
  .product-info {
    padding: 2px 8px !important;
    height: auto !important;
    min-height: 112px !important;
    gap: 1px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  
  /* ✅ UNIFICACIÓN COMPLETA: Info con MISMOS valores que tarjetas estándar - Opción A */
  .product-card.with-offer .product-info {
    height: auto !important;
    min-height: 112px !important;
    max-height: none !important;
    padding: 2px 4px 2px 4px !important;
    overflow: hidden !important;
    gap: 0px !important;
    justify-content: flex-start !important;
  }
  
  /* ✅ COMPRESIÓN MÁXIMA: Todos los elementos de ofertas en móvil */
  .product-card.with-offer .product-footer {
    gap: 0px !important;
    margin-top: 0px !important;
  }
  
  /* 1. Categoría badge: 10px (ELEMENTO SECUNDARIO) */
  .product-card.with-offer .product-category-badge {
    font-size: 10px !important;
    padding: 1px 4px !important;
    margin-top: -5px !important;
    margin-bottom: -2px !important;
    line-height: 1.0 !important;
  }
  
  /* 5. Cuotas sin interés: 11px (ELEMENTO IMPORTANTE) */
  .product-card.with-offer .product-installments {
    font-size: 11px !important;
    margin: 0px !important;
    gap: 2px !important;
    line-height: 1.0 !important;
    padding: 0px !important;
  }
  
  /* 3. Precio original (tachado): 10px (ELEMENTO SECUNDARIO) */
  .product-card.with-offer .product-price-before {
    font-size: 10px !important;
    margin: 0px !important;
    padding: 0px !important;
    line-height: 1.0 !important;
  }
  
  /* 4. Precio con descuento: 15px (ELEMENTO CRÍTICO - MÁS IMPORTANTE) */
  .product-card.with-offer .product-price,
  .product-card.with-offer .discounted-price {
    font-size: 15px !important;
    margin: 0px !important;
    padding: 0px !important;
    line-height: 1.0 !important;
  }
  
  /* 6. Ahorras $XXX: 11px (ELEMENTO IMPORTANTE) */
  .product-card.with-offer .savings-amount,
  .product-card.with-offer .product-savings {
    font-size: 11px !important;
    margin: 0px !important;
    padding: 0px !important;
    line-height: 1.0 !important;
  }
  
  /* 7. Envío gratis con icono: 10px (ELEMENTO SECUNDARIO) */
  .product-card.with-offer .product-shipping {
    font-size: 10px !important;
    padding: 1px 3px !important;
    margin: 0px !important;
    line-height: 1.0 !important;
    gap: 2px !important;
  }
  
  .product-card.with-offer .product-shipping img {
    width: 10px !important;
    height: 10px !important;
  }
  
  /* 8. Botón "Agregar al Carrito": 11px (ELEMENTO CRÍTICO - MÍNIMO 11px) */
  .product-card.with-offer .add-to-cart-btn {
    font-size: 11px !important;
    padding: 5px 8px !important;
    margin-top: -2px !important;
    line-height: 1.0 !important;
  }
  
  /* 🔧 FIX: Títulos responsive - UNA SOLA LÍNEA */
  .products-grid .product-card .product-info h3,
  .product-card .product-info h3 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin-bottom: 1px !important;
  }
  
  /* 2. Título del producto: 11px - UNA SOLA LÍNEA */
  .product-card.with-offer .product-info h3 {
    font-size: 11px !important;
    line-height: 1.0 !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* 🔧 FIX: Categoría badge compacto */
  .product-category-badge {
    font-size: 0.55rem;
    padding: 1px 4px;
    line-height: 1.2;
  }
  
  /* 🔧 FIX: Precio compacto */
  .product-price {
    font-size: 0.9rem !important;
    margin: 1px 0 !important;
  }
  
  /* 🔧 FIX: Cuotas compacto - Color heredado (permite override inline) */
  .product-installments {
    font-size: 0.6rem !important;
    margin: 1px 0 !important;
    /* ✅ NO definir color aquí para permitir estilos inline específicos */
    font-weight: 400 !important;
  }
  
  /* 🔧 FIX: Botón agregar compacto - UNIFICADO */
  .product-card .btn-primary,
  .add-to-cart-btn {
    font-size: 11px !important;
    padding: 5px 8px !important;
    margin-top: -2px !important;
  }
  
  /* 🔧 FIX: Vendedor responsive */
  .product-seller span {
    max-width: 100px;
    font-size: 0.6rem;
  }
  
  /* ✅ COMPACTACIÓN PÁGINA DE OFERTAS: Reducir 30px de altura total (-11.5%) */
  
  /* Grid específico para ofertas: 2px de espaciado total */
  .offers-grid {
    padding: 2px 2px !important;
    row-gap: 2px !important;
    column-gap: 2px !important;
  }
  
  /* Altura de card: 260px → 230px */
  .offers-grid .product-card,
  .offers-grid .product-card.with-offer {
    min-height: 230px !important;
  }
  
  /* Altura de imagen: 168px → 145px (reducción proporcional) */
  .offers-grid .product-card .product-image-container,
  .offers-grid .product-card.with-offer .product-image-container {
    height: 145px !important;
  }
  
  /* Ajuste de padding y gaps en info */
  .offers-grid .product-card .product-info {
    padding: 2px 10px 3px 6px !important;
    gap: 3px !important;
    min-height: 85px !important;
  }
  
  .offers-grid .product-card.with-offer .product-info {
    padding: 2px 8px 3px 4px !important;
    gap: 0px !important;
    min-height: 85px !important;
  }
  
  .offers-grid .product-card .product-footer {
    margin-bottom: 3px !important;
    gap: 3px !important;
  }
  
  /* ✅ AUMENTO +20%: Títulos 10px → 12px */
  .offers-grid .product-card .product-info h3 {
    font-size: 12px !important;
    margin-bottom: 3px !important;
    line-height: 1.1 !important;
  }
  
  /* ✅ AUMENTO +20%: Categoría badge 9px → 10.8px */
  .offers-grid .product-card .product-category-badge,
  .offers-grid .product-card.with-offer .product-category-badge {
    font-size: 10.8px !important;
    padding: 1px 4px !important;
    margin-bottom: 3px !important;
    line-height: 1.0 !important;
  }
  
  /* ✅ AUMENTO +20%: Precios con descuento 13px → 15.6px */
  .offers-grid .product-card.with-offer .product-price,
  .offers-grid .product-card.with-offer .discounted-price {
    font-size: 15.6px !important;
    margin: 3px 0 !important;
    line-height: 1.0 !important;
  }
  
  /* ✅ AUMENTO +20%: Precio regular en cards sin oferta */
  .offers-grid .product-card .product-price:not(.discounted-price) {
    font-size: 0.96rem !important;
    margin: 3px 0 !important;
  }
  
  /* ✅ AUMENTO +20%: Cuotas 10px → 12px */
  .offers-grid .product-card .product-installments,
  .offers-grid .product-card.with-offer .product-installments {
    font-size: 12px !important;
    margin: 3px 0 !important;
    line-height: 1.0 !important;
  }
  
  /* ✅ AUMENTO +20%: Precio original tachado 9px → 10.8px */
  .offers-grid .product-card.with-offer .product-price-before,
  .offers-grid .product-card .product-price-before {
    font-size: 10.8px !important;
    line-height: 1.0 !important;
  }
  
  /* ✅ AUMENTO +20%: Íconos de envío 10px → 12px */
  .offers-grid .product-card .product-installments img,
  .offers-grid .product-card .product-shipping img {
    width: 12px !important;
    height: 12px !important;
  }
}

/* Tarjeta de producto moderna y sofisticada - MÁXIMA especificidad para sobrescribir App.css */
.products-grid .product-card,
.product-card {
  background: white !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  border: 1.5px solid rgba(203, 213, 225, 0.9) !important;
  position: relative !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  backdrop-filter: blur(10px) !important;
}

/* Altura solo para desktop */
@media (min-width: 769px) {
  .products-grid .product-card,
  .product-card {
    height: auto !important;
    min-height: 360px !important;
  }
}

/* Efecto hover sofisticado - Mayor especificidad */
.products-grid .product-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
}

/* Contenedor de imagen principal - más prominente */
.product-image-container {
  position: relative;
  overflow: hidden;
  height: 240px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);
  border-radius: 8px;
  min-width: 100%;
  min-height: 100%;
}

/* Clases de orientación para imágenes */
.product-image.landscape {
  object-fit: cover;
  object-position: center;
}

.product-image.portrait {
  object-fit: cover;
  object-position: center;
  width: auto;
  height: 100%;
  max-width: 100%;
}

.product-image.square {
  object-fit: cover;
  object-position: center;
}

.product-image.placeholder {
  object-fit: contain;
  opacity: 0.7;
  filter: grayscale(0.3);
}

.product-card:hover .product-image {
  transform: scale(1.08);
  filter: brightness(1.05) saturate(1.1);
  object-fit: cover;
}

/* Botón de favorito moderno */
.favorite-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
}

.favorite-btn:hover {
  transform: scale(1.15);
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  box-shadow: 0 8px 25px -8px rgba(239, 68, 68, 0.4);
}

.favorite-btn.active {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  transform: scale(1.1);
}

/* Badge de descuento premium */
.product-discount {
  position: absolute;
  top: 16px;
  left: 16px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 2;
  box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.4);
  backdrop-filter: blur(4px);
  letter-spacing: 0.025em;
}

/* Información del producto moderna */
.product-info {
  padding: 8px 16px;
  height: 120px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: white;
  overflow: hidden;
}

/* ✅ CORRECCIÓN: Asegurar altura consistente para tarjetas con ofertas en desktop */
@media (min-width: 481px) {
  .product-card.with-offer .product-info {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    overflow: hidden !important;
  }
}

/* Categoría elegante */
.product-category {
  color: #6366f1;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}

/* Badge de categoría jerárquica */
.product-category-badge {
  color: #4CAF50;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
  padding: 3px 8px;
  border-radius: 6px;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(76, 175, 80, 0.2);
  transition: all 0.3s ease;
}

.product-category-badge:hover {
  background: linear-gradient(135deg, #c8e6c9 0%, #dcedc8 100%);
  border-color: #4CAF50;
}

/* Título del producto - MÁXIMA especificidad FORZADA para sobrescribir App.css */
.products-grid .product-card .product-info h3,
.product-card .product-info h3 {
  margin: 0 0 8px 0 !important;
  color: #1e293b !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  display: block !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  min-height: 20px !important;
  max-height: 40px !important;
  letter-spacing: -0.025em !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-decoration: none !important;
  background: transparent !important;
  text-align: left !important;
}

/* Vendedor elegante */
.product-vendor {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 4px;
}

/* ✅ NUEVO: Vendedor con enlace clicable */
.product-seller {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 4px 0;
  width: fit-content;
}

.product-seller:hover {
  color: #3b82f6;
  transform: translateX(2px);
}

.product-seller .seller-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: grayscale(0.3);
  transition: filter 0.3s ease;
}

.product-seller:hover .seller-icon {
  filter: grayscale(0) brightness(1.1);
}

.product-seller span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 150px;
}

/* Sistema de precios sofisticado */
.product-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}

/* ✅ CORRECCIÓN: Footer compacto para tarjetas con ofertas */
.product-card.with-offer .product-footer {
  gap: 1px;
}

/* ✅ VENDEDOR DASHBOARD: Arreglar altura para mostrar botones */
.vendedor-dashboard .product-card .product-info {
  height: auto !important;
  min-height: 200px !important;
  overflow: visible !important;
}

/* ✅ VENDEDOR DASHBOARD: Footer horizontal con botones de acción */
.vendedor-dashboard .product-footer {
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 1px solid #f0f0f0 !important;
  padding-top: 1rem !important;
  gap: 0.5rem !important;
  margin-top: auto !important;
}

.vendedor-dashboard .product-actions {
  display: flex !important;
  gap: 0.5rem !important;
  flex-shrink: 0;
}

.vendedor-dashboard .btn-edit,
.vendedor-dashboard .btn-delete {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-size: 0.8rem !important;
  padding: 0.4rem 0.8rem !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.vendedor-dashboard .btn-edit {
  background: #007bff !important;
  color: white !important;
}

.vendedor-dashboard .btn-edit:hover {
  background: #0056b3 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,123,255,0.3);
}

.vendedor-dashboard .btn-delete {
  background: #dc3545 !important;
  color: white !important;
}

.vendedor-dashboard .btn-delete:hover {
  background: #c82333 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(220,53,69,0.3);
}

.product-price-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.product-price-before {
  font-size: 0.8rem;
  color: #94a3b8;
  text-decoration: line-through;
  font-weight: 400;
}

/* Precio original tachado (antes del descuento) */
.original-price {
  font-size: 0.9rem;
  color: #666;
  text-decoration: line-through;
  margin-bottom: 4px;
  font-weight: 400;
}

.product-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: #059669;
  letter-spacing: -0.025em;
}

/* ✅ Cuotas y promociones - Estilo heredado (permite colores específicos inline) */
.product-installments {
  /* ✅ NO definir color por defecto para permitir estilos inline */
  font-size: 11px;
  font-weight: 400;
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}

/* ✅ CORRECCIÓN: Elementos de ofertas con tamaño legible */
.product-card.with-offer .product-installments {
  font-size: 11px;
  margin: 2px 0;
  line-height: 1.1;
}

.product-card.with-offer .product-price-before {
  font-size: 0.7rem;
  margin-bottom: 1px;
}

.product-card.with-offer .product-price {
  font-size: 1rem;
}

/* Envío gratis moderno - MÁXIMA especificidad para sobrescribir App.css */
.products-grid .product-card .product-shipping,
.product-card .product-shipping {
  color: #059669 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 8px !important;
  background: rgba(5, 150, 105, 0.1) !important;
  border-radius: 6px !important;
  width: fit-content !important;
  margin-bottom: 6px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.product-shipping img {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}

/* Rating moderno */
.product-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.product-rating span {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #f59e0b;
}

.sales-count {
  color: #64748b !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
}

/* Botón agregar al carrito premium */
.add-to-cart-btn {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  width: 100%;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.4);
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.add-to-cart-btn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -8px rgba(59, 130, 246, 0.6);
}

.add-to-cart-btn:active {
  transform: translateY(0);
}

/* Sección de productos destacados moderna */
.featured-products-section {
  margin: 4rem 0;
  padding: 0 2rem;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h2 {
  font-size: 2rem;
  font-weight: 900;
  background: linear-gradient(135deg, #059669, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
}

@media (max-width: 768px) {
  .section-header h2 {
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .section-header h2 {
    font-size: 1.4rem;
  }
}

.section-header p {
  font-size: 1.25rem;
  color: #64748b;
  font-weight: 500;
  max-width: 600px;
  margin: 0 auto;
}

/* Estados de carga mejorados */
.loading-container,
.no-products-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 400px;
  grid-column: 1 / -1;
  text-align: center;
  color: #64748b;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  margin: 20px;
}

.loading-container div:first-child,
.no-products-container div:first-child {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.7;
}

.loading-container h3,
.no-products-container h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.loading-container p,
.no-products-container p {
  font-size: 1rem;
  color: #64748b;
  max-width: 400px;
}

/* Animaciones suaves */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-card {
  animation: fadeInUp 0.6s ease-out;
}

.product-card:nth-child(1) { animation-delay: 0.1s; }
.product-card:nth-child(2) { animation-delay: 0.2s; }
.product-card:nth-child(3) { animation-delay: 0.3s; }
.product-card:nth-child(4) { animation-delay: 0.4s; }
.product-card:nth-child(5) { animation-delay: 0.5s; }
.product-card:nth-child(6) { animation-delay: 0.6s; }

/* Badge de nuevo producto */
.new-product-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  padding: 6px 10px;
  border-radius: 16px;
  font-size: 0.7rem;
  font-weight: 700;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* CRÍTICO: Protección contra full-width en product grids */
.products-grid > * {
  grid-column: auto !important;
}

/* Excepciones para elementos que SÍ deben ocupar toda la fila */
.products-grid > .loading-container,
.products-grid > .no-products-container,
.products-grid > .search-empty-state {
  grid-column: 1 / -1 !important;
}

/* Refuerzo del grid con máxima especificidad - CORRECCIÓN DEFINITIVA */
.comprador-dashboard .products-grid,
.vendedor-dashboard .products-grid,
div.products-grid,
.products-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px;
  padding: 32px 20px;
  background: #f8fafc;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .comprador-dashboard .products-grid,
  .vendedor-dashboard .products-grid,
  div.products-grid,
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px;
    padding: 24px 16px;
  }
}

@media (max-width: 768px) {
  .comprador-dashboard .products-grid,
  .vendedor-dashboard .products-grid,
  div.products-grid,
  .products-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    gap: 16px !important;
    padding: 20px 12px !important;
  }
}

/* 📱 MÓVIL: Alta especificidad para override definitivo de padding/gap */
@media (max-width: 480px) {
  .comprador-dashboard .products-grid,
  .vendedor-dashboard .products-grid,
  div.products-grid,
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 4px 2px !important;
    row-gap: 2px !important;
    column-gap: 2px !important;
  }
  
  .comprador-dashboard .products-grid .product-card,
  .vendedor-dashboard .products-grid .product-card,
  div.products-grid .product-card,
  .products-grid .product-card,
  .product-card {
    min-height: 280px !important;
  }
  
  .comprador-dashboard .products-grid .product-card .product-image-container,
  .vendedor-dashboard .products-grid .product-card .product-image-container,
  div.products-grid .product-card .product-image-container,
  .products-grid .product-card .product-image-container,
  .product-image-container {
    height: 168px !important;
  }
  
  .comprador-dashboard .products-grid .product-card .product-info,
  .vendedor-dashboard .products-grid .product-card .product-info,
  div.products-grid .product-card .product-info,
  .products-grid .product-card .product-info,
  .product-info {
    min-height: 112px !important;
    padding: 4px 8px !important;
  }
  
  .comprador-dashboard .products-grid .product-card .product-info h3,
  .vendedor-dashboard .products-grid .product-card .product-info h3,
  div.products-grid .product-card .product-info h3,
  .products-grid .product-card .product-info h3,
  .product-card .product-info h3 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
}

/* ===================================
   PRODUCT Q&A SYSTEM - DISEÑO PROFESIONAL
   Sistema profesional de preguntas y respuestas
   =================================== */

/* Sección principal de Q&A - MINI */
.product-qa-section {
  background: #ffffff;
  border-radius: 6px;
  margin: 0.75rem 0;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

/* Header de la sección Q&A - MINI */
.qa-section-header {
  background: #f9fafb;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

.qa-header-content {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0;
}

.qa-icon {
  font-size: 0.875rem;
  color: #4CAF50;
  flex-shrink: 0;
}

.qa-title-group {
  flex: 1;
}

.qa-title-group h3 {
  margin: 0;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
}

.qa-count {
  background: #4CAF50;
  color: white;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
}

.qa-subtitle {
  display: none;
}

/* Contenedor del formulario - MINI */
.qa-form-container {
  padding: 0.5rem 0.75rem;
  background: #fafafa;
  border-bottom: 1px solid #e5e7eb;
}

.qa-form-wrapper {
  max-width: 100%;
  margin: 0;
}

.qa-form-header {
  display: none;
}

/* Formulario de pregunta mejorado */
.qa-form {
  width: 100%;
}

.qa-input-container {
  position: relative;
  background: white;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  transition: border-color 0.2s;
}

.qa-input-container:focus-within {
  border-color: #4CAF50;
}

.qa-textarea {
  width: 100%;
  min-height: 35px;
  padding: 0.4rem;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.2;
  resize: vertical;
  background: transparent;
  box-sizing: border-box;
}

.qa-textarea:focus {
  outline: none;
}

.qa-textarea::placeholder {
  color: #9ca3af;
  font-style: italic;
  opacity: 0.8;
}

/* Acciones del formulario mejoradas */
.qa-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  gap: 1.5rem;
  padding: 0 0.5rem;
}

.qa-char-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: #6b7280;
  font-size: 0.875rem;
}

.qa-char-counter {
  font-weight: 700;
  color: #374151;
}

.qa-min-chars {
  font-style: italic;
  opacity: 0.8;
}

/* Botón enviar pregunta profesional */
.qa-submit-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.6rem;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.2s;
  height: 30px;
}
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.qa-submit-btn:hover:not(.disabled) {
  background: #45a049;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

.qa-submit-btn.disabled {
  background: #d1d5db;
  color: #6b7280;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.qa-submit-btn.submitting {
  background: #6b7280;
  cursor: not-allowed;
}

.qa-btn-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.qa-btn-icon {
  font-size: 1.125rem;
}

/* Tip del formulario mejorado */
.qa-form-tip {
  display: none;
}

.qa-tip-icon {
  font-size: 1.25rem;
  color: #3b82f6;
  margin-top: 0.125rem;
  flex-shrink: 0;
}

/* Prompt de login mejorado */
.qa-login-prompt {
  max-width: 900px;
  margin: 0 auto;
}

.qa-login-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem;
  background: linear-gradient(135deg, #fef3c7, #ffffff);
  border: 3px solid #fbbf24;
  border-radius: 20px;
  box-shadow: 
    0 20px 25px -5px rgba(251, 191, 36, 0.2),
    0 10px 10px -5px rgba(251, 191, 36, 0.1);
  position: relative;
  overflow: hidden;
}

.qa-login-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.qa-login-icon {
  font-size: 3rem;
  color: #d97706;
  background: linear-gradient(135deg, #fed7aa, #fdba74);
  padding: 1rem;
  border-radius: 50%;
  box-shadow: 0 8px 12px rgba(217, 119, 6, 0.2);
}

.qa-login-text {
  flex: 1;
}

.qa-login-text h4 {
  margin: 0 0 0.75rem 0;
  color: #92400e;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.qa-login-text p {
  margin: 0;
  color: #a16207;
  font-size: 1rem;
  line-height: 1.6;
}

.qa-login-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #d97706, #f59e0b);
  color: white;
  border: none;
  border-radius: 16px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 
    0 10px 15px -3px rgba(217, 119, 6, 0.3),
    0 4px 6px -2px rgba(217, 119, 6, 0.1);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.qa-login-btn:hover {
  background: linear-gradient(135deg, #b45309, #d97706);
  transform: translateY(-3px);
  box-shadow: 
    0 20px 25px -5px rgba(217, 119, 6, 0.4),
    0 10px 10px -5px rgba(217, 119, 6, 0.2);
}

.qa-login-btn-icon {
  font-size: 1.125rem;
}

/* Contenedor de preguntas */
.qa-questions-container {
  padding: 2.5rem;
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
}

/* Estado de carga mejorado */
.qa-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 4rem;
  color: #6b7280;
  font-size: 1.125rem;
  font-weight: 500;
}

.qa-loading-spinner {
  font-size: 2rem;
  color: #3b82f6;
  animation: spin 1s linear infinite;
}

/* Lista de preguntas mejorada */
.qa-questions-list {
  max-width: 1000px;
  margin: 0 auto;
}

.qa-list-header {
  margin-bottom: 2.5rem;
  text-align: center;
}

.qa-list-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.qa-list-icon {
  font-size: 2rem;
  color: #6366f1;
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  padding: 0.75rem;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(99, 102, 241, 0.2);
}

.qa-list-title h4 {
  margin: 0;
  color: #374151;
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.qa-list-subtitle {
  color: #6b7280;
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
}

/* Grid de preguntas mejorado */
.qa-questions-grid {
  display: grid;
  gap: 0.5rem;
}

.qa-list-container {
  padding: 0.5rem 0.75rem;
  background: white;
}

/* Tarjeta de pregunta ULTRA COMPACTA - 35% altura */
.qa-question-card {
  background: #ffffff;
  border-left: 3px solid #4CAF50;
  border-top: 1px solid #f3f4f6;
  border-right: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
  border-radius: 4px;
  padding: 0.5rem 0.65rem;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.qa-question-card:hover {
  border-left-color: #45a049;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.qa-question-header {
  margin-bottom: 0.35rem;
}

.qa-question-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.qa-user-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.qa-user-avatar {
  width: 22px;
  height: 22px;
  background: #3b82f6;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.6875rem;
  flex-shrink: 0;
}

.qa-user-details {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.qa-user-name {
  font-weight: 600;
  color: #374151;
  font-size: 0.8125rem;
  line-height: 1;
}

.qa-question-date {
  font-size: 0.6875rem;
  color: #9ca3af;
  font-weight: 400;
  line-height: 1;
}

.qa-question-number {
  background: #f3f4f6;
  color: #6b7280;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* Contenido de pregunta COMPACTO */
.qa-question-content {
  margin-top: 0.35rem;
}

.qa-question-text {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  margin-bottom: 0;
}

.qa-question-label {
  color: #4CAF50;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}

.qa-question-text p {
  margin: 0;
  color: #374151;
  line-height: 1.4;
  font-size: 0.8125rem;
  font-weight: 400;
}

/* Contenido de respuesta ULTRA COMPACTO - 25% altura */
.qa-answer-content {
  background: #f0fdf4;
  border-left: 3px solid #4CAF50;
  border-top: 1px solid #d1fae5;
  border-right: 1px solid #d1fae5;
  border-bottom: 1px solid #d1fae5;
  border-radius: 3px;
  padding: 0.4rem 0.5rem;
  margin-top: 0.4rem;
  box-shadow: none;
  position: relative;
}

.qa-answer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
  gap: 0.35rem;
}

.qa-answer-label {
  color: #4CAF50;
  font-weight: 600;
  font-size: 0.75rem;
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}

.qa-seller-badge {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: #4CAF50;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.qa-seller-icon {
  font-size: 0.75rem;
}

.qa-answer-text p {
  margin: 0;
  color: #166534;
  line-height: 1.4;
  font-size: 0.8125rem;
  font-weight: 400;
}

/* Respuesta pendiente COMPACTA */
.qa-pending-answer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-top: 1px solid #fed7aa;
  border-right: 1px solid #fed7aa;
  border-bottom: 1px solid #fed7aa;
  border-radius: 3px;
  padding: 0.4rem 0.5rem;
  margin-top: 0.4rem;
}

.qa-pending-icon {
  font-size: 0.875rem;
  color: #f59e0b;
  flex-shrink: 0;
}

.qa-pending-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.qa-pending-text {
  color: #9a3412;
  font-weight: 600;
  font-style: italic;
  font-size: 1rem;
}

.qa-pending-timeline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.qa-pending-dot {
  width: 10px;
  height: 10px;
  background: #ea580c;
  border-radius: 50%;
  animation: pulse 2s infinite;
  box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.2);
}

.qa-pending-line {
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, #ea580c, transparent);
  border-radius: 2px;
  animation: flow 2s infinite;
}

@keyframes pulse {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1); 
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.2);
  }
  50% { 
    opacity: 0.7; 
    transform: scale(0.9); 
    box-shadow: 0 0 0 8px rgba(234, 88, 12, 0.1);
  }
}

@keyframes flow {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

/* Estado vacío mejorado */
.qa-empty-state {
  text-align: center;
  padding: 0.75rem;
  color: #9ca3af;
  background: #fafafa;
  border-radius: 6px;
  border: 1px dashed #e5e7eb;
}

.qa-empty-illustration {
  display: none;
}

.qa-empty-icon {
  display: none;
  padding: 1.5rem;
  border-radius: 50%;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
  display: inline-block;
}

.qa-empty-bubbles {
  display: none;
}

.qa-bubble {
  display: none;
}

.qa-bubble-1, .qa-bubble-2, .qa-bubble-3 {
  display: none;
}

.qa-empty-content h4 {
  margin: 0 0 0.25rem 0;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}

.qa-empty-content p {
  margin: 0;
  color: #9ca3af;
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: 400;
}

/* Responsive Q&A profesional */
@media (max-width: 768px) {
  .qa-section-header {
    padding: 1.5rem 2rem;
  }
  
  .qa-header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .qa-subtitle {
    margin-left: 0;
  }
  
  .qa-form-container {
    padding: 2rem;
  }
  
  .qa-form-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .qa-form-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }
  
  .qa-char-info {
    justify-content: space-between;
  }
  
  .qa-login-content {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  
  .qa-questions-container {
    padding: 2rem;
  }
  
  .qa-question-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .qa-question-text {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .qa-answer-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .qa-section-header {
    padding: 1.25rem 1.5rem;
  }
  
  .qa-form-container {
    padding: 1.5rem;
  }
  
  .qa-questions-container {
    padding: 1.5rem;
  }
  
  .qa-question-card {
    padding: 1.5rem;
  }
  
  .qa-textarea {
    padding: 1.25rem 1.5rem;
    min-height: 100px;
  }
  
  .qa-submit-btn {
    padding: 0.875rem 1.75rem;
    min-width: 160px;
  }
  
  .qa-empty-state {
    padding: 0.75rem;
  }
  
  .qa-empty-icon {
    display: none;
  }
  
  .qa-user-avatar {
    width: 42px;
    height: 42px;
  }
}

/* ✅ NUEVOS ESTILOS: Sistema de paginación de preguntas */
.qa-load-more-container {
  margin-top: 2rem;
  padding: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.02), rgba(33, 150, 243, 0.02));
  text-align: center;
  border-radius: 0 0 16px 16px;
}

.qa-pagination-info {
  margin-bottom: 1.5rem;
}

.qa-showing-count {
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.7);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.qa-load-more-btn {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 180px;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.25);
  position: relative;
  overflow: hidden;
}

.qa-load-more-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #45a049, #4CAF50);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.35);
}

.qa-load-more-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.25);
}

.qa-load-more-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.qa-load-more-btn.loading {
  pointer-events: none;
}

.qa-load-more-spinner {
  animation: qa-load-spin 1s linear infinite;
  color: rgba(255, 255, 255, 0.9);
}

.qa-load-more-icon {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.95);
}

@keyframes qa-load-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ✅ MEJORADO: Estilos para fecha de respuesta */
.qa-answer-date {
  font-size: 0.825rem;
  color: rgba(0, 0, 0, 0.5);
  margin-top: 0.75rem;
  font-style: italic;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  border-left: 3px solid #4CAF50;
}

/* Responsive para paginación */
@media (max-width: 768px) {
  .qa-load-more-container {
    padding: 1.5rem;
    margin-top: 1.5rem;
  }
  
  .qa-load-more-btn {
    width: 100%;
    padding: 1.125rem 1.5rem;
  }
  
  .qa-showing-count {
    display: block;
    margin: 0 auto;
    width: fit-content;
  }
}

@media (max-width: 480px) {
  .qa-load-more-container {
    padding: 1.25rem;
  }
  
  .qa-pagination-info {
    margin-bottom: 1.25rem;
  }
  
  .qa-showing-count {
    font-size: 0.85rem;
    padding: 0.375rem 0.875rem;
  }
}

/* ===================================
   PRODUCTOS RELACIONADOS Y RECOMENDACIONES
   Grid optimizado para móvil (3 columnas)
   =================================== */

.recommendations-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.recommendations-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f0f0f0;
}

.recommendations-header h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.refresh-recommendations {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  transition: transform 0.3s ease;
}

.refresh-recommendations:hover {
  transform: rotate(180deg);
}

.recommendations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.recommendation-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.recommendation-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  border-color: var(--primary-green);
}

.recommendation-image-container {
  position: relative;
  width: 100%;
  height: 140px;
  background: #f5f5f5;
  overflow: hidden;
}

.recommendation-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.discount-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #FF6B6B;
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.shipping-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: var(--primary-green);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
}

.recommendation-info {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.recommendation-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.6em;
}

.recommendation-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.recommendation-rating .stars {
  color: #FFA500;
}

.recommendation-rating .rating-text {
  color: #666;
  font-size: 0.7rem;
}

.recommendation-price {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.recommendation-price .original-price {
  font-size: 0.75rem;
  color: #999;
  text-decoration: line-through;
}

.recommendation-price .current-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-green);
}

.recommendation-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: #666;
}

.recommendation-meta .seller {
  font-weight: 500;
}

.recommendation-meta .location {
  color: #999;
}

.add-to-cart-btn-recommendation {
  width: 100%;
  padding: 0.6rem;
  background: var(--primary-green);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: auto;
}

.add-to-cart-btn-recommendation:hover {
  background: var(--primary-orange);
  transform: scale(1.02);
}

.recommendations-footer {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f0f0f0;
}

.view-more-recommendations {
  padding: 0.75rem 2rem;
  background: white;
  border: 2px solid var(--primary-green);
  color: var(--primary-green);
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.view-more-recommendations:hover {
  background: var(--primary-green);
  color: white;
}

/* Responsive para recomendaciones */
@media (max-width: 1024px) {
  .recommendations-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
  }
}

@media (max-width: 768px) {
  .recommendations-section {
    padding: 1rem;
    margin: 1.5rem 0;
  }

  .recommendations-header h3 {
    font-size: 1.1rem;
  }

  .recommendations-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }

  .recommendation-image-container {
    height: 120px;
  }

  .recommendation-info {
    padding: 0.5rem;
  }

  .recommendation-title {
    font-size: 0.75rem;
    min-height: 2.4em;
  }

  .recommendation-price .current-price {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .recommendations-section {
    padding: 0.75rem;
    margin: 1rem 0;
    border-radius: 12px;
  }

  .recommendations-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
  }

  .recommendations-header h3 {
    font-size: 1rem;
  }

  .recommendations-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .recommendation-card {
    border-radius: 8px;
  }

  .recommendation-image-container {
    height: 100px;
  }

  .recommendation-info {
    padding: 0.4rem;
    gap: 0.3rem;
  }

  .recommendation-title {
    font-size: 0.7rem;
    -webkit-line-clamp: 2;
    min-height: 2em;
  }

  .recommendation-rating {
    font-size: 0.65rem;
    gap: 0.3rem;
  }

  .recommendation-price {
    gap: 0.3rem;
  }

  .recommendation-price .original-price {
    font-size: 0.65rem;
  }

  .recommendation-price .current-price {
    font-size: 0.85rem;
  }

  .recommendation-meta {
    font-size: 0.65rem;
    gap: 0.2rem;
  }

  .add-to-cart-btn-recommendation {
    padding: 0.5rem 0.3rem;
    font-size: 0.7rem;
    border-radius: 6px;
  }

  .discount-badge,
  .shipping-badge {
    font-size: 0.65rem;
    padding: 3px 6px;
  }

  .view-more-recommendations {
    padding: 0.6rem 1.5rem;
    font-size: 0.85rem;
  }
}


/* Dashboard Responsive Styles */
.dashboard-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

.dashboard-grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.dashboard-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 1px solid #e2e8f0;
}

.dashboard-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 1rem;
}

.dashboard-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Tab Content Responsive */
.tab-content-responsive {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  min-height: 500px;
  box-sizing: border-box;
}

@media (max-width: 1199px) {
  .tab-content-responsive {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .tab-content-responsive {
    padding: 1rem 0.75rem;
    margin: 0 0.5rem;
    overflow-x: hidden;
    word-wrap: break-word;
  }
  
  /* Prevenir overflow en contenedores internos - EXCLUIR CARRUSEL */
  .tab-content-responsive *:not(.recommended-carousel-modern):not(.recommended-carousel-modern *) {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Ajustes específicos para elementos que pueden desbordarse */
  .tab-content-responsive img,
  .tab-content-responsive table,
  .tab-content-responsive pre {
    max-width: 100%;
    height: auto;
    overflow-x: auto;
  }
}

@media (max-width: 480px) {
  .tab-content-responsive {
    padding: 0.75rem 0.5rem;
    margin: 0 0.25rem;
    overflow-x: hidden;
  }
  
  /* Asegurar que no hay overflow horizontal - EXCLUIR CARRUSEL */
  .tab-content-responsive,
  .tab-content-responsive *:not(.recommended-carousel-modern):not(.recommended-carousel-modern *) {
    max-width: calc(100vw - 1rem);
  }
}

/* Responsive breakpoints */
@media (min-width: 1200px) {
  .dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
}

@media (max-width: 1199px) {
  .dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 0 0.5rem;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .dashboard-card {
    padding: 1rem;
  }

  .dashboard-section-title {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .dashboard-container {
    padding: 0 0.25rem;
  }

  .dashboard-card {
    padding: 0.8rem;
    border-radius: 8px;
  }

  .dashboard-section-title {
    font-size: 1.2rem;
  }
}

/* Specific responsive fixes for product forms */
.product-form-responsive {
  width: 100%;
  overflow-x: hidden;
}

.specs-responsive {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.form-field-responsive {
  width: 100%;
  min-width: 0;
  flex: 1;
}

.button-group-responsive {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

@media (min-width: 768px) {
  .button-group-responsive {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Text truncation for mobile */
.text-truncate-mobile {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .text-truncate-mobile {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}

.products-grid-enhanced {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1rem 0;
}

/* Elemento que ocupa todo el ancho de la grilla - Solo para dashboard, NO para product grids */
.dashboard-grid .full-width-element,
.tab-content-responsive .full-width-element {
  grid-column: 1 / -1;
  margin: 2rem 0;
}
/* ========================================
   🎁 ESTILOS SECCIÓN DE PROMOCIONES EN PERFIL
   ======================================== */

.promociones-content {
  padding: 20px;
}

.promotion-status-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.promotion-status-card h3 {
  color: #2C5F2D;
  font-size: 1.8rem;
  margin: 0 0 25px 0;
  text-align: center;
}

.promo-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.promo-stat {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
}

.stat-label {
  display: block;
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.stat-value {
  display: block;
  color: #2C5F2D;
  font-size: 1.5rem;
  font-weight: 700;
}

.stat-value.code {
  background: linear-gradient(135deg, #FFC914 0%, #FFD93D 100%);
  color: #2C5F2D;
  padding: 8px 15px;
  border-radius: 8px;
  letter-spacing: 2px;
}

.stat-value.capitalize {
  text-transform: capitalize;
}

.generations-mini {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 25px;
}

.gen-mini {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 12px;
  border-left: 4px solid #2C5F2D;
}

.gen-mini h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 1.1rem;
}

.gen-status {
  margin: 8px 0;
  font-weight: 600;
  color: #666;
}

.gen-progress {
  margin: 8px 0 0 0;
  color: #2C5F2D;
  font-weight: 600;
}

.ver-dashboard-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ver-dashboard-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(255, 107, 53, 0.4);
}

.promotion-loading {
  text-align: center;
  padding: 60px 20px;
}

.promotion-loading p {
  color: #666;
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.load-promo-btn {
  padding: 12px 30px;
  background: linear-gradient(135deg, #2C5F2D 0%, #3a7a3c 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.load-promo-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(44, 95, 45, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
  .promociones-content {
    padding: 15px;
  }

  .promotion-status-card {
    padding: 20px;
  }

  .promotion-status-card h3 {
    font-size: 1.5rem;
  }

  .promo-summary {
    grid-template-columns: 1fr;
  }

  .generations-mini {
    grid-template-columns: 1fr;
  }

  .stat-value {
    font-size: 1.2rem;
  }
}

/* 🎨 CATEGORÍAS: Header profesional y discreto */
.category-header-professional {
  text-align: left;
  margin-bottom: 1rem;
  padding: 0.75rem 0 0.5rem 0;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-title-discrete {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.4;
}

.btn-link-discrete {
  background: transparent;
  border: none;
  color: #3b82f6;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.btn-link-discrete:hover {
  background: #eff6ff;
  color: #2563eb;
}

@media (max-width: 768px) {
  .category-header-professional {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0 0.4rem 0;
    margin-bottom: 0.75rem;
  }
  
  .category-title-discrete {
    font-size: 1.15rem;
  }
}

/* ========================================
   PROMOCIONES - SECCIÓN MODERNA EN PERFIL
   ======================================== */

.promotion-card-modern {
  background: white;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.promo-header-section {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.promo-header-section h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2C5F2D;
  margin: 0 0 6px 0;
}

.promo-header-section p {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

.promo-code-section {
  margin-bottom: 20px;
}

.promo-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 8px;
  text-align: center;
}

.promo-code-box {
  background: #f9fafb;
  border: 2px dashed #2C5F2D;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  font-size: 1.375rem;
  font-weight: 700;
  color: #2C5F2D;
  letter-spacing: 2px;
  font-family: 'Courier New', monospace;
}

.promo-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.promo-stat-item {
  text-align: center;
  padding: 16px;
  background: #f9fafb;
  border-radius: 12px;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #2C5F2D;
  margin-bottom: 4px;
}

.stat-description {
  font-size: 0.875rem;
  color: #6b7280;
}

.prizes-summary {
  margin-bottom: 20px;
}

.prizes-header h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 16px 0;
}

.prizes-list-mini {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.prize-mini-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.prize-mini-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.prize-mini-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prize-mini-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1f2937;
}

.prize-mini-status {
  font-size: 0.8125rem;
  color: #6b7280;
}

.prize-mini-status.active {
  color: #2C5F2D;
  font-weight: 600;
}

.no-prizes-message {
  text-align: center;
  padding: 24px;
  color: #6b7280;
  font-size: 0.875rem;
}

.ver-dashboard-btn-modern {
  width: 100%;
  padding: 12px 24px;
  background: #2C5F2D;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ver-dashboard-btn-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(44, 95, 45, 0.3);
}

.promotion-loading-modern {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 16px;
}

.promotion-loading-modern .loading-icon {
  width: 48px;
  height: 48px;
}

.promotion-loading-modern .loading-icon.rotating {
  animation: rotate 1.5s linear infinite;
}

.promotion-loading-modern p {
  color: #6b7280;
  font-size: 0.875rem;
  margin: 0;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Navbar Inferior Fijo - Botones principales - VISIBLE EN TODAS LAS PÁGINAS */
.mobile-bottom-navbar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  background: linear-gradient(135deg, 
    #5486c0  0%,    /* Azul frío inicial */
    #8471a2 25%,   /* Lila más suave */
    #726f76 50%,   /* Lila muy suave */
    #bbb9b9 75%,   /* Gris un poco más oscuro */
    #8a8a8a 100%   /* Gris final más oscuro sin blanco */
  ) !important;
  background-size: 1000% 600% !important;
  animation: gentleFlowHeader 8s ease-in-out infinite !important;
  backdrop-filter: blur(10px) !important;
  filter: brightness(1.05) saturate(1.1) !important;
  padding: 0.35rem 0 !important;
  border-top: none !important;
  box-shadow: none !important;
  height: 62px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  border-radius: 0 !important;
}

.mobile-bottom-navbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(84, 134, 192, 0.1), 
    rgba(132, 113, 162, 0.1),
    transparent);
  animation: shimmer 8s infinite;
  z-index: 2;
}

.mobile-bottom-navbar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, 
    rgba(245, 245, 245, 1) 0%,
    rgba(245, 245, 245, 0.96) 3%,
    rgba(245, 245, 245, 0.82) 6%,
    rgba(245, 245, 245, 0.88) 9%,
    rgba(245, 245, 245, 0.72) 12%,
    rgba(245, 245, 245, 0.78) 15%,
    rgba(245, 245, 245, 0.55) 19%,
    rgba(245, 245, 245, 0.62) 23%,
    rgba(245, 245, 245, 0.38) 27%,
    rgba(245, 245, 245, 0.48) 31%,
    rgba(245, 245, 245, 0.25) 36%,
    rgba(245, 245, 245, 0.32) 42%,
    rgba(245, 245, 245, 0.12) 48%,
    rgba(245, 245, 245, 0.18) 55%,
    rgba(245, 245, 245, 0.03) 65%,
    rgba(245, 245, 245, 0.08) 72%,
    transparent 82%,
    rgba(245, 245, 245, 0.02) 88%,
    transparent 92%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.mobile-nav-container {
  max-width: 500px;
  width: 100%;
  padding: 0 0.6rem; /* Reducido padding lateral */
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0.2rem; /* Pequeño gap entre botones */
}

.mobile-nav-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  background: linear-gradient(135deg, 
    #5486c0  0%,
    #8471a2 25%,
    #726f76 50%,
    #bbb9b9 75%,
    #8a8a8a 100%
  );
  background-size: 1000% 600%;
  animation: gentleFlowHeader 8s ease-in-out infinite;
  border: none;
  filter: brightness(1.05) saturate(1.1);
  cursor: pointer;
  padding: 0.35rem 0.4rem;
  border-radius: 10px;
  transition: all 0.3s ease;
  width: 100px;
  min-width: 100px;
  max-width: 100px;
  position: relative;
  overflow: visible; /* Cambiado para que el badge sea visible */
  backdrop-filter: blur(10px);
  box-shadow: none;
  border-bottom: none;
}

.mobile-nav-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, 
    rgba(245, 245, 245, 1) 0%,
    rgba(245, 245, 245, 0.96) 3%,
    rgba(245, 245, 245, 0.82) 6%,
    rgba(245, 245, 245, 0.88) 9%,
    rgba(245, 245, 245, 0.72) 12%,
    rgba(245, 245, 245, 0.78) 15%,
    rgba(245, 245, 245, 0.55) 19%,
    rgba(245, 245, 245, 0.62) 23%,
    rgba(245, 245, 245, 0.38) 27%,
    rgba(245, 245, 245, 0.48) 31%,
    rgba(245, 245, 245, 0.25) 36%,
    rgba(245, 245, 245, 0.32) 42%,
    rgba(245, 245, 245, 0.12) 48%,
    rgba(245, 245, 245, 0.18) 55%,
    rgba(245, 245, 245, 0.03) 65%,
    rgba(245, 245, 245, 0.08) 72%,
    transparent 82%,
    rgba(245, 245, 245, 0.02) 88%,
    transparent 92%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
  transition: all 0.3s ease;
}

.mobile-nav-button:hover {
  background: linear-gradient(135deg, 
    #5486c0  0%,
    #8471a2 25%,
    #726f76 50%,
    #bbb9b9 75%,
    #7d9ccf 100%
  );
  background-size: 600% 600%;
  filter: brightness(1.2) saturate(1.15);
  transform: translateY(-2px);
}

.mobile-nav-button.active {
  background: linear-gradient(135deg, 
    #5486c0  0%,
    #8471a2 25%,
    #726f76 50%,
    #bbb9b9 75%,
    #7d9ccf 100%
  );
  background-size: 600% 600%;
  filter: brightness(1.3) saturate(1.2);
  box-shadow: 0 4px 15px rgba(84, 134, 192, 0.4);
}

.mobile-nav-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: none;
  transition: all 0.3s ease;
}

.mobile-nav-button:hover .mobile-nav-icon {
  transform: scale(1.1);
  filter: none;
}

.mobile-nav-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--dark-gray);
  transition: color 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75px;
  text-align: center;
  line-height: 1.1;
}

/* Media queries adicionales para iconos */
@media (max-width: 400px) {
  .mobile-nav-icon {
    width: 22px;
    height: 22px;
  }
  
  .mobile-nav-label {
    font-size: 0.5rem;
    max-width: 55px;
  }
}

.mobile-nav-button:hover .mobile-nav-label {
  color: #4a90e2;
}

.mobile-nav-button.active .mobile-nav-label {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.mobile-nav-badge {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  background: linear-gradient(145deg, 
    rgba(239, 68, 68, 0.95) 0%,
    rgba(220, 38, 38, 0.98) 100%);
  color: #ffffff;
  border-radius: 10px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 
    0 2px 8px rgba(220, 38, 38, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
  letter-spacing: 0.3px;
  z-index: 10; /* Asegurar que el badge esté encima */
}

/* Botón Carrito Central - Circular y Sobresaliente - 10% más grande */
.center-cart-btn {
  border-radius: 50% !important;
  width: 57px !important;
  height: 57px !important;
  min-width: 57px !important;
  max-width: 57px !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  transform: translateY(-4px);
  background: linear-gradient(135deg, 
    #5ca8dd  0%,
    #6ea9d8 25%,
    #7eb5e0 50%,
    #8fc2e8 75%,
    #7db8e3 100%
  ) !important;
  background-size: 600% 600% !important;
  box-shadow: 
    0 6px 22px rgba(84, 134, 192, 0.35),
    inset 0 1px 3px rgba(255, 255, 255, 0.95) !important;
  filter: brightness(1.15) saturate(1.25) !important;
  border: 2px solid rgba(92, 168, 221, 0.5) !important;
  animation: none !important;
  overflow: visible !important; /* Permitir que el badge sea visible */
}

@keyframes gentlePulseCart {
  0%, 100% { 
    background-position: 0% 50%;
    box-shadow: 
      0 4px 15px rgba(255, 170, 80, 0.15),
      inset 0 1px 2px rgba(255, 255, 255, 0.9),
      0 0 0 3px rgba(255, 245, 230, 0.5);
  }
  50% { 
    background-position: 100% 50%;
    box-shadow: 
      0 5px 18px rgba(255, 170, 80, 0.2),
      inset 0 1px 3px rgba(255, 255, 255, 0.95),
      0 0 0 3px rgba(255, 240, 220, 0.6);
  }
}

.center-cart-btn:hover {
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 
    0 6px 22px rgba(0, 0, 0, 0.16),
    inset 0 1px 3px rgba(255, 255, 255, 0.95) !important;
  filter: brightness(1.08) !important;
  background: linear-gradient(145deg, 
    rgba(220, 225, 232, 0.98) 0%,
    rgba(235, 238, 242, 1) 50%,
    rgba(225, 228, 235, 0.98) 100%
  ) !important;
}

.center-cart-btn.active {
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 
    0 7px 25px rgba(84, 134, 192, 0.4),
    inset 0 1px 3px rgba(255, 255, 255, 0.95) !important;
  filter: brightness(1.2) saturate(1.3) !important;
}

.center-cart-btn .mobile-nav-icon {
  width: 51px !important;
  height: 51px !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.center-cart-btn .mobile-nav-badge {
  top: -11px;
  right: 2px;
  min-width: 21px;
  height: 21px;
  font-size: 0.65rem;
  padding: 0 5px;
  background: #dc2626;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

/* Media queries para mobile bottom navbar - DESPUÉS de estilos base */
@media (max-width: 480px) {
  .mobile-nav-container {
    padding: 0 0.3rem !important;
    gap: 0.1rem !important;
  }
  
  /* Botones normales (NO el carrito) */
  .mobile-nav-button:not(.center-cart-btn) {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    padding: 0.3rem 0.25rem !important;
    border-radius: 8px !important;
  }
  
  /* Botón carrito circular - 10% más grande + 10% adicional móvil */
  .center-cart-btn {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
  }
  
  .center-cart-btn .mobile-nav-icon {
    width: 48px !important;
    height: 48px !important;
  }
  
  .mobile-nav-label {
    font-size: 0.5rem !important;
    max-width: 60px !important;
  }
  
  .mobile-nav-icon {
    width: 22px !important;
    height: 22px !important;
  }
}

/* Media queries para pantallas muy pequeñas */
@media (max-width: 380px) {
  .mobile-nav-container {
    padding: 0 0.2rem !important;
    gap: 0.05rem !important;
  }
  
  .mobile-nav-button:not(.center-cart-btn) {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    padding: 0.25rem 0.2rem !important;
  }
  
  /* Botón carrito - 10% más grande + 10% adicional móvil */
  .center-cart-btn {
    width: 53px !important;
    height: 53px !important;
    min-width: 53px !important;
    max-width: 53px !important;
  }
  
  .center-cart-btn .mobile-nav-icon {
    width: 42px !important;
    height: 42px !important;
  }
  
  .mobile-nav-label {
    font-size: 0.45rem !important;
    max-width: 50px !important;
  }
  
  .mobile-nav-icon {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ✅ VENDEDOR NAVBAR: Revertir agrandamiento de botones (6 botones con tamaño normal) */
.vendedor-navbar-type .mobile-nav-button {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  height: auto !important;
  padding: 0.35rem 0.4rem !important;
  border-radius: 10px !important;
  transform: none !important;
}

.vendedor-navbar-type .mobile-nav-button .mobile-nav-icon {
  width: 28px !important;
  height: 28px !important;
}

.vendedor-navbar-type .mobile-nav-button .mobile-nav-badge {
  top: 0.2rem !important;
  right: 0.2rem !important;
  min-width: 20px !important;
  height: 20px !important;
}

.vendedor-navbar-type .mobile-nav-button:hover {
  transform: translateY(-2px) !important;
}

/* Media queries para vendedor en móvil */
@media (max-width: 480px) {
  .vendedor-navbar-type .mobile-nav-button {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    padding: 0.3rem 0.25rem !important;
  }
  
  .vendedor-navbar-type .mobile-nav-button .mobile-nav-icon {
    width: 22px !important;
    height: 22px !important;
  }
}

@media (max-width: 380px) {
  .vendedor-navbar-type .mobile-nav-button {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    padding: 0.25rem 0.2rem !important;
  }
  
  .vendedor-navbar-type .mobile-nav-button .mobile-nav-icon {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Slider de navegación integrado al header */
.header-navigation-slider {
  background: linear-gradient(135deg, 
    rgba(255,255,255,0.95) 0%, 
    rgba(248,249,250,0.95) 100%);
  backdrop-filter: blur(15px);
  border: none;
  border-top: 1px solid rgba(34, 139, 34, 0.1);
  border-bottom: 1px solid rgba(74, 144, 226, 0.1);
  padding: 0.6rem 0;
  margin: 0;
  z-index: 999;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.6);
  flex-shrink: 0;
  height: 60px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.header-navigation-slider::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(34, 139, 34, 0.05), 
    rgba(255, 140, 0, 0.05),
    transparent);
  transition: left 8s ease;
  animation: shimmer 8s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: -100%; }
}

.slider-nav-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

.slider-nav-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0.5rem;
}

.slider-nav-item {
  background: linear-gradient(145deg, 
    rgba(255,255,255,0.8), 
    rgba(248,249,250,0.8));
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-weight: 600;
  color: var(--dark-gray);
  position: relative;
  overflow: hidden;
  backdrop-filter: none !important;
  box-shadow: 
    0 2px 6px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.7);
}

.slider-nav-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(74, 144, 226, 0.2), 
    transparent);
  transition: left 0.5s ease;
  z-index: 0;
}

.slider-nav-item:hover::before {
  left: 100%;
}

.slider-nav-item:hover {
  transform: translateY(-2px) scale(1.05);
  background: linear-gradient(145deg, 
    rgba(74, 144, 226, 0.1), 
    rgba(255, 255, 255, 0.9));
  border-color: rgba(74, 144, 226, 0.3);
  box-shadow: 
    0 6px 15px rgba(74, 144, 226, 0.2),
    inset 0 1px 0 rgba(255,255,255,0.9);
  color: #4a90e2;
}

.slider-nav-item.active {
  background: linear-gradient(145deg, 
    rgba(34, 139, 34, 0.15), 
    rgba(74, 144, 226, 0.1));
  border-color: var(--primary-green);
  color: var(--primary-green);
  box-shadow: 
    0 4px 12px rgba(34, 139, 34, 0.3),
    inset 0 2px 4px rgba(34, 139, 34, 0.1);
  transform: translateY(-1px);
}

.slider-nav-item span {
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  letter-spacing: 0.3px;
}

.slider-nav-item:hover span {
  text-shadow: 0 1px 2px rgba(74, 144, 226, 0.3);
}

.slider-nav-item.active span {
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(34, 139, 34, 0.3);
}

/* Navigation items that show only on specific pages */
.header-navigation-slider.hide-on-scroll,
.header-search-bar.hide-on-scroll {
  transform: translateY(-100%);
  opacity: 0;
}

.header-navigation-slider.visible,
.header-search-bar.visible {
  transform: translateY(0);
  opacity: 1;
}

/* Dropdown menu para items del slider */
.slider-dropdown {
  position: relative;
}

.slider-dropdown-content {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(74, 144, 226, 0.2);
  border: 1px solid rgba(74, 144, 226, 0.3);
  min-width: 200px;
  z-index: 1001;
  overflow: hidden;
  animation: slideDownFade 0.3s ease;
}

.slider-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid #4a7d75;
  font-size: 0.9rem;
  color: var(--dark-gray);
}

.slider-dropdown-item:last-child {
  border-bottom: none;
}

.slider-dropdown-item:hover {
  background: rgba(74, 144, 226, 0.1);
  color: #4a90e2;
}

.dropdown-arrow {
  margin-left: 0.5rem;
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}

.slider-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

/* Vendor navigation */
.vendedor-navbar,
.navbar-top.vendedor-navbar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 998 !important;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.98) 0%, 
    rgba(248, 249, 250, 0.95) 100%) !important;
  border-top: 2px solid var(--border-color) !important;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.15) !important;
  height: 60px !important;
  backdrop-filter: blur(10px) !important;
  display: flex !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 0 !important;
  transform: translateZ(0) !important; /* Force hardware acceleration */
}

.navbar-top.vendedor-navbar .navbar-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  display: flex !important;
  align-items: center !important;
  height: 60px !important;
}

.navbar-top.vendedor-navbar .quick-menu {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  height: 100% !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

.navbar-top.vendedor-navbar .quick-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: var(--dark-gray);
  transition: all 0.3s ease;
  text-decoration: none;
  min-height: 45px;
  white-space: nowrap;
  font-size: 0.9rem;
}

.navbar-top.vendedor-navbar .quick-menu-item:hover {
  background: var(--light-gray);
  color: var(--primary-green);
  transform: translateY(-1px);
}

.navbar-top.vendedor-navbar .quick-menu-item.active {
  background: var(--primary-green);
  color: white;
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3);
}

.navbar-top.vendedor-navbar .quick-icon-text {
  font-size: 0.9rem;
  font-weight: 600;
}

.navbar-top.vendedor-navbar .dropdown-menu {
  position: relative;
}

.navbar-top.vendedor-navbar .dropdown-arrow {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.navbar-top.vendedor-navbar .dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1001;
  min-width: 200px;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
}

.navbar-top.vendedor-navbar .dropdown-content button {
  width: 100%;
  padding: 0.8rem 1rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.9rem;
  color: #495057;
  transition: background 0.2s ease;
}

.navbar-top.vendedor-navbar .dropdown-content button:hover {
  background: #f8f9fa;
  color: var(--primary-green);
}

/* Enhanced Navigation Buttons */
.enhanced-nav-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(250,250,250,0.9));
  backdrop-filter: blur(10px);
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 
    0 2px 8px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.5);
}

.enhanced-nav-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(74, 144, 226, 0.3), 
    transparent);
  transition: left 0.6s ease;
  z-index: 0;
}

.enhanced-nav-btn:hover::before {
  left: 100%;
}

.enhanced-nav-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 
    0 6px 20px rgba(74, 144, 226, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.8);
  background: linear-gradient(145deg, 
    rgba(74, 144, 226, 0.1), 
    rgba(255, 255, 255, 0.9));
}

.enhanced-nav-btn.active {
  background: linear-gradient(145deg, 
    rgba(74, 144, 226, 0.15), 
    rgba(34, 139, 34, 0.08));
  box-shadow: 
    0 2px 8px rgba(74, 144, 226, 0.2),
    inset 0 1px 2px rgba(74, 144, 226, 0.1);
  transform: translateY(-1px);
}

.enhanced-label {
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.enhanced-nav-btn:hover .enhanced-label {
  color: #4a90e2;
  font-weight: 600;
}

.enhanced-nav-btn.active .enhanced-label {
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Animación del gradiente del header */
@keyframes gentleFlowHeader {
  0%, 100% { 
    background-position: 0% 50%; 
    filter: brightness(1.05) saturate(1.1);
  }
  25% { 
    background-position: 100% 20%; 
    filter: brightness(1.1) saturate(1.15);
  }
  50% { 
    background-position: 50% 100%; 
    filter: brightness(1.08) saturate(1.12);
  }
  75% { 
    background-position: 20% 30%; 
    filter: brightness(1.12) saturate(1.18);
  }
}

@keyframes shimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: -100%; }
}

@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* CORRECCIONES RESPONSIVE PROFESIONALES PARA DELAFERIA */

/* === PRODUCT DETAIL RESPONSIVE FIXES === */
.product-detail-main {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .product-detail-main {
    padding: 1rem 0.75rem;
    margin: 0 0.5rem;
  }
  
  .product-detail-main *,
  .product-variants-section *,
  .product-info-section *,
  .product-gallery-section * {
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Galería responsive */
  .main-image-container {
    max-width: 100%;
    overflow: hidden;
  }
  
  .main-product-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
  
  /* Thumbnails responsive */
  .image-thumbnails {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    scrollbar-width: thin;
  }
  
  .image-thumbnails::-webkit-scrollbar {
    height: 4px;
  }
  
  .image-thumbnails::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 2px;
  }
  
  .thumbnail {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
  }
  
  /* Variantes responsive */
  .product-variants-section {
    overflow-x: hidden;
  }
  
  .variants-column-compact,
  .integrated-product-info {
    max-width: 100%;
    min-width: 0;
  }
  
  .variant-option-compact {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .product-detail-main {
    padding: 0.75rem 0.5rem;
    margin: 0 0.25rem;
  }
  
  /* Asegurar que no hay desbordamiento horizontal */
  .product-detail-main,
  .product-detail-main * {
    max-width: calc(100vw - 1rem) !important;
  }
  
  .main-product-image {
    max-height: 300px;
  }
  
  .thumbnail {
    width: 50px;
    height: 50px;
  }
  
  .variant-option-compact {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }
}

/* === VENDEDOR DASHBOARD RESPONSIVE FIXES === */
.vendedor-main {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .vendedor-main {
    padding: 1rem 0.75rem;
    margin: 0 0.5rem;
  }
  
  .vendedor-main *,
  .dashboard-card *,
  .form-section * {
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Cards responsive */
  .dashboard-card {
    margin-bottom: 1rem;
    overflow: hidden;
  }
  
  /* Tablas responsive */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .table-responsive table {
    min-width: 100%;
    white-space: nowrap;
  }
  
  /* Formularios responsive */
  .form-group input,
  .form-group textarea,
  .form-group select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .vendedor-main {
    padding: 0.75rem 0.5rem;
    margin: 0 0.25rem;
  }
  
  /* Asegurar que no hay desbordamiento horizontal */
  .vendedor-main,
  .vendedor-main * {
    max-width: calc(100vw - 1rem) !important;
  }
  
  .dashboard-card {
    padding: 0.75rem;
  }
}

/* === GENERAL RESPONSIVE UTILITIES === */
.responsive-container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.responsive-text {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.responsive-image {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.responsive-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
  
  .mobile-only {
    display: block !important;
  }
  
  .responsive-stack {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
}

@media (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }
}/* ✅ ESTILOS PARA PRODUCTOS DESTACADOS */

/* Componente FeaturedProducts */
.featured-products {
  margin: 2rem 0;
  padding: 1rem;
}

.featured-products-header {
  text-align: center;
  margin-bottom: 2rem;
}

.featured-products-header h2 {
  color: #1e293b;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.featured-products-header p {
  color: #64748b;
  font-size: 0.9rem;
}

.featured-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.featured-products-meta {
  text-align: center;
  color: #64748b;
  font-size: 0.8rem;
}

/* Estados de carga y error */
.featured-products-loading,
.featured-products-error,
.featured-products-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}

.featured-products-loading .loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f4f6;
  border-top: 3px solid #ffd700;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.featured-products-error {
  color: #dc2626;
}

.featured-products-error button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: #dc2626;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.featured-products-error button:hover {
  background: #b91c1c;
}

/* ProductCard modificaciones para productos destacados */
.product-card.featured {
  border: 2px solid #ffd700;
  box-shadow: 
    0 4px 8px rgba(255, 215, 0, 0.3),
    0 20px 25px -5px rgba(0, 0, 0, 0.1);
  position: relative;
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
}

.product-card.featured:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 
    0 8px 16px rgba(255, 215, 0, 0.4),
    0 25px 30px -5px rgba(0, 0, 0, 0.15);
  border-color: #f59e0b;
}

.featured-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  color: #1a1a1a;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  z-index: 10;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 0 0 2px white;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  animation: pulse-featured 2s infinite;
}

@keyframes pulse-featured {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Indicadores de popularidad para productos destacados */
.product-card.featured .product-info {
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.8) 0%, #ffffff 100%);
}

.product-card.featured .product-price {
  color: #f59e0b;
  font-weight: 700;
  font-size: 1.1em;
}

.product-card.featured .product-footer {
  border-top: 1px solid rgba(245, 158, 11, 0.2);
  padding-top: 0.5rem;
}

/* ✅ HALLAZGO #20: Truncado elegante de títulos largos */
.featured-product-card h3,
.featured-product-info h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  min-height: 2.8em; /* 2 líneas mínimo para consistencia */
  word-break: break-word;
}

/* Responsive design */
@media (max-width: 768px) {
  .featured-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .featured-badge {
    top: -6px;
    right: -6px;
    font-size: 10px;
    padding: 3px 6px;
  }
  
  .featured-products-header h2 {
    font-size: 1.3rem;
  }

  /* ✅ WCAG 2.2: Mejor legibilidad en mobile */
  .featured-product-card h3,
  .featured-product-info h3 {
    font-size: 0.95rem;
    line-height: 1.3;
    min-height: 2.6em;
  }
}

@media (max-width: 480px) {
  .featured-products {
    padding: 0.5rem;
  }
  
  .featured-products-grid {
    gap: 0.8rem;
  }
}/* ===================================
   ARCHIVO DE ANULACIONES CSS FINALES
   Debe cargarse AL FINAL de todos los CSS
   para garantizar máxima especificidad
   =================================== */

/* 1. ELIMINAR EFECTOS BLUR DE TODOS LOS CONTENEDORES Y ELEMENTOS */
.header-navigation-slider, 
.mobile-bottom-navbar, 
.mobile-nav-button,
.nav-icon-large,
.header-content,
.search-input-section,
.search-bar,
.search-container,
.category-card,
.category-header,
.product-card,
.product-image-container,
.slider-nav-item,
.popular-tag,
.suggestion-tag,
.quick-action-btn,
.upload-zone,
.mis-compras-card,
.inline-clips-container,
.withdrawal-btn {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Eliminar blur de TODOS los pseudo-elementos */
*::before,
*::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Específicamente para elementos del header - MANTENER NAVBAR EFECTOS */
.header-content *,
.header-navigation-slider * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Restaurar efectos del navbar móvil */
.mobile-bottom-navbar .mobile-nav-button {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ELIMINAR COMPLETAMENTE EL BLUR DE BOTONES RÁPIDOS Y SUS HALOS */
.nav-icon-large,
.nav-icon-large svg,
.nav-icon-large i,
.cart-badge,
.notification-badge,
.favorites-badge,
.header-content .nav-icon-large,
.header-content button,
.header-content a {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Eliminar blur del contenedor principal del header que afecta a los botones */
.header-content {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Eliminar cualquier efecto de sombra borrosa en botones del header */
.nav-icon-large {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ELIMINAR TODOS LOS EFECTOS DE LOS ICONOS DEL HEADER */
.icon-img-large,
.nav-icon-large .icon-img-large,
.header-content svg,
.header-content i,
.header-content .fa-icon,
.nav-icon-large svg,
.nav-icon-large i,
.nav-icon-large,
.nav-icon-large * {
  filter: none !important;
  -webkit-filter: none !important;
  transform: none !important;
}

/* ELIMINAR HALOS Y EFECTOS GLOW DE LOS ICONOS DEL HEADER */
.nav-icon-large,
.nav-icon-large svg,
.nav-icon-large path,
.cart-icon,
.notification-icon,
.favorites-icon {
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* ELIMINAR SOLAMENTE LOS HALOS PROBLEMÁTICOS - MANTENER EFECTOS NORMALES */
/* Solo eliminar los efectos ::before que crean los halos naranjas/verdes específicos */
.enhanced-icon-btn::before {
  display: none !important;
  content: none !important;
}

/* Mantener efectos normales pero eliminar solo los halos desenfocados */
.enhanced-badge {
  animation: pulse 2s infinite !important;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4) !important;
  background: linear-gradient(135deg, #ff4757, #ff3742) !important;
}

/* ELIMINAR EFECTOS DE HOVER EN SLIDER NAV */
.slider-nav-item:hover,
.slider-nav-item:hover span,
.slider-nav-item:hover::before {
  transform: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ELIMINAR EFECTOS DE MOBILE NAV BUTTON */
.mobile-nav-button:hover {
  filter: none !important;
  transform: none !important;
  background-size: 400% 400% !important;
}

/* FORZAR ELIMINACIÓN DE DROP-SHADOW */
[style*="drop-shadow"] {
  filter: none !important;
}

/* 2. MAYOR ESPACIO ENTRE HEADER Y NAVBAR + BORDES MÁS DEFINIDOS */
.header-navigation-slider {
  margin-top: 20px !important;  /* Mayor separación entre header y navbar */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Bordes más visibles pero sutiles en tabs del navbar */
.slider-nav-item {
  border: 2px solid rgba(100, 100, 100, 0.25) !important;
}

.slider-nav-item.active {
  border-color: rgba(34, 139, 34, 0.4) !important;
}

.main-nav-button {
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
}

/* 3. MEJOR VISIBILIDAD DE SECCIÓN LEGAL - SIN FONDO OSCURO */
.legal-notice-bar {
  background: transparent !important;  /* Sin fondo para integrarse con el contenedor principal */
  border-top: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Asegurar que el contenedor de legal no tenga fondo púrpura */
.legal-notice-bar::before,
.legal-notice-bar::after {
  display: none !important;
}

.legal-notice-text {
  color: #1a1a1a !important;
  font-weight: 600 !important;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.5) !important;
}

.legal-notice-btn {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 2px solid #1a1a1a !important;
  font-weight: 700 !important;
}

.legal-notice-btn:hover {
  background: #1a1a1a !important;
  color: #ffffff !important;
}

/* ========================================
   4. PADDING-TOP PERSONALIZADO POR PÁGINA
   Sistema basado en CSS Custom Properties para evitar conflictos de especificidad
   ======================================== */

/* Definir valor por defecto de padding-top */
:root {
  --page-padding-top: 105px;
}

/* ========================================
   ASIGNAR VALORES ESPECÍFICOS POR PÁGINA
   ======================================== */

/* Clips/FeriFlash: Custom header - sin padding adicional */
.feriflash-page {
  --page-padding-top: 0px;
  padding-top: 0px !important;
}

/* FAQ: Sin padding (UniversalLayout maneja espaciado) */
.faq-container-improved,
body:has(.faq-container-improved) .dashboard-main {
  --page-padding-top: 0px;
}

/* Promociones/Ofertas: Sin padding (UniversalLayout maneja espaciado) */
body:has(.offer-manager-container) .dashboard-main {
  --page-padding-top: 0px;
  padding-top: 0px !important;
}

/* Categorías: 20px (baja contenido) */
main.categorias-main,
.categorias-main {
  --page-padding-top: 20px;
}

/* Perfil: 0px con contenido interno subido 60px */
main.perfil-main,
.perfil-main {
  --page-padding-top: 0px;
}
.perfil-main .compras-container {
  margin-top: -60px !important;
}

/* Favoritos: 30px (baja contenido) */
main.favoritos-main,
.favoritos-main {
  --page-padding-top: 30px;
}

/* ProductDetail: 40px (baja contenido) */
main.product-detail-main,
.product-detail-main,
.product-detail-page {
  --page-padding-top: 40px;
}

/* Login y Registro: 0px */
main.auth-container,
main.login-container,
main.register-container,
.auth-container,
.login-container,
.register-container,
div[class*="auth"] main,
div[class*="login"] main,
div[class*="register"] main,
body:has(.auth-container) main,
body:has(.login-container) main,
body:has(.register-container) main {
  --page-padding-top: 0;
}

/* ========================================
   APLICAR PADDING-TOP USANDO LA VARIABLE
   ======================================== */

/* REGLA ULTRA-FUERTE: Captura TODOS los selectores posibles de páginas principales */
.dashboard-main,
.dashboard-content,
.comprador-dashboard,
.vendedor-dashboard,
.comprador-main,
.vendedor-main,
.checkout-main,
.product-detail-main,
.categorias-main,
.ofertas-main,
.favoritos-main,
.mensajes-main,
.perfil-main,
.ayuda-main,
.notificaciones-main,
.mis-compras-main,
.mis-ventas-main,
.admin-main,
.admin-content,
.legal-main,
.offers-page,
.home-main,
.faq-main-improved,
.carrito-main,
main,
main[class*="main"],
main[class*="dashboard"],
main[class*="content"],
div[class*="-main"]:not([class*="overlay"]):not([class*="modal"]),
div[class*="dashboard"],
div[class*="-page"]:not([class*="overlay"]):not([class*="modal"]),
.page-container,
.content-wrapper,
.feriflash-page,
.offer-manager-container,
.faq-container-improved {
  padding-top: var(--page-padding-top, 105px) !important;
}

/* EXCEPCIÓN CRÍTICA: MIS COMPRAS - Evitar que divs internos con "-main" reciban padding */
.buyer-order-card-redesigned,
.buyer-order-card-redesigned *,
.order-main-content,
.order-main-info,
div[class*="order-"]:not([class*="overlay"]):not([class*="modal"]),
div[class*="buyer-"]:not([class*="overlay"]):not([class*="modal"]) {
  padding-top: 0 !important;
}

/* EXCEPCIÓN ABSOLUTA: Login y Registro - Reset explícito adicional */
.auth-container,
.login-container,
.register-container,
.auth-card,
.auth-form,
div[class*="auth"]:not(input):not(button),
div[class*="login"]:not(input):not(button),
div[class*="register"]:not(input):not(button),
div[class*="auth"] main,
div[class*="login"] main,
div[class*="register"] main,
body:has(.auth-container) main,
body:has(.login-container) main,
body:has(.register-container) main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* EXCLUIR INPUTS Y BOTONES DEL RESET - PERMITIR PADDING NATURAL */
.auth-container input,
.auth-container button,
.auth-container select,
.auth-container textarea,
.login-container input,
.login-container button,
.login-container select,
.login-container textarea,
.register-container input,
.register-container button,
.register-container select,
.register-container textarea {
  padding-top: revert !important;
  padding-bottom: revert !important;
  margin-top: revert !important;
  margin-bottom: revert !important;
}

/* FORZAR PADDING SIMÉTRICO EN INPUTS DE AUTH PARA CENTRADO PERFECTO */
.auth-container .form-group input,
.auth-container .form-group select,
.auth-container .form-group textarea,
.login-container .form-group input,
.login-container .form-group select,
.login-container .form-group textarea,
.register-container .form-group input,
.register-container .form-group select,
.register-container .form-group textarea {
  padding: 0.75rem 0.8rem !important;
  line-height: normal !important;
  vertical-align: middle !important;
  display: flex !important;
  align-items: center !important;
}

/* FORZAR CENTRADO VERTICAL EN BOTONES DE AUTH */
.auth-container button,
.auth-container .auth-btn,
.auth-container .social-btn,
.login-container button,
.login-container .auth-btn,
.login-container .social-btn,
.register-container button,
.register-container .auth-btn,
.register-container .social-btn {
  padding: 0.75rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* EXCEPCIONES ESPECÍFICAS: FAQ, Promociones, Clips - padding 0 */
/* Estos overrides van DESPUÉS de la regla global para ganar en la cascada */

/* FeriFlash/Clips: FIX DEFINITIVO - Especificidad igual a div[class*="-page"] */
div[class*="feriflash-page"].feriflash-page {
  padding-top: 0px !important;
  margin-top: 0px !important;
}

.feriflash-grid {
  padding-top: 0px !important;
  margin-top: 0px !important;
}

/* FeriFlash Grid: eliminar padding superior completamente */
.feriflash-grid {
  padding: 0px 0.5rem 0.75rem 0.5rem !important;
  margin-top: 0px !important;
}

@media (max-width: 768px) {
  .feriflash-grid {
    padding: 0px 0.25rem 0.5rem 0.25rem !important;
  }
}

/* FeriFlash Header: reducir padding para subir contenido */
.feriflash-unified-header {
  padding: 0px !important;
  margin: 0px !important;
  margin-bottom: 0px !important;
}

.feriflash-header-content {
  padding: 0.5rem 1rem !important; /* Reducido de 0.75rem */
  margin: 0px !important;
}

/* Promociones/OfferManager: padding 0 en dashboard-main Y en el container */
body:has(.offer-manager-container) .dashboard-main,
.offer-manager-container,
.offer-manager-header {
  padding-top: 0px !important;
  margin-top: 0px !important;
}

/* PromotionDashboard: FIX DEFINITIVO - Override con especificidad igual a la regla global */
div.dashboard.promo-dashboard-layout main.dashboard-main {
  padding-top: 0px !important;
  margin-top: 0px !important;
}

.promo-dashboard-modern {
  padding-top: 0px !important;
  margin-top: 0px !important;
}

/* Header de promociones: eliminar padding completo y margin-bottom */
.promo-header-modern {
  padding: 0px !important;
  margin: 0px !important;
  margin-bottom: 0px !important;
}

/* Título y subtítulo de promociones: reducir espaciado interno */
.promo-header-modern h1 {
  margin: 0px !important;
  padding: 0px !important;
}

.promo-header-modern p {
  margin: 0px !important;
  padding: 0px !important;
  margin-top: 4px !important; /* Solo pequeño espacio entre título y subtítulo */
}

/* FAQ: padding 0 en dashboard-main Y en el container */
body:has(.faq-container-improved) .dashboard-main,
.faq-container-improved {
  padding-top: 0px !important;
  margin-top: 0px !important;
}


/* Ajuste específico para el contenedor de productos */
.products-grid {
  margin-top: 20px !important;
}

/* Asegurar que el primer producto no quede cortado */
.dashboard-main > *:first-child {
  margin-top: 0 !important;
}

/* Variables CSS para mantener consistencia */
:root {
  --header-total-height: 140px;
  --bottom-nav-height: 70px;
  --content-padding-top: 130px;
  --content-padding-bottom: 85px;
}

/* ELIMINAR CUALQUIER SOMBRA CON BLUR EN HEADER */
.header-content,
.nav-icon-large,
.search-input-section,
.quick-action-btn {
  box-shadow: none !important;
}

/* ELIMINAR TODOS LOS HOVER DE ICONOS */
.nav-icon-large:hover,
.nav-icon-large:hover .icon-img-large,
.icon-img-large:hover {
  background: transparent !important;
  transform: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
  scale: none !important;
}

/* RESTAURAR EFECTOS DEL NAVBAR MÓVIL COMO EL HEADER PERO INVERTIDOS */
.mobile-bottom-navbar {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  background: linear-gradient(135deg, 
    #5486c0  0%,    /* Azul frío inicial */
    #8471a2 25%,   /* Lila más suave */
    #726f76 50%,   /* Lila muy suave */
    #bbb9b9 75%,   /* Gris un poco más oscuro */
    #8a8a8a 100%   /* Gris final más oscuro sin blanco */
  ) !important;
  background-size: 1000% 600% !important;
  animation: gentleFlowHeader 8s ease-in-out infinite !important;
  filter: brightness(1.05) saturate(1.1) !important;
}

/* NO bloquear los efectos del header y navbar */
[style*="backdrop-filter"]:not(.header-navigation-slider):not(.mobile-bottom-navbar):not(.mobile-nav-button),
[style*="webkit-backdrop-filter"]:not(.header-navigation-slider):not(.mobile-bottom-navbar):not(.mobile-nav-button) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Eliminar blur SOLO de elementos que NO son header ni navbar */
.auth-card,
.footer-content,
.ai-uploader,
.level-badge,
.modal-overlay,
.upgrade-modal,
.reaction-modal {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* MANTENER efectos dinámicos del header y navbar */
.header-navigation-slider,
.mobile-bottom-navbar,
.mobile-nav-button {
  filter: unset !important; /* PERMITIR efectos dinámicos */
}

/* ========================================
   5. VENDEDOR DASHBOARD - BOTONES EDITAR/ELIMINAR
   MÁXIMA ESPECIFICIDAD PARA SOBRESCRIBIR PRODUCTS.CSS
   ======================================== */

/* CRÍTICO: Permitir que los botones se vean removiendo altura fija */
.dashboard.vendedor-dashboard .product-card .product-info,
.vendedor-dashboard .products-grid .product-card .product-info,
div.vendedor-dashboard .product-card .product-info {
  height: auto !important;
  min-height: 200px !important;
  overflow: visible !important;
}

/* Footer con botones centrados (sin precio) */
.dashboard.vendedor-dashboard .product-footer,
.vendedor-dashboard .products-grid .product-footer,
div.vendedor-dashboard .product-footer {
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-top: 0 !important;
  border-top: none !important;
  padding-top: 0 !important;
}

/* Contenedor de botones */
.dashboard.vendedor-dashboard .product-actions,
.vendedor-dashboard .products-grid .product-actions,
div.vendedor-dashboard .product-actions {
  display: flex !important;
  gap: 0.5rem !important;
  flex-shrink: 0 !important;
}

/* Estilos de botones con máxima especificidad */
.dashboard.vendedor-dashboard .btn-edit,
.vendedor-dashboard .products-grid .btn-edit,
div.vendedor-dashboard .btn-edit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-size: 0.8rem !important;
  padding: 0.4rem 0.8rem !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: #007bff !important;
  color: white !important;
}

.dashboard.vendedor-dashboard .btn-delete,
.vendedor-dashboard .products-grid .btn-delete,
div.vendedor-dashboard .btn-delete {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-size: 0.8rem !important;
  padding: 0.4rem 0.8rem !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: #dc3545 !important;
  color: white !important;
}

/* Hover effects */
.dashboard.vendedor-dashboard .btn-edit:hover,
.vendedor-dashboard .products-grid .btn-edit:hover,
div.vendedor-dashboard .btn-edit:hover {
  background: #0056b3 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0,123,255,0.3) !important;
}

.dashboard.vendedor-dashboard .btn-delete:hover,
.vendedor-dashboard .products-grid .btn-delete:hover,
div.vendedor-dashboard .btn-delete:hover {
  background: #c82333 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(220,53,69,0.3) !important;
}

/* ========================================
   6. VENDEDOR DASHBOARD - OPTIMIZACIÓN MÓVIL
   RESPONSIVE: Mantener Desktop intacto, optimizar Mobile
   ======================================== */

@media screen and (max-width: 768px) {
  /* Grilla optimizada para 2 productos por fila en móvil */
  .dashboard.vendedor-dashboard .products-grid,
  .vendedor-dashboard .products-grid,
  div.vendedor-dashboard .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    padding: 0.5rem !important;
  }

  /* Tarjeta de producto más compacta en móvil */
  .dashboard.vendedor-dashboard .product-card,
  .vendedor-dashboard .products-grid .product-card,
  div.vendedor-dashboard .product-card {
    border-radius: 8px !important;
  }

  /* Imagen más pequeña en móvil */
  .dashboard.vendedor-dashboard .product-image-container,
  .vendedor-dashboard .products-grid .product-image-container,
  div.vendedor-dashboard .product-image-container {
    height: 140px !important;
  }

  /* Info del producto más compacta */
  .dashboard.vendedor-dashboard .product-info,
  .vendedor-dashboard .products-grid .product-info,
  div.vendedor-dashboard .product-info {
    padding: 0.5rem !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* Título más pequeño en móvil */
  .dashboard.vendedor-dashboard .product-info h3,
  .vendedor-dashboard .products-grid .product-info h3,
  div.vendedor-dashboard .product-info h3 {
    font-size: 0.9rem !important;
    margin: 0 0 0.3rem 0 !important;
    line-height: 1.3 !important;
  }

  /* OCULTAR categoría en móvil para ahorrar espacio */
  .dashboard.vendedor-dashboard .product-category,
  .vendedor-dashboard .products-grid .product-category,
  div.vendedor-dashboard .product-category {
    display: none !important;
  }

  /* OCULTAR descripción completamente en móvil */
  .dashboard.vendedor-dashboard .product-description,
  .vendedor-dashboard .products-grid .product-description,
  div.vendedor-dashboard .product-description {
    display: none !important;
  }

  /* OCULTAR detalles (stock, marca, IA) en móvil */
  .dashboard.vendedor-dashboard .product-details,
  .vendedor-dashboard .products-grid .product-details,
  div.vendedor-dashboard .product-details {
    display: none !important;
  }

  /* Precio más destacado y compacto en móvil */
  .dashboard.vendedor-dashboard .product-info > div:has(.product-price),
  .vendedor-dashboard .products-grid .product-info > div:has(.product-price),
  div.vendedor-dashboard .product-info > div:has(.product-price) {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  .dashboard.vendedor-dashboard .product-price,
  .vendedor-dashboard .products-grid .product-price,
  div.vendedor-dashboard .product-price {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #28a745 !important;
  }

  /* Botones más compactos en móvil */
  .dashboard.vendedor-dashboard .btn-edit,
  .vendedor-dashboard .products-grid .btn-edit,
  div.vendedor-dashboard .btn-edit,
  .dashboard.vendedor-dashboard .btn-delete,
  .vendedor-dashboard .products-grid .btn-delete,
  div.vendedor-dashboard .btn-delete {
    font-size: 0.7rem !important;
    padding: 0.35rem 0.6rem !important;
  }

  /* Footer con botones ajustado */
  .dashboard.vendedor-dashboard .product-footer,
  .vendedor-dashboard .products-grid .product-footer,
  div.vendedor-dashboard .product-footer {
    margin-top: 0 !important;
    gap: 0.4rem !important;
  }

  /* Acciones con gap reducido */
  .dashboard.vendedor-dashboard .product-actions,
  .vendedor-dashboard .products-grid .product-actions,
  div.vendedor-dashboard .product-actions {
    gap: 0.4rem !important;
  }
}

/* ========================================
   FIX FINAL ABSOLUTO - PROMOCIONES Y CLIPS
   Estas reglas van al FINAL con máxima especificidad
   ======================================== */

/* PROMOCIONES: Eliminar TODO el espacio superior */
.dashboard.promo-dashboard-layout .dashboard-main.dashboard-main {
  padding-top: 0px !important;
  margin-top: 0px !important;
}

.promo-dashboard-modern.promo-dashboard-modern {
  padding-top: 0px !important;
  margin-top: 0px !important;
}

.promo-header-modern.promo-header-modern {
  padding-top: 0px !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.promo-header-modern.promo-header-modern h1 {
  margin-top: 0px !important;
  padding-top: 0px !important;
}

.promo-header-modern.promo-header-modern p {
  margin-top: 4px !important;
  padding-top: 0px !important;
}

/* CLIPS/FERIFLASH: Eliminar TODO el espacio superior */
.feriflash-page.feriflash-page {
  padding-top: 0px !important;
  margin-top: 0px !important;
}

.feriflash-grid.feriflash-grid {
  padding-top: 0px !important;
  margin-top: 0px !important;
  padding-bottom: 0.75rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

@media (max-width: 768px) {
  .feriflash-grid.feriflash-grid {
    padding-top: 0px !important;
    padding-bottom: 0.5rem !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
}

.feriflash-header-content.feriflash-header-content {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.feriflash-unified-header.feriflash-unified-header {
  padding-top: 0px !important;
  margin-top: 0px !important;
}

/* ========================================
   LOGIN Y REGISTER: FORZAR USO EXCLUSIVO DE APP.CSS
   Anular COMPLETAMENTE overrides.css para estas páginas
   ======================================== */

/* RESET ABSOLUTO: Auth container usa SOLO App.css */
.auth-container.auth-container.auth-container {
  /* Restablecer a valores de App.css - línea 221-230 */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-orange) 50%, var(--secondary-green) 100%);
  background-size: 400% 400%;
  animation: gradientShift 8s ease-in-out infinite;
  padding: 2rem;
  
  /* Anular CUALQUIER padding-top de overrides.css */
  padding-top: 2rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Auth card: valores de App.css - línea 237-248 */
.auth-card.auth-card.auth-card {
  background: rgba(245, 245, 220, 0.95);
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-medium), var(--shadow-glow);
  border: 2px solid rgba(255, 140, 0, 0.2);
  width: 100%;
  max-width: 400px;
  position: relative;
  overflow: hidden;
  
  /* Anular overrides */
  padding-top: 2rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Auth header: valores de App.css - línea 265-268 */
.auth-header.auth-header.auth-header {
  text-align: center;
  margin-bottom: 2rem;
  
  /* Anular overrides */
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Auth logo: valores de App.css - línea 270-274 */
.auth-logo.auth-logo.auth-logo {
  width: 200px;
  height: auto;
  margin-bottom: 1rem;
  
  /* Anular overrides */
  margin-top: 0 !important;
}

/* ========================================
   FIX DEFINITIVO: Reset padding-top del contenedor padre
   cuando contiene páginas de autenticación
   ======================================== */

/* NavigationAnimations envuelve Login/Register con .page-container
   que tiene padding-top: 105px desde línea 314.
   Esta regla anula ese padding SOLO cuando contiene auth */
.page-container:has(.auth-container) {
  padding-top: 0 !important;
}

/* ========================================
   FIX: Centrado vertical perfecto de textos en Login/Register
   Los inputs y botones deben tener el texto perfectamente centrado
   ======================================== */

/* Inputs - Centrado vertical mediante line-height */
.auth-form .form-group input,
.auth-form .form-group select,
.auth-form .form-group textarea {
  line-height: 1.5 !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Botón principal - Centrado vertical mediante flexbox */
.auth-btn.auth-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Botón Google - Ya tiene flexbox, asegurar centrado perfecto */
.social-btn.social-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}/* ==========================================
   SISTEMA DE OFERTAS - ESTILOS COMPLETOS
   ========================================== */

/* ============================================
   BADGES Y ETIQUETAS DE OFERTAS (ProductCard)
   ============================================ */


.offer-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #ea580c;
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 10;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.expiring-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  text-align: center;
  font-weight: 600;
  border: 1px solid #fee2e2;
}

/* ============================================
   PRECIOS CON OFERTAS
   ============================================ */

.original-price {
  text-decoration: line-through;
  color: #6b7280;
  font-size: 14px;
  margin-right: 8px;
}

.discounted-price {
  color: #dc2626;
  font-weight: bold;
  font-size: 18px;
}

.savings {
  color: #059669;
  font-size: 14px;
  font-weight: 500;
  margin-top: 4px;
}

.savings-badge {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
  text-align: center;
}

/* ============================================
   PROMOCIONES DE PAGO
   ============================================ */

.offer-name-discrete {
  font-size: 10px;
  font-weight: 300;
  color: #999;
  margin: 0 0 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.payment-promo,
.payment-promotions .promo-item {
  color: #00A650;
  font-size: 11px;
  font-weight: 400;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.payment-promotions {
  margin-top: 8px;
  padding: 8px;
  background: #eff6ff;
  border-radius: 6px;
  border-left: 3px solid #2563eb;
}

.payment-promotions strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: #1e40af;
}

/* ============================================
   ADVERTENCIA DE VENCIMIENTO
   ============================================ */

.expiring-warning {
  background: #fef2f2;
  color: #dc2626;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 8px;
  text-align: center;
  border: 1px solid #fee2e2;
}

.offer-time-remaining {
  font-size: 11px;
  color: #f59e0b;
  font-weight: 600;
  margin-top: 6px;
  text-align: center;
  background: #fffbeb;
  padding: 4px 8px;
  border-radius: 4px;
}

/* ============================================
   OFFER CREATOR - FORMULARIO DE CREACIÓN
   ============================================ */

.offer-creator-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  background: #f9fafb;
  min-height: 100vh;
}

.offer-creator-header {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: white;
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.offer-creator-header h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
}

.offer-creator-header p {
  margin: 0;
  opacity: 0.9;
}

.offer-creator-header .back-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 16px;
  font-size: 14px;
  transition: background 0.2s;
}

.offer-creator-header .back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.offer-creator-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 24px;
}

.offer-form-section {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #374151;
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.discount-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: normal;
}

.checkbox-group input[type="checkbox"] {
  width: auto;
}

/* Payment Promotions Form */
.payment-promotions-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid #f3f4f6;
}

.payment-promotions-section h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #111827;
}

.payment-promo-form {
  display: grid;
  grid-template-columns: 1.5fr 1fr 2fr auto;
  gap: 12px;
  margin-bottom: 12px;
}

.payment-promo-form select,
.payment-promo-form input {
  margin: 0;
}

.btn-add-promo {
  background: #2563eb;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: background 0.2s;
}

.btn-add-promo:hover {
  background: #1d4ed8;
}

.payment-promos-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.payment-promo-item {
  background: #eff6ff;
  padding: 10px 12px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 3px solid #2563eb;
}

.payment-promo-item button {
  background: transparent;
  border: none;
  color: #dc2626;
  font-size: 20px;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
}

/* Products Selection Section */
.products-selection-section {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  max-height: 700px;
  display: flex;
  flex-direction: column;
}

.products-selection-section h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
}

.search-products {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
}

.products-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.product-item:hover {
  border-color: #dc2626;
  background: #fef2f2;
}

.product-item.selected {
  border-color: #dc2626;
  background: #fef2f2;
}

.product-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.product-item img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
}

.product-item .product-info {
  flex: 1;
}

.product-item .product-info h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #111827;
}

.product-item .product-info p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  font-weight: 600;
}

/* Offer Preview Section */
.offer-preview-section {
  grid-column: 1 / -1;
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.offer-preview-section h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
}

.preview-card {
  position: relative;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  max-width: 300px;
}

.preview-card h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #111827;
  padding-right: 60px;
}

.preview-prices {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

/* Offer Creator Footer */
.offer-creator-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding: 16px 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-cancel {
  background: #f3f4f6;
  color: #374151;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s;
}

.btn-cancel:hover {
  background: #e5e7eb;
}

.btn-create {
  background: #dc2626;
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s;
}

.btn-create:hover:not(:disabled) {
  background: #b91c1c;
}

.btn-create:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   OFFER MANAGER - GESTIÓN DE OFERTAS
   ============================================ */

.offer-manager-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.offer-manager-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.offer-manager-header h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  color: #111827;
}

.offer-manager-header p {
  margin: 0;
  color: #6b7280;
}

.btn-create-offer {
  background: #dc2626;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s;
}

.btn-create-offer:hover {
  background: #b91c1c;
}

/* Stats Grid */
.offer-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 16px;
  align-items: center;
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.stat-card.active {
  border-left: 4px solid #10b981;
}

.stat-icon {
  font-size: 32px;
}

.stat-content h3 {
  margin: 0 0 4px 0;
  font-size: 28px;
  color: #111827;
}

.stat-content p {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}

/* Offer Filters */
.offer-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  background: white;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.offer-filters button {
  background: #f3f4f6;
  color: #374151;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s;
}

.offer-filters button:hover {
  background: #e5e7eb;
}

.offer-filters button.active {
  background: #dc2626;
  color: white;
}

/* Offers Grid */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

/* ✅ SOBRESCRITURA PARA MÓVIL: Grid ultra-compacto en ofertas */
@media (max-width: 480px) {
  .offers-page .offers-grid {
    padding: 2px !important;
    row-gap: 2px !important;
    column-gap: 2px !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .offers-page {
    padding: 0 2px 80px 2px !important;
  }
}

.offer-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  border-left: 4px solid transparent;
}

.offer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.offer-card.offer-active {
  border-left-color: #10b981;
}

.offer-card.offer-paused {
  border-left-color: #f59e0b;
}

.offer-card.offer-cancelled {
  border-left-color: #6b7280;
  opacity: 0.7;
}

.offer-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.offer-card-header h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #111827;
}

.offer-type-badge {
  display: inline-block;
  background: #eff6ff;
  color: #2563eb;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.offer-status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.offer-description {
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 16px;
}

.offer-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 6px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.detail-label {
  color: #6b7280;
}

.detail-value {
  color: #111827;
  font-weight: 600;
}

.detail-value.expiring {
  color: #dc2626;
}

.offer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-action {
  flex: 1;
  min-width: 100px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.2s;
}

.btn-pause {
  background: #fef3c7;
  color: #92400e;
}

.btn-pause:hover {
  background: #fde68a;
}

.btn-activate {
  background: #d1fae5;
  color: #065f46;
}

.btn-activate:hover {
  background: #a7f3d0;
}

.btn-cancel {
  background: #fee2e2;
  color: #991b1b;
}

.btn-cancel:hover {
  background: #fecaca;
}

/* ============================================
   OFFERS PAGE - PÁGINA PÚBLICA
   ============================================ */

.offers-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  background: #f9fafb;
}

.offers-page-header {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: white;
  padding: 40px 24px;
  border-radius: 12px;
  margin-bottom: 32px;
  text-align: center;
}

.offers-page-header h1 {
  margin: 0 0 8px 0;
  font-size: 36px;
}

.offers-page-header p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.offers-filters-section {
  background: white;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.category-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.category-filters button {
  background: #f3f4f6;
  color: #374151;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.category-filters button:hover {
  background: #e5e7eb;
}

.category-filters button.active {
  background: #dc2626;
  color: white;
}

.sort-filters {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sort-filters label {
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.sort-filters select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

.offers-count {
  margin-bottom: 16px;
  color: #6b7280;
  font-size: 14px;
}

/* Products Grid with Offers */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.product-card.with-offer {
  position: relative;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.product-card.with-offer:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.product-image-container {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
  background: #f9fafb;
}

.product-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-content {
  padding: 16px;
}

.product-name {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #111827;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-brand {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #6b7280;
}

.product-prices {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

/* ============================================
   ESTADOS VACÍOS Y CARGA
   ============================================ */

.loading-state,
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.loading-state .spinner {
  width: 50px;
  height: 50px;
  margin: 0 auto 16px;
}

.empty-state .empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.empty-state h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #111827;
}

.empty-state p {
  margin: 0 0 24px 0;
  color: #6b7280;
}

.btn-primary {
  background: #dc2626;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: #b91c1c;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .offer-creator-content {
    grid-template-columns: 1fr;
  }

  .products-selection-section {
    max-height: 400px;
  }

  .discount-config-grid {
    grid-template-columns: 1fr;
  }

  .payment-promo-form {
    grid-template-columns: 1fr;
  }

  .offers-grid {
    grid-template-columns: 1fr;
  }

  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  .offer-stats-grid {
    grid-template-columns: 1fr;
  }

  .offer-filters {
    flex-wrap: wrap;
  }

  .category-filters {
    flex-direction: column;
  }

  .category-filters button {
    width: 100%;
  }
}
/* ✅ PANTALLA DE VERIFICACIÓN DE EMAIL */
.email-verification-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--beige-claro) 0%, var(--beige-medio) 100%);
  padding: 20px;
}

.verification-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
  overflow: hidden;
  animation: slideIn 0.6s ease-out;
}

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

.verification-header {
  background: linear-gradient(135deg, var(--verde-principal) 0%, var(--verde-hover) 100%);
  color: white;
  text-align: center;
  padding: 30px;
  position: relative;
}

.verification-logo {
  max-height: 60px;
  margin-bottom: 15px;
  filter: brightness(0) invert(1);
}

.verification-icon {
  font-size: 48px;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.verification-content {
  padding: 30px;
}

.verification-content h2 {
  color: var(--texto-principal);
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

.verification-subtitle {
  color: var(--texto-secundario);
  text-align: center;
  margin-bottom: 25px;
  font-size: 16px;
  line-height: 1.5;
}

.email-info {
  background: var(--beige-claro);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 25px;
  text-align: center;
}

.email-info h3 {
  color: var(--texto-principal);
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: 600;
}

.masked-email {
  color: var(--verde-principal);
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: bold;
  background: white;
  padding: 8px 16px;
  border-radius: 8px;
  display: inline-block;
  border: 2px solid var(--verde-principal);
}

.verification-instructions {
  margin-bottom: 30px;
}

.verification-instructions h4 {
  color: var(--texto-principal);
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 600;
}

.verification-instructions ol {
  color: var(--texto-secundario);
  padding-left: 20px;
  line-height: 1.6;
}

.verification-instructions li {
  margin-bottom: 8px;
}

.verification-instructions strong {
  color: var(--texto-principal);
  font-weight: 600;
}

.verification-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.verification-btn {
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.verification-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary.verification-btn {
  background: var(--verde-principal);
  color: white;
}

.btn-primary.verification-btn:hover:not(:disabled) {
  background: var(--verde-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-secondary.verification-btn {
  background: transparent;
  color: var(--verde-principal);
  border: 2px solid var(--verde-principal);
}

.btn-secondary.verification-btn:hover:not(:disabled) {
  background: var(--verde-principal);
  color: white;
}

.change-email-btn {
  background: none;
  border: none;
  color: var(--texto-secundario);
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
  padding: 10px;
  transition: color 0.3s ease;
}

.change-email-btn:hover {
  color: var(--texto-principal);
}

.verification-footer {
  background: var(--beige-claro);
  padding: 25px;
  border-top: 1px solid #eee;
}

.help-info h4 {
  color: var(--texto-principal);
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 600;
}

.help-info p {
  color: var(--texto-secundario);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* Responsive */
@media (max-width: 480px) {
  .email-verification-container {
    padding: 10px;
  }
  
  .verification-content {
    padding: 20px;
  }
  
  .verification-header {
    padding: 20px;
  }
  
  .verification-content h2 {
    font-size: 24px;
  }
  
  .verification-footer {
    padding: 20px;
  }
}.error-boundary {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  padding: 20px;
}

.error-boundary-container {
  background: white;
  border-radius: 16px;
  padding: 48px 32px;
  max-width: 600px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.error-icon {
  font-size: 72px;
  margin-bottom: 24px;
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
}

.error-boundary h1 {
  font-size: 32px;
  color: #1f2937;
  margin-bottom: 16px;
  font-weight: 700;
}

.error-message {
  font-size: 16px;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 32px;
}

.error-details {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  text-align: left;
}

.error-details h3 {
  font-size: 14px;
  color: #374151;
  margin-bottom: 12px;
}

.error-stack {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #ef4444;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
  background: #fef2f2;
  padding: 12px;
  border-radius: 4px;
  margin: 0;
}

.error-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.error-actions button {
  padding: 14px 24px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.error-actions .btn-primary {
  background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.error-actions .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
}

.error-actions .btn-secondary {
  background: #3b82f6;
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.error-actions .btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.error-actions .btn-tertiary {
  background: white;
  color: #374151;
  border: 2px solid #e5e7eb;
}

.error-actions .btn-tertiary:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.error-persistent-warning {
  margin-top: 24px;
  padding: 16px;
  background: #fef3c7;
  border: 2px solid #fbbf24;
  border-radius: 8px;
}

.error-persistent-warning p {
  font-size: 14px;
  color: #92400e;
  margin: 0;
}

@media (max-width: 768px) {
  .error-boundary-container {
    padding: 32px 20px;
  }

  .error-boundary h1 {
    font-size: 24px;
  }

  .error-icon {
    font-size: 56px;
  }

  .error-actions {
    flex-direction: column;
  }
}

/* ✅ ESTILOS MEJORADOS PARA AUTENTICACIÓN CON MOSTRAR/OCULTAR CONTRASEÑA */

/* Contenedor para input de contraseña con botón toggle */
.password-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input {
  width: 100%;
  padding-right: 45px !important; /* Espacio para el botón */
}

.password-toggle-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
  z-index: 2;
}

.password-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.password-toggle-btn:focus {
  outline: 2px solid var(--verde-principal);
  outline-offset: 2px;
}

.password-hint {
  color: var(--texto-secundario);
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

.address-hint {
  color: var(--texto-secundario);
  font-size: 12px;
  margin-top: 4px;
  display: block;
  font-style: italic;
}

/* Estilos específicos adicionales para el componente Login */
.auth-card h3 {
  color: var(--primary-green);
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

/* Mejoras específicas para iconos sociales */
.facebook-icon {
  color: #4267b2;
  font-weight: bold;
}

/* Placeholder styles */
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--gray-dark);
  opacity: 0.7;
}

/* Social icon images */
.social-icon-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  transition: all 0.3s ease;
}

.social-btn:hover .social-icon-img {
  transform: scale(1.1);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
}

/* ✅ INDICADORES DE REQUISITOS DE CONTRASEÑA */
.password-requirements {
  margin-top: 12px;
  padding: 12px;
  background-color: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.requirement {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  color: #6b7280;
  transition: all 0.2s ease;
}

.requirement:last-child {
  margin-bottom: 0;
}

.requirement.valid {
  color: #4CAF50;
  font-weight: 500;
}

.requirement-icon {
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  width: 16px;
  text-align: center;
}

.requirement.valid .requirement-icon {
  color: #4CAF50;
}

.requirement:not(.valid) .requirement-icon {
  color: #9ca3af;
}

/* Deshabilitar botón con mejor estilo visual */
.auth-btn:disabled {
  background: #d1d5db;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Botón de Google a ancho completo */
.google-btn-full {
  width: 100% !important;
  max-width: 100% !important;
  justify-content: center;
}
/* ✅ PANTALLA DE RECUPERACIÓN DE CONTRASEÑA PROFESIONAL */
.recovery-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--beige-claro) 0%, var(--beige-medio) 100%);
  padding: 20px;
}

.recovery-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
  overflow: hidden;
  animation: slideIn 0.6s ease-out;
}

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

.recovery-header {
  background: linear-gradient(135deg, var(--azul-principal) 0%, var(--azul-hover) 100%);
  color: white;
  text-align: center;
  padding: 30px;
  position: relative;
}

.recovery-logo {
  max-height: 60px;
  margin-bottom: 15px;
  filter: brightness(0) invert(1);
}

.recovery-icon {
  font-size: 48px;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.recovery-content {
  padding: 30px;
}

.recovery-content h2 {
  color: var(--texto-principal);
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

.recovery-subtitle {
  color: var(--texto-secundario);
  text-align: center;
  margin-bottom: 25px;
  font-size: 16px;
  line-height: 1.5;
}

.recovery-form {
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: var(--texto-principal);
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 16px;
  background: white;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: var(--azul-principal);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.recovery-btn {
  width: 100%;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  margin-bottom: 12px;
}

.recovery-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary.recovery-btn {
  background: var(--azul-principal);
  color: white;
}

.btn-primary.recovery-btn:hover:not(:disabled) {
  background: var(--azul-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-secondary.recovery-btn {
  background: transparent;
  color: var(--azul-principal);
  border: 2px solid var(--azul-principal);
}

.btn-secondary.recovery-btn:hover:not(:disabled) {
  background: var(--azul-principal);
  color: white;
}

.email-info {
  background: var(--beige-claro);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 25px;
  text-align: center;
}

.email-info h3 {
  color: var(--texto-principal);
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: 600;
}

.masked-email {
  color: var(--azul-principal);
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: bold;
  background: white;
  padding: 8px 16px;
  border-radius: 8px;
  display: inline-block;
  border: 2px solid var(--azul-principal);
}

.recovery-instructions {
  margin-bottom: 30px;
}

.recovery-instructions h4 {
  color: var(--texto-principal);
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 600;
}

.recovery-instructions ol {
  color: var(--texto-secundario);
  padding-left: 20px;
  line-height: 1.6;
}

.recovery-instructions li {
  margin-bottom: 8px;
}

.recovery-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recovery-footer {
  background: var(--beige-claro);
  padding: 25px;
  border-top: 1px solid #eee;
}

.recovery-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.recovery-link {
  color: var(--azul-principal);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: color 0.3s ease;
}

.recovery-link:hover {
  color: var(--azul-hover);
  text-decoration: underline;
}

.help-info h4 {
  color: var(--texto-principal);
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 600;
}

.help-info ul {
  color: var(--texto-secundario);
  font-size: 14px;
  line-height: 1.5;
  padding-left: 20px;
  margin: 0;
}

.help-info li {
  margin-bottom: 5px;
}

/* Responsive */
@media (max-width: 480px) {
  .recovery-container {
    padding: 10px;
  }
  
  .recovery-content {
    padding: 20px;
  }
  
  .recovery-header {
    padding: 20px;
  }
  
  .recovery-content h2 {
    font-size: 24px;
  }
  
  .recovery-footer {
    padding: 20px;
  }

  .recovery-links {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
}/* Botón de Arrepentimiento - Estilos */

/* Versión flotante */
.withdrawal-floating {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.withdrawal-btn-floating {
  background: linear-gradient(135deg, var(--naranja-principal), var(--naranja-hover));
  color: var(--blanco);
  border: none;
  border-radius: 50px;
  padding: 12px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
  justify-content: center;
}

.withdrawal-btn-floating:hover {
  background: linear-gradient(135deg, var(--naranja-hover), var(--naranja-principal));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.withdrawal-icon {
  font-size: 1.1rem;
}

.withdrawal-text {
  white-space: nowrap;
}

/* Versión inline */
.withdrawal-inline {
  margin: 1rem 0;
}

.withdrawal-btn-inline {
  background: var(--beige-claro);
  color: var(--naranja-principal);
  border: 2px solid var(--naranja-principal);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.withdrawal-btn-inline:hover {
  background: var(--naranja-principal);
  color: var(--blanco);
  transform: translateY(-1px);
}

/* Modal */
.withdrawal-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  backdrop-filter: blur(5px);
}

.withdrawal-modal {
  background: var(--blanco);
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.withdrawal-modal-header {
  background: var(--naranja-principal);
  color: var(--blanco);
  padding: 1.5rem 2rem;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.withdrawal-modal-header h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.modal-close {
  background: none;
  border: none;
  color: var(--blanco);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.withdrawal-modal-content {
  padding: 2rem;
}

.withdrawal-info {
  background: var(--beige-claro);
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--naranja-principal);
}

.withdrawal-info h3 {
  color: var(--negro);
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
}

.withdrawal-info ul {
  margin: 0;
  padding-left: 1rem;
}

.withdrawal-info li {
  color: var(--gris-oscuro);
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

.withdrawal-message {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.withdrawal-message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.withdrawal-message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.withdrawal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  color: var(--negro);
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.75rem;
  border: 2px solid var(--gris-claro);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--naranja-principal);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.withdrawal-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.btn-cancel,
.btn-submit {
  flex: 1;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-cancel {
  background: var(--gris-claro);
  color: var(--gris-oscuro);
}

.btn-cancel:hover:not(:disabled) {
  background: var(--gris-medio);
  color: var(--negro);
}

.btn-submit {
  background: var(--naranja-principal);
  color: var(--blanco);
}

.btn-submit:hover:not(:disabled) {
  background: var(--naranja-hover);
  transform: translateY(-1px);
}

.btn-submit:disabled,
.btn-cancel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.withdrawal-legal-note {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--beige-claro);
  border-radius: 6px;
  text-align: center;
}

.withdrawal-legal-note p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--gris-oscuro);
  line-height: 1.4;
}

.withdrawal-legal-note a {
  color: var(--naranja-principal);
  text-decoration: none;
  font-weight: 600;
}

.withdrawal-legal-note a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .withdrawal-floating {
    bottom: 80px; /* Evitar conflicto con navegación móvil */
    right: 15px;
  }

  .withdrawal-btn-floating {
    padding: 10px 16px;
    font-size: 0.8rem;
    min-width: 140px;
  }

  .withdrawal-text {
    display: none;
  }

  .withdrawal-modal {
    margin: 10px;
    max-height: 95vh;
  }

  .withdrawal-modal-header {
    padding: 1rem 1.5rem;
  }

  .withdrawal-modal-header h2 {
    font-size: 1.1rem;
  }

  .withdrawal-modal-content {
    padding: 1.5rem;
  }

  .withdrawal-actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .withdrawal-btn-floating {
    padding: 8px 12px;
    min-width: 120px;
  }

  .withdrawal-icon {
    font-size: 1rem;
  }
}/* 🎓 ONBOARDING TOOLTIP STYLES - Enterprise Level */

/* Overlay semitransparente - MUY SUTIL para ver elementos */
.onboarding-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1); /* Muy transparente */
  backdrop-filter: blur(1px); /* Blur mínimo */
  z-index: 9998;
  animation: fadeIn 0.3s ease-in-out;
}

/* Tooltip profesional - PEGADO AL ELEMENTO CON FLECHA - Optimizado */
.onboarding-tooltip {
  position: fixed;
  background: white;
  border-radius: 10px;
  padding: 10px 12px;
  max-width: 185px;
  width: auto;
  min-width: 160px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.15),
              0 1px 6px rgba(44, 95, 45, 0.08);
  border: 1.5px solid #2C5F2D;
  z-index: 9999;
  animation: tooltipFadeIn 0.25s ease-out;
  pointer-events: auto;
}

/* Tooltip centrado (modal de bienvenida) */
.onboarding-tooltip-center {
  max-width: 240px;
  padding: 16px;
}

/* Flechas apuntando al elemento */
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

/* Flecha cuando tooltip está ABAJO del elemento (apunta hacia arriba) */
.arrow-bottom {
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #2C5F2D transparent;
}

.arrow-bottom::after {
  content: '';
  position: absolute;
  top: 2px;
  left: -8px;
  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: transparent transparent white transparent;
}

/* Flecha cuando tooltip está ARRIBA del elemento (apunta hacia abajo) */
.arrow-top {
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px 10px 0 10px;
  border-color: #2C5F2D transparent transparent transparent;
}

.arrow-top::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: -8px;
  border-width: 8px 8px 0 8px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}

/* Flecha cuando tooltip está a la IZQUIERDA del elemento (apunta hacia derecha) */
.arrow-left {
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #2C5F2D;
}

.arrow-left::after {
  content: '';
  position: absolute;
  right: 2px;
  top: -8px;
  border-width: 8px 0 8px 8px;
  border-style: solid;
  border-color: transparent transparent transparent white;
}

/* Flecha cuando tooltip está a la DERECHA del elemento (apunta hacia izquierda) */
.arrow-right {
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 10px 10px 10px 0;
  border-color: transparent #2C5F2D transparent transparent;
}

.arrow-right::after {
  content: '';
  position: absolute;
  left: 2px;
  top: -8px;
  border-width: 8px 8px 8px 0;
  border-style: solid;
  border-color: transparent white transparent transparent;
}

/* Contador de pasos - 30% MÁS PEQUEÑO */
.onboarding-step-counter {
  position: absolute;
  top: 6px;
  right: 7px;
  background: #e8f5e9;
  color: #2C5F2D;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  letter-spacing: 0.2px;
}

/* Icono - 30% MÁS PEQUEÑO */
.onboarding-icon {
  font-size: 20px;
  text-align: center;
  margin-bottom: 6px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.onboarding-icon-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* Título - Agrandado +2pt */
.onboarding-title {
  font-size: 13px;
  font-weight: 700;
  color: #2C5F2D;
  margin: 0 0 5px 0;
  line-height: 1.3;
  padding-right: 28px; /* Espacio para el contador */
}

/* Descripción - Agrandado +2pt */
.onboarding-description {
  font-size: 11px;
  color: #4b5563;
  line-height: 1.4;
  margin: 0 0 9px 0;
}

/* Imagen/GIF explicativo (opcional) - 30% MÁS PEQUEÑO */
.onboarding-image {
  width: 100%;
  max-height: 140px; /* 30% más pequeño */
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 14px;
}

/* Contenedor de botones - 30% MÁS PEQUEÑO */
.onboarding-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 7px;
}

/* Botones - Optimizado */
.onboarding-btn {
  flex: 1;
  padding: 7px 9px;
  border: none;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.onboarding-btn-skip {
  background: #f3f4f6;
  color: #6b7280;
}

.onboarding-btn-skip:hover {
  background: #e5e7eb;
}

.onboarding-btn-next {
  background: #2C5F2D; /* Verde principal */
  color: white;
}

.onboarding-btn-next:hover {
  background: #234a24;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(44, 95, 45, 0.3);
}

/* Indicador de progreso (dots) - Optimizado */
.onboarding-progress-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
}

.onboarding-progress-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e5e7eb;
  transition: all 0.3s ease;
}

.onboarding-progress-dots .dot.active {
  background: #2C5F2D;
  transform: scale(1.3);
}

.onboarding-progress-dots .dot.completed {
  background: #10b981;
}

/* Highlight del elemento target */
:global(.onboarding-highlight) {
  position: relative;
  z-index: 9997;
  box-shadow: 0 0 0 4px rgba(44, 95, 45, 0.3),
              0 0 0 8px rgba(44, 95, 45, 0.1);
  border-radius: 8px;
  animation: pulse 2s ease-in-out infinite;
}

/* Animaciones */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Animación suave de aparición */
@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(44, 95, 45, 0.3),
                0 0 0 8px rgba(44, 95, 45, 0.1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(44, 95, 45, 0.4),
                0 0 0 12px rgba(44, 95, 45, 0.15);
  }
}

/* Responsive - Optimizado en móvil */
@media (max-width: 768px) {
  .onboarding-tooltip {
    max-width: 175px;
    padding: 9px 10px;
  }

  .onboarding-tooltip-center {
    max-width: 220px;
    padding: 13px;
  }

  .onboarding-title {
    font-size: 12px;
  }

  .onboarding-description {
    font-size: 10px;
  }

  .onboarding-icon {
    font-size: 17px;
  }
  
  .onboarding-icon-img {
    width: 18px;
    height: 18px;
  }
}
/* ==========================================
   NOTIFICATION CENTER - MINIMALISTA PRÁCTICO
   ========================================== */

.notification-center {
  position: relative;
}

/* ==========================================
   BOTÓN DE CAMPANA
   ========================================== */

.notification-bell {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.notification-bell:hover {
  opacity: 0.7;
}

.bell-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #E53935;
  color: white;
  border-radius: 10px;
  padding: 2px 5px;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  line-height: 1;
  border: 2px solid white;
}

/* ==========================================
   DROPDOWN - MINIMALISTA Y PRÁCTICO
   ========================================== */

.notification-dropdown {
  position: fixed;
  top: 52px;
  right: 12px;
  width: 520px;
  max-height: 480px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  animation: slideDown 0.12s ease-out;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================
   HEADER - ULTRA DISCRETO
   ========================================== */

.notification-header {
  padding: 10px 16px;
  background: #f8f8f8;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid #e8e8e8;
}

.mark-all-read {
  background: transparent;
  border: none;
  color: #5CB85C;
  font-size: 0.7em;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.mark-all-read:hover {
  background: #f0f0f0;
  color: #4CAE4C;
}

/* ==========================================
   LISTA DE NOTIFICACIONES
   ========================================== */

.notifications-list {
  flex: 1;
  overflow-y: auto;
  max-height: 380px;
  background: white;
}

.notifications-list::-webkit-scrollbar {
  width: 4px;
}

.notifications-list::-webkit-scrollbar-track {
  background: transparent;
}

.notifications-list::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 10px;
}

/* ==========================================
   ESTADOS VACÍO Y CARGA
   ========================================== */

.notifications-loading,
.no-notifications {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: white;
  color: #999;
}

.spinner-icon {
  width: 24px;
  height: 24px;
  color: #5CB85C;
  margin-bottom: 8px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.empty-icon {
  width: 32px;
  height: 32px;
  color: #ccc;
  margin-bottom: 8px;
  stroke-width: 1.5;
}

.notifications-loading p,
.no-notifications p {
  margin: 0;
  font-size: 0.8em;
  font-weight: 500;
  color: #999;
}

/* ==========================================
   NOTIFICACIONES INDIVIDUALES - ALTURA AUTO
   ========================================== */

.notification-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 16px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.15s ease;
  gap: 12px;
  min-height: 60px;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:hover {
  background: #f9f9f9;
}

.notification-item.unread {
  background: #F8FCF8;
  border-left: 3px solid #5CB85C;
  padding-left: 13px;
}

.notification-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 6px;
  margin-top: 2px;
}

.notification-type-icon {
  width: 16px;
  height: 16px;
  color: #666;
  stroke-width: 2;
}

.notification-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notification-title {
  font-weight: 600;
  color: #333;
  font-size: 0.82em;
  margin: 0;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.notification-message {
  color: #666;
  font-size: 0.76em;
  line-height: 1.4;
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.notification-time {
  color: #999;
  font-size: 0.68em;
  font-weight: 500;
  margin-top: 2px;
}

.unread-indicator {
  width: 6px;
  height: 6px;
  background: #5CB85C;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
  margin-left: 4px;
}

/* ==========================================
   FOOTER - COMPACTO
   ========================================== */

.notification-footer {
  padding: 10px 16px;
  background: #fafafa;
  border-top: 1px solid #e8e8e8;
  flex-shrink: 0;
}

.view-all-notifications {
  width: 100%;
  padding: 7px;
  background: white;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  color: #5CB85C;
  font-size: 0.74em;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

.view-all-notifications:hover {
  background: #5CB85C;
  color: white;
  border-color: #5CB85C;
}

/* ==========================================
   PUSH NOTIFICATIONS PROMPT - COMPACTO
   ========================================== */

.notification-push-prompt {
  padding: 10px 16px;
  background: #FFF9E6;
  border-top: 1px solid #FFE5A3;
  border-bottom: 1px solid #FFE5A3;
  flex-shrink: 0;
}

.push-prompt-text {
  color: #E67E22;
  font-size: 0.72em;
  margin: 0 0 6px 0;
  font-weight: 500;
  line-height: 1.3;
}

.enable-push-btn {
  width: 100%;
  padding: 6px;
  background: #F39C12;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 0.74em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.enable-push-btn:hover:not(:disabled) {
  background: #E67E22;
}

.enable-push-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================
   RESPONSIVE - MÓVIL
   ========================================== */

@media (max-width: 768px) {
  .notification-dropdown {
    position: fixed;
    top: 67px;
    left: 1px;
    right: 1px;
    width: auto;
    max-height: 360px;
  }
}

@media (max-width: 480px) {
  .notification-dropdown {
    top: 65px;
    left: 1px;
    right: 1px;
    max-height: 340px;
  }
  
  .notification-item {
    padding: 8px 6px;
    min-height: 56px;
    gap: 8px;
  }
  
  .notification-icon {
    width: 26px;
    height: 26px;
  }
  
  .notification-type-icon {
    width: 13px;
    height: 13px;
  }
  
  .notification-title {
    font-size: 0.78em;
  }
  
  .notification-message {
    font-size: 0.72em;
  }
  
  .notification-time {
    font-size: 0.66em;
  }
}

@media (max-width: 380px) {
  .notification-dropdown {
    top: 63px;
    left: 1px;
    right: 1px;
    max-height: 320px;
  }
  
  .notification-header {
    padding: 6px 8px;
  }
  
  .mark-all-read {
    font-size: 0.68em;
    padding: 3px 6px;
  }
  
  .notification-item {
    padding: 8px 5px;
    gap: 6px;
    min-height: 52px;
  }
  
  .notification-icon {
    width: 24px;
    height: 24px;
  }
  
  .notification-type-icon {
    width: 12px;
    height: 12px;
  }
  
  .notification-title {
    font-size: 0.76em;
  }
  
  .notification-message {
    font-size: 0.7em;
  }
  
  .notification-time {
    font-size: 0.64em;
  }
}

/* ==========================================
   SPINNER PARA BOTONES
   ========================================== */

.spinner-small {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
  opacity: 0.6;
}

@media (max-width: 360px) {
  .notification-dropdown {
    top: 60px;
    left: 1px;
    right: 1px;
    max-height: 300px;
  }
}
/**
 * ProductSearchFilters.css
 * Estilos profesionales para el panel de filtros de búsqueda
 * Alineado con DeLaFeria design palette
 * 
 * Colores principales:
 * - Verde: #2C5F2D (primario)
 * - Coral: #FF7A59 (acento)
 * - Dorado: #FFB800 (destacados)
 */

/* Variables del tema DeLaFeria */
:root {
  --delaferia-green: #2C5F2D;
  --delaferia-coral: #FF7A59;
  --delaferia-gold: #FFB800;
  --dark-gray: #333;
  --gray: #666;
  --light-gray: #999;
  --background-light: #f8fafc;
  --border-color: #e2e8f0;
}

/* ===== OVERLAY Y PANEL PRINCIPAL ===== */
.product-search-filters-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.product-search-filters-panel {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  max-width: 500px;
  width: 100%;
  margin-top: 80px;
  animation: slideDown 0.3s ease;
  position: relative;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== HEADER DEL PANEL ===== */
.filters-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 2px solid var(--border-color);
  background: linear-gradient(135deg, var(--delaferia-green) 0%, #1e4620 100%);
  border-radius: 16px 16px 0 0;
}

.filters-header-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.filters-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
}

.filters-icon {
  font-size: 1.5rem;
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.active-filters-badge {
  background: var(--delaferia-gold);
  color: var(--dark-gray);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.filters-close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filters-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* ===== CONTENIDO DEL PANEL ===== */
.filters-panel-content {
  padding: 1.5rem;
  max-height: 500px;
  overflow-y: auto;
}

/* Scroll personalizado */
.filters-panel-content::-webkit-scrollbar {
  width: 6px;
}

.filters-panel-content::-webkit-scrollbar-track {
  background: var(--background-light);
  border-radius: 10px;
}

.filters-panel-content::-webkit-scrollbar-thumb {
  background: var(--delaferia-green);
  border-radius: 10px;
}

.filters-panel-content::-webkit-scrollbar-thumb:hover {
  background: #1e4620;
}

/* ===== SECCIONES DE FILTROS ===== */
.filter-section {
  margin-bottom: 1.5rem;
}

.filter-section:last-child {
  margin-bottom: 0;
}

.filter-section-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--dark-gray);
  margin-bottom: 0.75rem;
}

.filter-icon {
  font-size: 1.125rem;
  opacity: 0.8;
}

/* ===== SELECTS ===== */
.filter-select {
  width: 100%;
  padding: 0.875rem;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  font-size: 0.875rem;
  background: var(--background-light);
  color: var(--dark-gray);
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.filter-select:focus {
  outline: none;
  border-color: var(--delaferia-green);
  background: white;
  box-shadow: 0 0 0 3px rgba(44, 95, 45, 0.1);
}

.filter-select:hover {
  border-color: var(--delaferia-green);
}

/* Subcategorías con indentación visual */
.filter-subcategory {
  margin-top: 0.75rem;
  border-left: 3px solid var(--delaferia-coral);
}

.filter-subsubcategory {
  margin-top: 0.75rem;
  border-left: 3px solid var(--delaferia-gold);
}

/* ===== RANGO DE PRECIOS ===== */
.price-range-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.price-input {
  flex: 1;
  padding: 0.875rem;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  font-size: 0.875rem;
  background: var(--background-light);
  color: var(--dark-gray);
  transition: all 0.3s ease;
  font-weight: 500;
}

.price-input:focus {
  outline: none;
  border-color: var(--delaferia-green);
  background: white;
  box-shadow: 0 0 0 3px rgba(44, 95, 45, 0.1);
}

.price-input:hover {
  border-color: var(--delaferia-green);
}

.price-separator {
  color: var(--gray);
  font-weight: 700;
  font-size: 1.125rem;
}

/* ===== CHECKBOX PERSONALIZADO ===== */
.filter-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
  padding: 0.75rem;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.filter-checkbox-label:hover {
  background: var(--background-light);
}

.filter-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkbox-custom {
  position: relative;
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  background: var(--background-light);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.filter-checkbox:checked ~ .checkbox-custom {
  background: var(--delaferia-green);
  border-color: var(--delaferia-green);
}

.filter-checkbox:checked ~ .checkbox-custom::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
}

.checkbox-text {
  color: var(--dark-gray);
  font-size: 0.875rem;
  font-weight: 500;
}

/* ===== FOOTER CON ACCIONES ===== */
.filters-panel-footer {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 2px solid var(--border-color);
  background: var(--background-light);
  border-radius: 0 0 16px 16px;
}

.filter-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border: 2px solid;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-icon {
  font-size: 1.125rem;
}

.clear-btn {
  background: white;
  border-color: var(--delaferia-coral);
  color: var(--delaferia-coral);
}

.clear-btn:hover {
  background: var(--delaferia-coral);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 122, 89, 0.3);
}

.apply-btn {
  background: var(--delaferia-green);
  border-color: var(--delaferia-green);
  color: white;
}

.apply-btn:hover {
  background: #1e4620;
  border-color: #1e4620;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(44, 95, 45, 0.4);
}

.apply-btn:active {
  transform: translateY(0);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 640px) {
  .product-search-filters-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .product-search-filters-panel {
    max-width: 100%;
    margin-top: 0;
    border-radius: 16px 16px 0 0;
    max-height: 90vh;
    animation: slideUp 0.3s ease;
  }

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

  .filters-panel-content {
    max-height: calc(90vh - 180px);
  }

  .filters-title {
    font-size: 1.125rem;
  }

  .filter-section-label {
    font-size: 0.8125rem;
  }

  .filter-select,
  .price-input {
    font-size: 0.8125rem;
    padding: 0.75rem;
  }

  .filters-panel-footer {
    flex-direction: column;
    gap: 0.75rem;
  }

  .filter-action-btn {
    padding: 0.875rem;
  }
}

@media (max-width: 400px) {
  .price-range-container {
    flex-direction: column;
    gap: 0.5rem;
  }

  .price-separator {
    transform: rotate(90deg);
  }

  .price-input {
    width: 100%;
  }
}

/* ===== ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
  .product-search-filters-overlay,
  .product-search-filters-panel,
  .filters-close-btn,
  .filter-action-btn,
  .filter-select,
  .price-input {
    animation: none;
    transition: none;
  }
}

/* ===== ESTADOS DE LOADING ===== */
.filter-select:disabled,
.price-input:disabled,
.filter-checkbox:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.filter-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}
/* 🛡️ ESTILOS DE MODERACIÓN DE CONTENIDO */

.moderation-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin: 0.5rem 0;
  font-size: 0.875rem;
  line-height: 1.5;
  border-left: 3px solid;
  transition: all 0.2s ease;
}

.moderation-warning.moderation-info {
  background: rgba(76, 175, 80, 0.08);
  border-left-color: #4CAF50;
  color: #2e7d32;
}

.moderation-warning.moderation-warning {
  background: rgba(255, 152, 0, 0.08);
  border-left-color: #FF9800;
  color: #e65100;
}

.moderation-warning.moderation-error {
  background: rgba(244, 67, 54, 0.08);
  border-left-color: #f44336;
  color: #c62828;
}

.moderation-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.moderation-icon.info {
  color: #4CAF50;
}

.moderation-icon.warning {
  color: #FF9800;
}

.moderation-icon.error {
  color: #f44336;
}

.moderation-content {
  flex: 1;
}

.moderation-text {
  margin: 0 0 0.5rem 0;
  font-weight: 500;
}

.moderation-policy-link {
  background: none;
  border: none;
  color: #4CAF50;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.moderation-policy-link:hover {
  color: #45a049;
  text-decoration: underline;
}

/* Badge de moderación en contenido */
.moderation-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.moderation-badge svg {
  font-size: 0.75rem;
}

/* Mensaje de sistema en chat */
.chat-message.chat-moderation {
  background: rgba(76, 175, 80, 0.05);
  border: 1px solid rgba(76, 175, 80, 0.2);
  padding: 0.75rem;
  border-radius: 8px;
  margin: 0.5rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.chat-message.chat-error {
  background: rgba(244, 67, 54, 0.05);
  border: 1px solid rgba(244, 67, 54, 0.2);
  padding: 0.75rem;
  border-radius: 8px;
  margin: 0.5rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.chat-message.chat-system {
  background: rgba(158, 158, 158, 0.05);
  border: 1px solid rgba(158, 158, 158, 0.2);
  padding: 0.75rem;
  border-radius: 8px;
  margin: 0.5rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.message-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.message-content {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Resumen de moderación para productos */
.moderation-summary {
  background: #fff;
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 12px;
  padding: 1.25rem;
  margin: 1rem 0;
}

.moderation-summary-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: #4CAF50;
}

.moderation-summary-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.moderation-field {
  background: rgba(76, 175, 80, 0.05);
  border-radius: 6px;
  padding: 0.75rem;
  margin: 0.5rem 0;
}

.moderation-field-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.moderation-field-value {
  font-size: 0.875rem;
  color: #333;
  margin-top: 0.25rem;
}

.moderation-field-value.original {
  text-decoration: line-through;
  color: #999;
  font-style: italic;
}

.moderation-field-value.moderated {
  color: #4CAF50;
  font-weight: 500;
}

/* Animaciones */
@keyframes moderationPulse {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.moderation-warning {
  animation: moderationPulse 0.3s ease-out;
}

/* Responsive */
@media (max-width: 768px) {
  .moderation-warning {
    padding: 0.6rem 0.75rem;
    font-size: 0.8125rem;
    gap: 0.5rem;
  }

  .moderation-icon {
    font-size: 1.1rem;
  }

  .moderation-policy-link {
    font-size: 0.75rem;
  }

  .moderation-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
  }
}
/* ====================================
   CLIPS FEED - GRID 3 COLUMNAS
   Diseño tipo Dashboard Comprador
   ==================================== */

.clips-feed-grid-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
  padding: 12px 8px;
  padding-bottom: calc(80px + 12px); /* Espacio para navbar */
}

/* Grid 3 columnas responsive */
.clips-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Clip Thumbnail Card - Aspecto Dashboard Comprador */
.clip-thumbnail-card {
  position: relative;
  aspect-ratio: 9/16;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #1a1a1a;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clip-thumbnail-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.clip-thumbnail-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.clip-thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clip-thumbnail-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  color: white;
}

.thumbnail-icon {
  font-size: 2.5rem;
  margin-bottom: 8px;
}

.thumbnail-provider {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Overlay con favoritos y play button */
.clip-thumbnail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    transparent 30%,
    transparent 70%,
    rgba(0, 0, 0, 0.6) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.clip-thumbnail-card:hover .clip-thumbnail-overlay {
  opacity: 1;
}

/* Botón de favoritos en esquina superior derecha */
.clip-favorite-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  z-index: 10;
  font-size: 1.1rem;
}

.clip-favorite-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

.clip-favorite-btn.active {
  background: rgba(244, 63, 31, 0.9);
}

.clip-favorite-btn .favorite-icon-img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

.clip-favorite-btn.active .favorite-icon-img {
  filter: none;
}

/* Play button centrado */
.clip-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.clip-play-button .play-icon {
  font-size: 1.3rem;
  color: #1a1a1a;
  margin-left: 4px;
}

.clip-thumbnail-card:hover .clip-play-button {
  background: white;
  transform: translate(-50%, -50%) scale(1.1);
}

/* Info del producto debajo de la miniatura */
.clip-info-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
}

.clip-product-title-mini {
  font-size: 0.7rem;
  font-weight: 600;
  color: white;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.clip-product-price-mini {
  font-size: 0.75rem;
  font-weight: 700;
  color: #f43f1f;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* Loading states */
.clips-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px);
  background: linear-gradient(135deg, #205333, #f43f1f);
  color: white;
}

.clips-loading .rotating {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.clips-loading p {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 1rem 0 0 0;
}

.clips-feed-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  min-height: 50vh;
}

.error-icon {
  font-size: 4rem;
  margin-bottom: 20px;
}

.retry-btn {
  background: #f43f1f;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  margin-top: 15px;
  transition: background 0.2s;
}

.retry-btn:hover {
  background: #d63516;
}

.empty-feed {
  text-align: center;
  padding: 40px;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 20px;
}

.empty-feed h3 {
  margin: 0 0 10px 0;
  color: #205333;
}

.empty-feed p {
  margin: 0;
  color: #666;
}

/* Loading more indicator */
.loading-more-grid {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.loading-more-grid .loading-spinner {
  font-size: 2rem;
  margin-bottom: 10px;
  animation: spin 2s linear infinite;
}

/* End of feed message */
.end-of-feed-grid {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px;
  color: #666;
  font-size: 0.9rem;
}

/* Load more trigger */
.load-more-trigger {
  grid-column: 1 / -1;
  height: 50px;
}

/* ====================================
   FULLSCREEN PLAYER
   Mismo estilo que InlineClipsRow
   ==================================== */

/* Fullscreen overlay */
.shorts-fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shorts-fullscreen-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Header superior */
.shorts-header-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
  padding: 16px;
  z-index: 100;
}

.shorts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shorts-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shorts-header-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.shorts-header-title {
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.shorts-back-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  backdrop-filter: blur(10px);
}

.shorts-back-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.shorts-back-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

/* Navigation arrows */
.shorts-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(10px);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shorts-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-50%) scale(1.1);
}

.shorts-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.shorts-nav-prev {
  left: 16px;
}

.shorts-nav-next {
  right: 16px;
}

/* Video container */
.shorts-video-container {
  width: 100%;
  max-width: 480px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  position: relative;
}

/* Overlay dinámico inteligente para detección de gestos */
.shorts-touch-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  background: transparent;
  touch-action: manipulation;
  transition: pointer-events 0.05s ease;
}

/* Estado activo: captura eventos para detectar swipes */
.shorts-touch-overlay.active {
  pointer-events: auto;
}

/* Estado inactivo: permite que eventos pasen al iframe para interacción */
.shorts-touch-overlay.inactive {
  pointer-events: none;
}

/* Player components */
.shorts-player-youtube,
.shorts-player-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shorts-iframe {
  width: 100%;
  height: 100%;
}

.shorts-player-error {
  color: white;
  text-align: center;
  padding: 20px;
}

/* Product info row - arriba del navbar */
.shorts-product-info-row {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 95;
}

.shorts-product-title {
  flex: 1;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.shorts-product-price {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #f43f1f;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  white-space: nowrap;
}

/* Navbar inferior con fondo completo */
.shorts-bottom-navbar-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
  padding: 12px 16px 20px;
  z-index: 100;
}

.shorts-navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}

/* Botones del navbar */
.shorts-btn,
.shorts-navbar-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.shorts-btn:hover,
.shorts-navbar-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

.shorts-favorites-btn.active {
  background: rgba(244, 63, 31, 0.9);
}

/* ✅ Botón LIKE con contador vertical */
.shorts-like-btn {
  flex-direction: column !important;
  gap: 0 !important;
  padding: 4px !important;
}

.shorts-like-btn.active {
  background: rgba(244, 63, 31, 0.2);
}

/* ✅ Contador de comentarios vertical */
.shorts-comments-btn {
  flex-direction: column !important;
  gap: 0 !important;
  padding: 4px !important;
}

.shorts-btn-icon,
.shorts-btn-icon-cart {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

/* Botón "Me lo Compro!" - más grande y destacado */
.shorts-buy-btn {
  width: auto !important;
  padding: 0 20px;
  border-radius: 24px;
  background: rgba(244, 63, 31, 0.95) !important;
  gap: 8px;
}

.shorts-buy-btn:hover {
  background: rgba(244, 63, 31, 1) !important;
}

.shorts-buy-text {
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Comments panel */
.shorts-comments-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(26, 26, 26, 0.98);
  border-radius: 20px 20px 0 0;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  z-index: 110;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.shorts-comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.shorts-comments-header h4 {
  margin: 0;
  color: white;
  font-size: 1rem;
}

.shorts-comments-close {
  background: transparent;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.shorts-comments-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.shorts-comments-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  color: white;
}

.shorts-comment-item {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.comment-text {
  flex: 1;
}

.comment-text strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.comment-text p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.9;
}

.shorts-comment-input {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.comment-input-field {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 10px 16px;
  color: white;
  font-size: 0.9rem;
}

.comment-input-field::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.comment-send-btn {
  background: #f43f1f;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.2s;
}

.comment-send-btn:hover {
  background: #d63516;
  transform: scale(1.05);
}

/* ====================================
   RESPONSIVE - MOBILE
   ==================================== */

@media (max-width: 768px) {
  .clips-grid-3col {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  
  .clip-thumbnail-card {
    border-radius: 10px;
  }
  
  .clip-favorite-btn {
    width: 28px;
    height: 28px;
    top: 6px;
    right: 6px;
  }
  
  .clip-favorite-btn .favorite-icon-img {
    width: 16px;
    height: 16px;
  }
  
  .clip-play-button {
    width: 40px;
    height: 40px;
  }
  
  .clip-play-button .play-icon {
    font-size: 1.1rem;
  }
  
  .clip-product-title-mini {
    font-size: 0.65rem;
  }
  
  .clip-product-price-mini {
    font-size: 0.7rem;
  }
}

/* Pantallas móviles pequeñas - CRÍTICO: 3 filas visibles (9 clips) */
@media (max-width: 480px) {
  .clips-feed-grid-container {
    padding: 8px 6px;
    padding-bottom: calc(80px + 8px);
  }
  
  .clips-grid-3col {
    gap: 6px;
  }
  
  /* CRÍTICO: Altura calculada para que entren 3 filas completas en viewport móvil */
  .clip-thumbnail-card {
    aspect-ratio: 9/14; /* Más compacto en móvil */
  }
  
  .clip-info-bottom {
    padding: 6px;
  }
  
  .clip-product-title-mini {
    font-size: 0.6rem;
  }
  
  .clip-product-price-mini {
    font-size: 0.65rem;
  }
  
  .shorts-nav {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
  
  .shorts-nav-prev {
    left: 8px;
  }
  
  .shorts-nav-next {
    right: 8px;
  }
  
  .shorts-product-info-row {
    bottom: 70px;
    padding: 10px 12px;
  }
  
  .shorts-product-title {
    font-size: 0.85rem;
  }
  
  .shorts-product-price {
    font-size: 1rem;
  }
  
  .shorts-btn,
  .shorts-navbar-btn {
    width: 44px;
    height: 44px;
  }
  
  .shorts-buy-btn {
    padding: 0 16px !important;
  }
  
  .shorts-buy-text {
    font-size: 0.85rem;
  }
}

/* iOS safe areas */
@supports (padding: max(0px)) {
  .clips-feed-grid-container {
    padding-bottom: max(calc(80px + 12px), calc(80px + env(safe-area-inset-bottom)));
  }
  
  .shorts-bottom-navbar-container {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}
/* ===== GRILLA DE CLIPS ===== */
.inline-clips-section {
  padding: 32px 20px;
  background: white;
  border-radius: 12px;
  margin: 1rem 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 100%;
}

.clips-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,249,250,0.9));
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
}

.clips-title-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.clips-title-section h3 {
  margin: 0;
  font-size: 1.4rem;
  font-family: 'Fredoka', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  color: #2d3748;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  letter-spacing: -0.5px;
}

.clips-icon {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
  transition: transform 0.3s ease;
  width: 48px !important;
  height: 48px !important;
}

.clips-title-section:hover .clips-icon {
  transform: scale(1.1) rotate(5deg);
}

.clips-count {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  color: #0f172a;
  padding: 0.35rem 0.75rem;
  border-radius: 16px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid rgba(59, 130, 246, 0.2);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.view-all-clips {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.view-all-clips:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

/* Contenedor horizontal de clips con scroll lateral */
.clips-horizontal-container {
  position: relative;
  padding: 0.5rem 0;
}

.clips-horizontal-scroll {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 0.5rem 0 1rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(76, 175, 80, 0.3) transparent;
}

.clips-horizontal-scroll::-webkit-scrollbar {
  height: 6px;
}

.clips-horizontal-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.clips-horizontal-scroll::-webkit-scrollbar-thumb {
  background: rgba(76, 175, 80, 0.6);
  border-radius: 3px;
  transition: background 0.3s ease;
}

.clips-horizontal-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(76, 175, 80, 0.8);
}

.clip-thumbnail-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  flex-shrink: 0;
  width: 180px;
  height: 320px;
  display: flex;
  flex-direction: column;
}

.clip-thumbnail-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.clip-thumbnail-container {
  position: relative;
  width: 100%;
  flex: 1;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clip-thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.clip-thumbnail-card:hover .clip-thumbnail-image {
  transform: scale(1.05);
}

.clip-thumbnail-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
  color: white;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}

.thumbnail-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.thumbnail-provider {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
}

.clip-thumbnail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.7) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.75rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.clip-thumbnail-card:hover .clip-thumbnail-overlay {
  opacity: 1;
}

/* Botón de play centrado */
.clip-play-btn {
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: auto;
  margin-top: auto;
  z-index: 15;
}

.clip-play-btn:hover {
  background: white;
  transform: scale(1.1);
}

.clip-overlay-icon {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Botón de favoritos en esquina superior derecha */
.clip-favorite-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,0.5);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 15;
}

.clip-favorite-btn:hover {
  background: rgba(0,0,0,0.7);
  transform: scale(1.1);
}

.clip-favorite-btn .clip-overlay-icon {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.clip-favorite-btn.active .clip-overlay-icon {
  filter: brightness(0) invert(1) hue-rotate(315deg);
}

.favorite-active {
  filter: brightness(0) invert(1) hue-rotate(315deg) !important;
}

.thumbnail-play-btn {
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-top: auto;
  margin-bottom: auto;
  transition: all 0.3s ease;
}

.clip-thumbnail-card:hover .thumbnail-play-btn {
  background: white;
  transform: scale(1.1);
}

.thumbnail-info {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.thumbnail-stats {
  display: flex;
  gap: 0.5rem;
}

.thumbnail-likes {
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
}

.clip-thumbnail-details {
  padding: 0.75rem 0.5rem;
  min-height: 60px;
  max-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: white;
  flex-shrink: 0;
}

.thumbnail-title {
  margin: 0 0 0.25rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #333;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.thumbnail-price {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #4CAF50;
  white-space: nowrap;
}

/* ===== EXPERIENCIA FULLSCREEN SHORTS ===== */
.clips-fullscreen-shorts {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #000 !important;
  z-index: 999998 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  touch-action: pan-y !important;
}

.shorts-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 430px;
  background: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.shorts-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0,0,0,0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  z-index: 1000010;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
}

.shorts-close:hover {
  background: rgba(0,0,0,0.9);
  transform: scale(1.1);
}

.shorts-indicator {
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(15px);
  margin: 0 20px 8px 20px;
  align-self: flex-start;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.shorts-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1000010;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shorts-nav:hover:not(:disabled) {
  background: rgba(0,0,0,0.9);
  transform: translateY(-50%) scale(1.1);
}

.shorts-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.shorts-nav-prev {
  left: 20px;
}

.shorts-nav-next {
  right: 20px;
}

/* Eliminado - definición duplicada movida abajo con position: absolute */

/* Overlay dinámico inteligente para detección de gestos */
.shorts-touch-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  background: transparent;
  touch-action: manipulation;
  transition: pointer-events 0.05s ease;
}

/* Estado activo: captura eventos para detectar swipes */
.shorts-touch-overlay.active {
  pointer-events: auto;
}

/* Estado inactivo: permite que eventos pasen al iframe para interacción */
.shorts-touch-overlay.inactive {
  pointer-events: none;
}

.shorts-player {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shorts-iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: #000 !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

.shorts-loading,
.shorts-error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  color: white;
  text-align: center;
  z-index: 1000000;
}

.shorts-loading .loading-spinner {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Header superior con fondo integrado profesional - MÁS ALTO */
.shorts-header-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 63px;
  background: linear-gradient(180deg, 
    rgba(0,0,0,0.95) 0%, 
    rgba(0,0,0,0.85) 40%, 
    rgba(0,0,0,0.6) 70%, 
    transparent 100%);
  backdrop-filter: blur(20px);
  z-index: 1000008;
  padding: 0;
  display: flex;
  align-items: center;
}

.shorts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  height: 63px;
  width: 100%;
}

.shorts-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: 8px;
}

.shorts-fullscreen-overlay .shorts-header-container .shorts-header .shorts-header-left .shorts-header-icon {
  width: 72px !important;
  height: 72px !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
  transition: transform 0.3s ease;
}

.shorts-header-icon:hover {
  transform: scale(1.05) rotate(3deg);
}

.shorts-header-title {
  font-family: 'Fredoka', 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  letter-spacing: -0.4px;
}

.shorts-back-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  outline: none;
}

.shorts-back-btn:hover {
  background: none;
  transform: translateY(-2px) scale(1.1);
}

.shorts-back-icon {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)) brightness(1.2);
  transition: all 0.3s ease;
}

.shorts-back-btn:hover .shorts-back-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.9)) drop-shadow(0 3px 6px rgba(0, 0, 0, 1)) brightness(1.3);
}

/* Título y precio juntos en el lado izquierdo sin fondo */
.shorts-product-info-row {
  position: absolute;
  bottom: 55px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  z-index: 1000007;
}

.shorts-product-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
  line-height: 1.3;
  color: white;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 60%;
}

.shorts-product-price {
  font-size: 20px;
  font-weight: 800;
  color: #10b981;
  margin: 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
  white-space: nowrap;
  text-align: left;
}

/*Navbar inferior con fondo completo integrado - MÁS COMPACTO */
.shorts-bottom-navbar-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, 
    rgba(0,0,0,0.95) 0%, 
    rgba(0,0,0,0.85) 60%, 
    transparent 100%);
  backdrop-filter: blur(20px);
  padding: 8px 16px 8px 16px;
  z-index: 1000008;
  height: 55px;
}

.shorts-navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 8px;
  height: 40px;
  gap: 12px;
}

.shorts-navbar-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 10px;
  padding: 6px;
  backdrop-filter: blur(15px);
  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
  min-width: 40px;
  min-height: 40px;
}

/* Botones laterales - favoritos */
.shorts-favorites-btn {
  background: rgba(255,255,255,0.15);
}

.shorts-favorites-btn:hover {
  transform: translateY(-1px) scale(1.03);
  background: rgba(255,255,255,0.25);
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}

/* Botón comentarios - completamente transparente */
.shorts-comments-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  outline: none;
  backdrop-filter: none;
  box-shadow: none;
}

.shorts-comments-btn:hover {
  background: none;
  transform: translateY(-2px) scale(1.1);
  box-shadow: none;
}

/* Botón comprar central - MÁS ANCHO Y GRANDE */
.shorts-buy-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 12px 24px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(16, 185, 121, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-direction: row;
  min-width: 180px;
  min-height: 42px;
  flex: 1;
  max-width: 220px;
}

.shorts-buy-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(16, 185, 121, 0.6);
  background: linear-gradient(135deg, #059669, #047857);
}

/* Iconos de botones */
.shorts-btn-icon {
  width: 27px;
  height: 27px;
  filter: brightness(0) invert(1);
  transition: all 0.3s ease;
}

/* Icono de comentarios con sombra especial para flotación */
.shorts-comments-btn .shorts-btn-icon {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)) brightness(1.2);
  transition: all 0.3s ease;
}

/* Botón de favoritos flotante */
.shorts-favorites-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  outline: none;
  position: relative;
  z-index: 15;
}

/* Icono de favoritos con efectos especiales */
.shorts-favorites-btn .shorts-btn-icon {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)) brightness(1.2);
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Efecto hover para favoritos */
.shorts-favorites-btn:hover .shorts-btn-icon {
  transform: scale(1.2);
  filter: drop-shadow(0 6px 12px rgba(255, 20, 147, 0.6)) drop-shadow(0 3px 6px rgba(255, 20, 147, 0.8)) brightness(1.4);
}

/* Estado activo (favorito marcado) */
.shorts-favorites-btn.active .shorts-btn-icon {
  filter: drop-shadow(0 4px 8px rgba(255, 20, 147, 0.8)) drop-shadow(0 2px 4px rgba(255, 20, 147, 0.9)) brightness(1.5) hue-rotate(315deg);
  transform: scale(1.1);
}

/* Efecto hover cuando está activo */
.shorts-favorites-btn.active:hover .shorts-btn-icon {
  transform: scale(1.3);
  filter: drop-shadow(0 6px 12px rgba(255, 20, 147, 1)) drop-shadow(0 3px 6px rgba(255, 20, 147, 1)) brightness(1.6) hue-rotate(315deg);
}

/* Animación de pulso cuando se marca como favorito */
.shorts-favorites-btn.active .shorts-btn-icon {
  animation: favoritePulse 0.6s ease-out;
}

@keyframes favoritePulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1.1);
  }
}

.shorts-comments-btn:hover .shorts-btn-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.9)) drop-shadow(0 3px 6px rgba(0, 0, 0, 1)) brightness(1.3);
}

.shorts-btn-icon-cart {
  width: 21px;
  height: 21px;
  filter: brightness(0) invert(1);
  transition: all 0.3s ease;
}

.shorts-buy-text {
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Animación de favoritos */
.favorites-animation {
  animation: favoritesPulse 0.6s ease-out;
}

@keyframes favoritesPulse {
  0% {
    transform: scale(1);
    background: rgba(255,255,255,0.15);
  }
  25% {
    transform: scale(1.2);
    background: rgba(255, 20, 147, 0.3);
  }
  50% {
    transform: scale(1.1);
    background: rgba(255, 20, 147, 0.5);
  }
  75% {
    transform: scale(1.15);
    background: rgba(255, 20, 147, 0.3);
  }
  100% {
    transform: scale(1);
    background: rgba(255,255,255,0.25);
  }
}

/* Información del producto */
.shorts-product-info {
  text-align: center;
  color: white;
  max-width: 260px;
  margin: 0 auto;
}

.shorts-product-info h3 {
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 3px 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.shorts-product-price {
  font-size: 14px;
  font-weight: 700;
  color: #10b981;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Panel de comentarios */
.shorts-comments-panel {
  position: absolute;
  right: 20px;
  bottom: 140px;
  width: 320px;
  max-height: 400px;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1000008;
  animation: slideUpFromRight 0.3s ease-out;
}

@keyframes slideUpFromRight {
  from {
    opacity: 0;
    transform: translateX(100%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

.shorts-comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.shorts-comments-header h4 {
  color: white;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.shorts-comments-close {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.shorts-comments-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.shorts-comments-content {
  max-height: 250px;
  overflow-y: auto;
  padding: 15px;
}

.shorts-comment-item {
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
}

.comment-avatar {
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.comment-text {
  flex: 1;
}

.comment-text strong {
  color: white;
  font-size: 14px;
  display: block;
  margin-bottom: 3px;
}

.comment-text p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  margin: 0;
  line-height: 1.4;
}

.shorts-comment-input {
  display: flex;
  gap: 10px;
  padding: 15px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.comment-input-field {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 10px 15px;
  color: white;
  font-size: 14px;
}

.comment-input-field::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.comment-send-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.comment-send-btn:hover {
  transform: scale(1.1);
  background: linear-gradient(135deg, #059669, #047857);
}

.shorts-swipe-hints {
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  z-index: 1000001;
  opacity: 0.7;
  pointer-events: none;
}

.swipe-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  font-size: 0.8rem;
  text-align: center;
  animation: fadeInOut 3s ease-in-out infinite;
}

.swipe-hint span:first-child {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* ===== LOADING STATES ===== */
.inline-clips-loading,
.inline-clips-empty {
  padding: 2rem;
  text-align: center;
  background: white;
  border-radius: 12px;
  margin: 1rem 0;
}

.loading-clips-container {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.5rem 0;
}

.loading-more-grid {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.clip-skeleton {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.clip-video-skeleton {
  width: 100%;
  height: 140px;
  background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
  animation: shimmer 1.5s ease-in-out infinite;
}

.clip-info-skeleton {
  padding: 0.75rem;
}

.skeleton-line {
  height: 12px;
  background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-line.short {
  width: 60%;
}

@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.empty-state {
  padding: 2rem;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}

.retry-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 1rem;
  transition: all 0.3s ease;
}

.retry-btn:hover {
  background: #45a049;
  transform: translateY(-2px);
}

.more-clips-indicator {
  flex-shrink: 0;
  width: calc(25% - 0.75rem);
  min-width: 200px;
  max-width: 250px;
}

/* Fullscreen Shorts Overlay */
.shorts-fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shorts-fullscreen-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.shorts-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 1000008;
}

.shorts-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shorts-header-icon {
  width: 24px;
  height: 24px;
}

.shorts-header-title {
  color: white;
  font-weight: 600;
  font-size: 1.1rem;
}

.shorts-back-btn {
  background: rgba(255,255,255,0.2);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.shorts-back-btn:hover {
  background: rgba(255,255,255,0.3);
}

.shorts-video-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000002;
}

.shorts-player {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100vh;
  background: #000;
}

.shorts-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.shorts-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  color: white;
  z-index: 1000;
}

.shorts-loading-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 1rem;
  animation: spin 1s linear infinite;
}

.shorts-loading-fallback {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: spin 1s linear infinite;
  display: none;
z-index: 1000001;
}

.shorts-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: white;
  font-size: 1.2rem;
}

/* Prevent body scroll when fullscreen is active */
body.fullscreen-mode {
  overflow: hidden !important;
  position: fixed !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
  left: 0 !important;
}

/* AsegURAR QUE TODOS LOS ELEMENTOS DE NAVEGACIÓN SE OCULTEN */
body.fullscreen-mode .unified-header,
body.fullscreen-mode header,
body.fullscreen-mode .mobile-bottom-navbar,
body.fullscreen-mode .search-container,
body.fullscreen-mode .navbar-top,
body.fullscreen-mode .header-navigation-slider,
body.fullscreen-mode .vendedor-navbar,
body.fullscreen-mode nav:not(.shorts-bottom-navbar),
body.fullscreen-mode .mobile-nav-container,
body.fullscreen-mode .page-header,
body.fullscreen-mode .app-header,
body.fullscreen-mode .main-header,
body.fullscreen-mode .navigation,
body.fullscreen-mode .nav-bar,
body.fullscreen-mode .bottom-nav,
body.fullscreen-mode .top-nav {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1000 !important;
  pointer-events: none !important;
}

.more-clips-card {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border: 2px dashed #4CAF50;
  border-radius: 12px;
  aspect-ratio: 9/16; /* Mismo formato que las cards de clips */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.more-clips-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(76, 175, 80, 0.2);
  border-color: #45a049;
  background: linear-gradient(135deg, #f1f8f4, #e8f5e8);
}

.more-clips-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #4CAF50;
}

.more-clips-icon {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  display: block;
}

.more-clips-text {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.loading-more-horizontal {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.clip-skeleton.horizontal {
  flex-shrink: 0;
  width: calc(25% - 0.75rem);
  min-width: 180px;
  max-width: 220px;
  aspect-ratio: 9/16;
}

.load-more-trigger {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
  .inline-clips-section {
    padding: 24px 16px;
  }

  .clips-header h3 {
    font-size: 1.3rem;
  }
}

@media (max-width: 768px) {
  .inline-clips-section {
    padding: 20px 16px;
  }

  .clips-header h3 {
    font-size: 1.2rem;
  }

  /* ✨ AUMENTAR tamaño en tablet para mejor visualización */
  .clip-thumbnail-card {
    width: 200px;
    height: 360px;
  }

  .clip-thumbnail-details {
    min-height: 60px;
    max-height: 80px;
    padding: 0.75rem 0.5rem;
  }

  .thumbnail-title {
    font-size: 0.8rem;
  }

  .thumbnail-price {
    font-size: 0.9rem;
  }

  .more-clips-indicator {
    width: 200px;
    height: 360px;
  }

  .clips-horizontal-scroll {
    gap: 0.5rem;
  }

  .shorts-nav {
    display: none;
  }

  .shorts-swipe-hints {
    right: 20px;
  }
}

@media (max-width: 480px) {
  .inline-clips-section {
    padding: 16px 12px;
  }

  .clips-header h3 {
    font-size: 1.1rem;
  }

  /* ✨ AUMENTAR significativamente en móvil - miniaturas verticales grandes */
  .clip-thumbnail-card {
    width: 165px;
    height: 300px;
  }

  .clip-thumbnail-details {
    min-height: 60px;
    max-height: 75px;
    padding: 0.65rem 0.45rem;
  }

  /* ✅ FIX: Asegurar que la imagen SIEMPRE llene el contenedor en móvil */
  .clip-thumbnail-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    min-width: 165px !important;
    min-height: 240px !important;
  }

  .clip-thumbnail-container {
    min-height: 240px !important;
  }

  .thumbnail-title {
    font-size: 0.75rem;
    font-weight: 600;
  }

  .thumbnail-price {
    font-size: 0.85rem;
    font-weight: 700;
  }

  .more-clips-indicator {
    width: 165px;
    height: 300px;
  }

  .clips-horizontal-scroll {
    gap: 0.6rem;
    padding: 0.5rem 0 1.25rem 0;
  }

  .more-clips-icon {
    font-size: 2rem;
  }

  .more-clips-text {
    font-size: 0.9rem;
  }

  .shorts-indicator {
    top: 15px;
    left: 15px;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }

  .shorts-close {
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .shorts-info-overlay {
    padding: 60px 15px 20px;
  }

  .shorts-action-btn {
    width: 48px;
    height: 48px;
  }

  .action-icon {
    font-size: 1.3rem;
  }

  .action-icon-img {
    width: 20px;
    height: 20px;
  }

  .shorts-action-buttons {
    gap: 0.5rem;
  }

  .shorts-checkout-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    min-width: 140px;
  }

  .shorts-checkout-btn .btn-icon-large {
    width: 24px;
    height: 24px;
  }
}

/* ===== REGLAS PARA FULLSCREEN ===== */
body:has(.clips-fullscreen-shorts) {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(.clips-fullscreen-shorts) .unified-header {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
}

body:has(.clips-fullscreen-shorts) .mobile-bottom-navbar {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
}

body:has(.clips-fullscreen-shorts) .search-container {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
}

body:has(.clips-fullscreen-shorts) header {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
}

body:has(.clips-fullscreen-shorts) nav {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
}/* Category Grid Layout - Diseño Sobrio y Sofisticado */

/* Ocultar navbar superior (Inicio|Categorías|Ofertas) solo en /categorias */
.categorias .header-navigation-slider {
  display: none !important;
}

/* CRÍTICO: Eliminar gradiente del body heredado de App.css */
body.categorias-page {
  background: #FAFAFA !important;
  animation: none !important;
}

body.categorias-page::before {
  display: none !important;
}

/* Eliminar gradiente gris/púrpura heredado del dashboard-main */
.dashboard-main.categorias-main {
  background: #FAFAFA !important;
}

/* Anular estilos de categories.css para el nuevo diseño */
.categorias .categorias-main,
.categorias-main {
  margin-top: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* PADDING controlado por overrides.css con variables CSS */
}

.category-grid-container {
  display: flex;
  min-height: calc(100vh - 120px - var(--bottom-nav-height)); /* Ajustado a 120px para header */
  background: #FAFAFA;
  margin: 0 !important;
  padding: 0 !important;
  /* Posicionamiento natural - confiar en overrides.css con variables CSS para spacing */
}

/* Sidebar de Categorías - Fijo e Independiente del Scroll */
.categorias .category-sidebar,
.category-sidebar {
  width: 30%;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
  padding: 0 !important;
  margin: 0 !important;
  overflow-y: auto;
  position: fixed !important; /* FIJO - no se mueve con el scroll */
  left: 0;
  top: 120px; /* Justo debajo de la barra de búsqueda */
  bottom: var(--bottom-nav-height); /* USA VARIABLE CSS responsive */
  height: auto; /* Altura automática entre top y bottom */
  display: flex;
  flex-direction: column;
  z-index: 100;
}

/* Borde vertical derecho sutil - Termina 4px antes arriba y abajo */
.category-sidebar::after {
  content: '';
  position: absolute;
  right: 0;
  top: 4px; /* 4px del borde superior */
  bottom: 4px; /* 4px del borde inferior */
  width: 2px;
  background: linear-gradient(180deg, rgba(255, 140, 0, 0.3) 0%, rgba(76, 175, 80, 0.3) 100%);
}

.category-sidebar-item {
  padding: 16px 16px !important;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  color: #424242;
  display: flex;
  align-items: center;
  position: relative;
  background: transparent;
}

/* Acento sutil con branding */
.category-sidebar-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(180deg, #FF8C00 0%, #4CAF50 100%);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-sidebar-item:hover::before {
  width: 4px;
}

.category-sidebar-item:hover {
  background: linear-gradient(90deg, rgba(255, 140, 0, 0.04), transparent);
  color: #FF8C00;
}

.category-sidebar-item.active {
  background: linear-gradient(90deg, rgba(76, 175, 80, 0.08), transparent);
  color: #4CAF50;
  font-weight: 600;
  border-left: 4px solid #4CAF50;
}

.category-sidebar-item.active::before {
  width: 0;
}

/* Divisores sutiles entre CADA categoría principal */
.category-sidebar-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, #FF8C00, #4CAF50);
  opacity: 0.4;
}

.category-sidebar-item:last-child::after {
  display: none; /* Sin divisor en el último item */
}

/* Grid Principal de Categorías - Con margen para sidebar fijo */
.category-grid-main {
  width: 70%;
  flex: 1;
  padding-top: 0; /* Sin padding - el padre .categorias-main ya tiene 190px */
  padding-bottom: 16px;
  padding-left: 40px;
  padding-right: 40px;
  margin-left: 30%; /* Margen para el sidebar fijo */
  margin-top: 0 !important; /* Sin margin arriba */
  overflow-y: auto; /* Scroll independiente */
  background: #FAFAFA;
}

.category-grid-header {
  margin-top: 0 !important; /* Sin margen arriba */
  margin-bottom: 4px !important; /* Reducido dramáticamente */
  padding-bottom: 0;
}

.category-grid-header h2 {
  font-size: 14px; /* Más discreto */
  font-weight: 400; /* Menos peso */
  color: #9E9E9E; /* Más discreto */
  margin-bottom: 2px; /* Reducido */
  letter-spacing: 0;
}

.category-grid-header p {
  color: #BDBDBD; /* Más discreto */
  font-size: 11px; /* Más pequeño */
  font-weight: 400;
  margin-bottom: 0;
}

/* Grid de Tarjetas Circulares */
.category-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 28px;
  padding: 16px 0;
  padding-bottom: calc(var(--bottom-nav-height) + 20px); /* Espacio adicional para que las últimas subcategorías no se oculten */
}

.category-circular-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.category-circular-card:hover {
  transform: translateY(-8px);
}

.category-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  border: 2px solid transparent;
}

.category-circular-card:hover .category-circle {
  box-shadow: 0 12px 28px rgba(76, 175, 80, 0.2);
  border-color: rgba(76, 175, 80, 0.4);
  transform: scale(1.08);
}

.category-circle img {
  width: 130px;
  height: 130px;
  object-fit: cover;
}

.category-card-title {
  font-size: 13px;
  font-weight: 600;
  color: #424242;
  text-align: center;
  line-height: 1.4;
  max-width: 130px;
  word-wrap: break-word;
}

/* Logo De la Feria */
.category-grid-logo {
  text-align: center;
  margin: 48px 0 24px;
  padding: 24px;
}

.category-grid-logo h3 {
  font-size: 32px;
  font-weight: 700;
  font-style: italic;
  background: linear-gradient(135deg, #4CAF50 0%, #FF8C00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  letter-spacing: -0.5px;
}

/* Responsive - Sidebar vertical en TODAS las resoluciones */
@media (max-width: 768px) {
  .category-grid-container {
    min-height: calc(100vh - var(--header-total-height) - var(--bottom-nav-height));
  }

  .category-sidebar {
    width: 35%; /* Proporción ajustada en tablet */
    top: 120px; /* Emparejado con desktop */
    bottom: var(--bottom-nav-height); /* USA VARIABLE CSS */
    height: auto; /* Altura automática entre top y bottom */
  }

  .category-sidebar-item {
    padding: 14px 12px !important;
    font-size: 13px;
  }
  
  .category-grid-main {
    width: 65%;
    padding-top: 0; /* Sin padding - el padre ya tiene 190px */
    padding-bottom: 16px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .category-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 16px;
    padding-bottom: calc(var(--bottom-nav-height) + 20px); /* Espacio adicional para que las últimas subcategorías no se oculten */
  }

  .category-circle {
    width: 90px;
    height: 90px;
  }

  .category-circle img {
    width: 90px;
    height: 90px;
    object-fit: cover;
  }

  .category-card-title {
    font-size: 11px;
    max-width: 90px;
  }

  .category-grid-header h2 {
    font-size: 13px; /* Más discreto en tablet */
  }

  .category-grid-header p {
    font-size: 10px; /* Más pequeño */
  }
}

@media (max-width: 480px) {
  .category-sidebar {
    width: 35%; /* Mantener proporción en móvil */
    top: 120px; /* Emparejado con desktop */
  }

  .category-sidebar-item {
    padding: 12px 8px !important;
    font-size: 12px;
  }
  
  .category-grid-main {
    width: 65%;
    padding-top: 0; /* Sin padding - el padre ya tiene 190px */
    padding-bottom: 16px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .category-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding-bottom: calc(var(--bottom-nav-height) + 20px); /* Espacio adicional para que las últimas subcategorías no se oculten */
  }

  .category-circle {
    width: 80px;
    height: 80px;
  }

  .category-circle img {
    width: 80px;
    height: 80px;
    object-fit: cover;
  }

  .category-card-title {
    font-size: 10px;
    max-width: 80px;
  }

  .category-grid-header h2 {
    font-size: 12px; /* Ultra discreto en móvil */
  }
}
.rec-card {
  flex: 0 0 90px;
  width: 90px;
  height: 220px;
  
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

.rec-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(44, 95, 45, 0.15);
  border-color: #2C5F2D;
}

.rec-card:active {
  transform: translateY(-2px);
}

.rec-offer-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  background: linear-gradient(135deg, #FF6B35, #FF8C00);
  color: white;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(255, 107, 53, 0.4);
}

.rec-expiring-badge {
  position: absolute;
  top: 30px;
  left: 6px;
  z-index: 3;
  background: rgba(255, 193, 7, 0.95);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 10px;
}

.rec-favorite-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.rec-favorite-btn:hover {
  transform: scale(1.1);
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.rec-heart-outline {
  width: 16px;
  height: 16px;
  color: #64748b;
}

.rec-favorite-btn:hover .rec-heart-outline {
  color: #ef4444;
}

.rec-heart-filled {
  width: 16px;
  height: 16px;
  color: #ef4444;
  animation: recHeartBeat 0.3s ease;
}

@keyframes recHeartBeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.rec-image {
  width: 100%;
  height: 120px;
  flex: 0 0 120px;
  background: #f8fafc;
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0;
}

.rec-image .rec-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.rec-card:hover .rec-img {
  transform: scale(1.08);
}

.rec-img-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f8fafc, #e9ecef);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #94a3b8;
}

.rec-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 4px 6px 6px 6px;
  margin: 0;
  gap: 2px;
}

.rec-category {
  font-size: 9px;
  font-weight: 600;
  color: #2C5F2D;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
  opacity: 0.7;
  margin: 0;
  padding: 0;
}

.rec-title {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
}

.rec-pricing {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: auto 0 0 0;
  padding: 0;
}

.rec-price {
  font-size: 13px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.rec-price-discount {
  color: #FF6B35;
}

.rec-price-original {
  font-size: 10px;
  color: #94a3b8;
  text-decoration: line-through;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.rec-installments {
  font-size: 9px;
  color: #2C5F2D;
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
  padding: 0;
}

.rec-installments-promo {
  font-weight: 600;
}

.rec-shipping {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 2px 0 0 0;
  padding: 0;
}

.rec-shipping img {
  width: 14px;
  height: 14px;
}

.rec-shipping span {
  font-size: 9px;
  color: #00A650;
  font-weight: 600;
  line-height: 1;
}

.rec-buy-btn {
  width: 100%;
  margin-top: auto;
  padding: 6px 4px;
  background: linear-gradient(135deg, #2C5F2D, #3a7a3c);
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: white;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(44, 95, 45, 0.25);
  position: relative;
  overflow: hidden;
}

.rec-buy-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.rec-buy-btn:hover::before {
  left: 100%;
}

.rec-buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(44, 95, 45, 0.35);
}

.rec-buy-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(44, 95, 45, 0.25);
}

.rec-buy-btn svg {
  width: 14px;
  height: 14px;
  animation: recFlash 2s ease-in-out infinite;
}

@keyframes recFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@media (max-width: 768px) {
  .rec-card {
    width: 150px;
    flex: 0 0 150px;
    height: 220px;
  }
  
  .rec-image {
    height: 120px;
    flex: 0 0 120px;
  }
  
  .rec-title {
    font-size: 12px;
  }
  
  .rec-price {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .rec-card {
    width: calc((100vw - 2rem - 16px) / 3);
    flex: 0 0 calc((100vw - 2rem - 16px) / 3);
    height: 220px;
  }
  
  .rec-image {
    height: 120px;
    flex: 0 0 120px;
  }
  
  .rec-favorite-btn {
    width: 26px;
    height: 26px;
  }
  
  .rec-heart-outline,
  .rec-heart-filled {
    width: 14px;
    height: 14px;
  }
  
  .rec-category {
    font-size: 8px;
  }
  
  .rec-title {
    font-size: 10px;
  }
  
  .rec-price {
    font-size: 12px;
  }
  
  .rec-installments {
    font-size: 8px;
  }
  
  .rec-buy-btn {
    font-size: 10px;
    padding: 5px 3px;
  }
  
  .rec-buy-btn svg {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 360px) {
  .rec-card {
    width: calc((100vw - 1.5rem - 12px) / 3);
    flex: 0 0 calc((100vw - 1.5rem - 12px) / 3);
    height: 220px;
  }
  
  .rec-image {
    height: 120px;
    flex: 0 0 120px;
  }
  
  .rec-title {
    font-size: 9px;
  }
  
  .rec-price {
    font-size: 11px;
  }
  
  .rec-buy-btn span {
    font-size: 9px;
  }
}
.rec-carousel {
  width: 100%;
  padding: 16px 0;
  background: white;
}

.rec-carousel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 6px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.rec-header-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2C5F2D, #3a7a3c);
  border-radius: 6px;
  color: white;
  font-size: 14px;
  flex-shrink: 0;
}

.rec-header-text {
  display: flex;
  align-items: center;
}

.rec-header-text h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  letter-spacing: -0.01em;
}

.rec-carousel-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

.rec-spinner {
  font-size: 24px;
  animation: recSpin 1.5s linear infinite;
}

@keyframes recSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rec-carousel-container {
  width: 100%;
  overflow: hidden;
  padding: 12px 0 12px 16px;
}

.rec-carousel-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(44, 95, 45, 0.2) transparent;
}

.rec-carousel-scroll::-webkit-scrollbar {
  height: 6px;
}

.rec-carousel-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.rec-carousel-scroll::-webkit-scrollbar-thumb {
  background: rgba(44, 95, 45, 0.2);
  border-radius: 3px;
}

.rec-carousel-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(44, 95, 45, 0.35);
}

@media (max-width: 768px) {
  .rec-carousel {
    padding: 12px 0;
  }
  
  .rec-carousel-header {
    padding: 0 12px 6px 12px;
  }
  
  .rec-header-icon {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }
  
  .rec-header-text h3 {
    font-size: 13px;
  }
  
  .rec-carousel-container {
    padding: 10px 0 10px 12px;
  }
  
  .rec-carousel-scroll {
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .rec-carousel-header {
    padding: 0 10px 5px 10px;
  }
  
  .rec-header-icon {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }
  
  .rec-header-text h3 {
    font-size: 12px;
  }
  
  .rec-carousel-container {
    padding: 8px 0 8px 10px;
  }
  
  .rec-carousel-scroll {
    gap: 8px;
  }
}
.product-card-skeleton {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.skeleton-image {
  width: 100%;
  height: 220px;
  background: linear-gradient(
    90deg,
    #f0f0f0 0%,
    #e0e0e0 20%,
    #f0f0f0 40%,
    #f0f0f0 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.skeleton-title,
.skeleton-price,
.skeleton-button {
  background: linear-gradient(
    90deg,
    #f0f0f0 0%,
    #e0e0e0 20%,
    #f0f0f0 40%,
    #f0f0f0 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

.skeleton-title {
  height: 20px;
  width: 100%;
}

.skeleton-title.short {
  width: 60%;
}

.skeleton-price {
  height: 24px;
  width: 40%;
  margin-top: auto;
}

.skeleton-button {
  height: 40px;
  width: 100%;
  border-radius: 8px;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@media (max-width: 768px) {
  .skeleton-image {
    height: 180px;
  }
  
  .skeleton-content {
    padding: 12px;
    gap: 10px;
  }
}
/* Global Footer - Navegación Legal */

.global-footer {
  background: transparent;
  color: #666;
  margin-top: 1rem;
  padding: 1rem 0 0.5rem;
  
  /* Importante: Espacio para evitar conflicto con MobileBottomNavbar */
  margin-bottom: 85px; /* Espacio para navegación móvil - 5px más abajo */
  position: relative;
  z-index: 50; /* Reducido de 100 a 50 para estar debajo del navbar móvil (z-index: 100) */
}

/* Estilos para footer mínimo sin fondo */
.global-footer--minimal {
  background: transparent !important;
  border: none;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
}

/* Estilos para la información básica */
.footer-basic-info {
  flex: 1;
}

.company-basic {
  margin: 0;
  font-size: 0.85rem;
  color: #666;
  font-weight: 400;
}

/* Enlaces legales mínimos */
.footer-legal-minimal {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.footer-link-minimal {
  color: #666;
  text-decoration: underline;
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.footer-link-minimal:hover {
  color: var(--primary-green);
}

.footer-section {
  min-width: 0; /* Prevenir overflow en grid */
}

.footer-title {
  color: var(--naranja-principal);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--naranja-principal);
  display: inline-block;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin: 0.5rem 0;
}

.footer-link {
  color: var(--blanco);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  position: relative;
}

.footer-link:hover,
.footer-link:focus {
  color: var(--naranja-principal);
  transform: translateX(5px);
  outline: none;
}

.footer-link:focus {
  box-shadow: 0 0 0 2px var(--naranja-principal);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
}

.link-icon {
  font-size: 1rem;
  min-width: 1.2rem;
  text-align: center;
}

.link-text {
  font-weight: 500;
}

/* Información de empresa */
.footer-info {
  font-size: 0.9rem;
  line-height: 1.5;
}

.company-info,
.contact-info {
  margin: 1rem 0;
  color: var(--gris-claro);
}

.company-info strong {
  color: var(--naranja-principal);
  font-weight: 600;
}

/* Enlaces de cumplimiento legal */
.compliance-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.compliance-link,
.compliance-button {
  font-size: 0.9rem;
  font-weight: 500;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.compliance-button:hover,
.compliance-button:focus {
  color: var(--naranja-principal);
  transform: translateX(5px);
  outline: none;
}

.compliance-button:focus {
  box-shadow: 0 0 0 2px var(--naranja-principal);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
}

/* Bottom section */
.footer-bottom {
  border-top: 1px solid var(--gris-medio);
  padding-top: 1.5rem;
  text-align: center;
}

.copyright {
  margin-bottom: 1rem;
}

.copyright p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--gris-claro);
  font-weight: 500;
}

.compliance {
  margin-top: 1rem;
}

.compliance-text {
  font-size: 0.8rem;
  color: var(--gris-claro);
  margin: 0;
  line-height: 1.4;
}

.compliance-text strong {
  color: var(--naranja-principal);
  font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
  .global-footer {
    padding: 0.5rem 0;
    margin-bottom: 90px; /* Más espacio en móvil para navegación */
  }
  
  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  
  .footer-legal-minimal {
    justify-content: center;
  }
  
  .footer-container {
    padding: 0 1rem;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .footer-section {
    text-align: left;
  }
  
  .footer-title {
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }
  
  .footer-link {
    font-size: 0.85rem;
    padding: 0.3rem 0;
  }
  
  .link-icon {
    font-size: 0.9rem;
    min-width: 1rem;
  }
  
  .social-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  
  .footer-info {
    font-size: 0.85rem;
  }
  
  .compliance-text {
    font-size: 0.75rem;
    text-align: left;
    padding: 0 1rem;
  }
}

@media (max-width: 480px) {
  .global-footer {
    margin-bottom: 110px; /* Aún más espacio en pantallas muy pequeñas */
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .footer-link:hover,
  .footer-link:focus {
    transform: translateX(2px); /* Movimiento más sutil en móvil */
  }
  
  .social-links {
    grid-template-columns: 1fr;
  }
  
  .compliance-text {
    font-size: 0.7rem;
    padding: 0 0.5rem;
  }
}

/* Accesibilidad mejorada */
@media (prefers-reduced-motion: reduce) {
  .footer-link,
  .footer-link:hover,
  .footer-link:focus {
    transition: none;
    transform: none;
  }
}

/* Contraste alto */
@media (prefers-contrast: high) {
  .global-footer {
    background: var(--negro);
    border-top: 2px solid var(--blanco);
  }
  
  .footer-link {
    color: var(--blanco);
    border: 1px solid transparent;
  }
  
  .footer-link:focus {
    border-color: var(--naranja-principal);
    background: rgba(255, 107, 53, 0.1);
  }
}

/* Dark mode support (futuro) */
@media (prefers-color-scheme: dark) {
  .global-footer {
    background: linear-gradient(135deg, #1a1a1a, #000000);
  }
}/* Aviso de legales discreto - sin fondo propio, se integra al diseño de cada página */
.legal-notice-bar {
  position: fixed;
  bottom: 5px;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 8px 20px;
  background: rgba(240, 240, 240, 0.98) !important;
  animation: slideUp 0.3s ease-out;
}

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

.legal-notice-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.legal-notice-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #000 !important;
  opacity: 1;
  flex: 1;
  min-width: 200px;
  font-weight: 700 !important;
}

.legal-notice-link {
  color: var(--primary-green);
  text-decoration: underline;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.legal-notice-link:hover {
  opacity: 0.8;
  text-decoration: none;
}

.legal-notice-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.legal-notice-btn {
  /* ✅ WCAG 2.2 AA: Touch target mínimo 48×48px */
  min-height: 48px;
  min-width: 48px;
  padding: 12px 20px;
  border: 2px solid #000 !important;
  background: rgba(255, 255, 255, 1) !important;
  color: #000 !important;
  font-size: 13px;
  font-weight: 700 !important;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.legal-notice-btn--accept {
  background: var(--primary-green);
  color: #ffffff;
  border-color: var(--primary-green);
}

.legal-notice-btn--accept:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.legal-notice-btn--decline:hover {
  background: #f5f5f5;
  color: #666;
  border-color: #ccc;
}

/* Responsive */
@media (max-width: 768px) {
  .legal-notice-bar {
    padding: 10px 16px;
  }
  
  .legal-notice-content {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 8px;
  }
  
  .legal-notice-text {
    font-size: 13px;
    margin-bottom: 4px;
  }
  
  .legal-notice-actions {
    justify-content: center;
  }
  
  .legal-notice-btn {
    /* ✅ WCAG 2.2 AA: Mantener 48×48px en mobile */
    min-height: 48px;
    min-width: 48px;
    padding: 12px 16px;
    font-size: 13px;
    flex: 1;
    max-width: 140px;
  }
}

/* Sin fondos personalizados - diseño completamente transparente y sobrio *//* Universal Chatbot - De la Feria */
/* Chatbot flotante universal para toda la aplicación */

/* Botón flotante */
.chatbot-toggle-btn {
  position: fixed;
  bottom: 90px;
  right: 20px;
  z-index: 1000;
  background: linear-gradient(135deg, var(--delaferia-blue), var(--accent-blue));
  color: white;
  border: none;
  border-radius: 50px;
  padding: 0.6rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  font-weight: 500;
  box-shadow: var(--shadow-medium);
  transition: var(--transition-normal);
  animation: chatbotPulse 2s ease-in-out infinite;
}

.chatbot-toggle-btn:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-heavy);
  animation: none;
}

.chatbot-btn-text {
  font-size: 0.85rem;
  font-weight: 600;
}

@keyframes chatbotPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: var(--shadow-medium);
  }
  50% { 
    transform: scale(1.02);
    box-shadow: var(--shadow-heavy);
  }
}

/* Widget principal */
.chatbot-widget {
  position: fixed;
  bottom: 90px;
  right: 20px;
  z-index: 1001;
  width: 380px;
  height: 500px;
  animation: chatbotSlideIn 0.3s ease-out;
}

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

.chatbot-container {
  background: white;
  border-radius: 16px;
  box-shadow: var(--shadow-heavy);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--border-light);
}

/* Header */
.chatbot-header {
  background: linear-gradient(135deg, var(--delaferia-blue), var(--delaferia-light-blue));
  color: white;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chatbot-header-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.chatbot-avatar {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.chatbot-header-info h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.chatbot-header-info p {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.9;
}

.chatbot-close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: var(--transition-fast);
}

.chatbot-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

/* Messages */
.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  background: var(--gray-200);
}

.messages-container {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.message-item {
  display: flex;
}

.message-item.user-message {
  justify-content: flex-end;
}

.message-item.bot-message {
  justify-content: flex-start;
}

.message-bubble {
  max-width: 80%;
  padding: 0.75rem 1rem;
  border-radius: 16px;
  position: relative;
  word-wrap: break-word;
}

.user-message .message-bubble {
  background: var(--delaferia-blue);
  color: white;
  border-bottom-right-radius: 4px;
}

.bot-message .message-bubble {
  background: white;
  color: var(--gray-600);
  border: 1px solid var(--border-light);
  border-bottom-left-radius: 4px;
}

.message-text {
  margin: 0;
  line-height: 1.4;
  font-size: 0.9rem;
}

.message-timestamp {
  display: block;
  font-size: 0.7rem;
  opacity: 0.7;
  margin-top: 0.25rem;
}

.user-message .message-timestamp {
  text-align: right;
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: white !important;
  border: 1px solid var(--border-light) !important;
}

.typing-dots {
  display: flex;
  gap: 0.2rem;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  background: var(--gray-400);
  border-radius: 50%;
  animation: typingBounce 1.4s ease-in-out infinite both;
}

.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typingBounce {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.typing-text {
  font-size: 0.8rem;
  color: var(--gray-500);
  font-style: italic;
}

/* Quick Replies */
.chatbot-quick-replies {
  padding: 1rem;
  background: white;
  border-top: 1px solid var(--border-light);
}

.quick-replies-title {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin: 0 0 0.75rem 0;
  font-weight: 500;
}

.quick-replies-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.quick-reply-btn {
  background: var(--gray-100);
  border: 1px solid var(--border-light);
  color: var(--gray-600);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-medium);
  cursor: pointer;
  font-size: 0.8rem;
  text-align: left;
  transition: var(--transition-fast);
}

.quick-reply-btn:hover {
  background: var(--delaferia-light-blue);
  border-color: var(--delaferia-blue);
  color: var(--delaferia-blue);
}

/* Input Area */
.chatbot-input-area {
  background: white;
  border-top: 1px solid var(--border-light);
  padding: 1rem;
}

.chatbot-input-container {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.chatbot-input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-medium);
  resize: none;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
  max-height: 80px;
  transition: var(--transition-fast);
}

.chatbot-input:focus {
  outline: none;
  border-color: var(--delaferia-blue);
  box-shadow: 0 0 0 3px rgba(52, 131, 250, 0.1);
}

.chatbot-input:disabled {
  background: var(--gray-200);
  cursor: not-allowed;
}

.chatbot-send-btn {
  background: var(--delaferia-blue);
  color: white;
  border: none;
  padding: 0.75rem;
  border-radius: var(--radius-medium);
  cursor: pointer;
  font-size: 1.1rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.chatbot-send-btn:hover:not(:disabled) {
  background: var(--secondary-blue);
  transform: scale(1.05);
}

.chatbot-send-btn:disabled {
  background: var(--gray-400);
  cursor: not-allowed;
  transform: none;
}

.chatbot-send-btn.loading {
  pointer-events: none;
}

.send-btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Responsive Design */
@media (max-width: 768px) {
  .chatbot-widget {
    bottom: 80px;
    right: 10px;
    left: 10px;
    width: auto;
    height: 70vh;
    max-height: 500px;
  }
  
  .chatbot-toggle-btn {
    bottom: 80px;
    right: 15px;
    padding: 0.55rem 0.95rem;
    font-size: 0.95rem;
  }
  
  .chatbot-btn-text {
    display: none;
  }
  
  .messages-container {
    padding: 0.75rem;
  }
  
  .message-bubble {
    max-width: 90%;
  }
  
  .quick-replies-container {
    max-height: 120px;
    overflow-y: auto;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .chatbot-toggle-btn {
    animation: none;
  }
  
  .chatbot-widget {
    animation: none;
  }
  
  .typing-dots span {
    animation: none;
  }
  
  .send-btn-spinner {
    animation: none;
  }
}

/* Focus management */
.chatbot-input:focus-visible,
.chatbot-send-btn:focus-visible,
.quick-reply-btn:focus-visible {
  outline: 2px solid var(--delaferia-blue);
  outline-offset: 2px;
}

/* Scrollbar styling */
.chatbot-messages::-webkit-scrollbar {
  width: 6px;
}

.chatbot-messages::-webkit-scrollbar-track {
  background: var(--gray-200);
}

.chatbot-messages::-webkit-scrollbar-thumb {
  background: var(--gray-400);
  border-radius: 3px;
}

.chatbot-messages::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500);
}