@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Orbitron:wght@700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Orbitron:wght@700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap);
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* src/components/LoadingScreen.css */
/* PREFIJO: ls- (Loading Screen) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --ls-bg-primary: #0a0a0a;
  --ls-gold: #d4af37;
  --ls-gold-light: #f0d574;
  --ls-text-primary: #e9ecef;
  --ls-text-secondary: #b7bcc4;
}

/* ============================================ */
/* CONTAINER PRINCIPAL */
/* ============================================ */
.ls-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
}

/* ============================================ */
/* FONDO ANIMADO */
/* ============================================ */
.ls-bg-animated {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0.15;
  z-index: 1;
}

.ls-bg-animated::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, #d4af37 1px, transparent 1px);
  background: radial-gradient(circle, var(--ls-gold) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: ls-bg-move 20s linear infinite;
}

@keyframes ls-bg-move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}

/* ============================================ */
/* CONTENIDO PRINCIPAL */
/* ============================================ */
.ls-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 0 20px;
}

/* ============================================ */
/* LOGO SECTION */
/* ============================================ */
.ls-logo-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Círculo exterior giratorio */
.ls-circle-outer {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top-color: #d4af37;
  border-top-color: var(--ls-gold);
  border-right-color: #d4af37;
  border-right-color: var(--ls-gold);
  border-radius: 50%;
  animation: ls-rotate 2s linear infinite;
}

/* Círculo medio */
.ls-circle-middle {
  position: absolute;
  width: 85%;
  height: 85%;
  border: 2px solid transparent;
  border-bottom-color: #f0d574;
  border-bottom-color: var(--ls-gold-light);
  border-left-color: #f0d574;
  border-left-color: var(--ls-gold-light);
  border-radius: 50%;
  animation: ls-rotate-reverse 1.5s linear infinite;
}

/* Círculo interior */
.ls-circle-inner {
  position: absolute;
  width: 70%;
  height: 70%;
  border: 2px solid transparent;
  border-top-color: #d4af37;
  border-top-color: var(--ls-gold);
  border-radius: 50%;
  animation: ls-rotate 1s linear infinite;
}

@keyframes ls-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes ls-rotate-reverse {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* Logo del carrito */
.ls-logo-icon {
  position: relative;
  z-index: 2;
  width: 80px;
  height: 80px;
  color: #d4af37;
  color: var(--ls-gold);
  animation: ls-pulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6));
}

@keyframes ls-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* ============================================ */
/* TEXTO Y BRAND */
/* ============================================ */
.ls-brand-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ls-brand-name {
  font-size: 48px;
  font-weight: 900;
  font-family: 'Orbitron', monospace;
  letter-spacing: 4px;
  margin: 0;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--ls-gold), var(--ls-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ls-glow 2s ease-in-out infinite;
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
}

@keyframes ls-glow {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 10px rgba(212, 175, 55, 0.4));
  }
  50% {
    filter: brightness(1.2) drop-shadow(0 0 20px rgba(212, 175, 55, 0.8));
  }
}

.ls-brand-tagline {
  font-size: 14px;
  font-weight: 500;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 2px;
  color: #b7bcc4;
  color: var(--ls-text-secondary);
  margin: 0;
  text-transform: uppercase;
  animation: ls-fade-in-out 2s ease-in-out infinite;
}

@keyframes ls-fade-in-out {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* ============================================ */
/* LOADING BAR */
/* ============================================ */
.ls-loading-bar-container {
  width: 300px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.ls-loading-bar {
  height: 100%;
  background: linear-gradient(90deg, 
    #d4af37 0%, 
    #f0d574 50%, 
    #d4af37 100%
  );
  background: linear-gradient(90deg, 
    var(--ls-gold) 0%, 
    var(--ls-gold-light) 50%, 
    var(--ls-gold) 100%
  );
  background-size: 200% 100%;
  border-radius: 10px;
  animation: ls-loading-bar-move 1.5s ease-in-out infinite;
  box-shadow: 0 0 10px #d4af37;
  box-shadow: 0 0 10px var(--ls-gold);
}

@keyframes ls-loading-bar-move {
  0% {
    transform: translateX(-100%);
    background-position: 0% 50%;
  }
  100% {
    transform: translateX(100%);
    background-position: 200% 50%;
  }
}

/* ============================================ */
/* LOADING TEXT */
/* ============================================ */
.ls-loading-text {
  font-size: 16px;
  font-weight: 500;
  font-family: 'Rajdhani', sans-serif;
  color: #e9ecef;
  color: var(--ls-text-primary);
  margin: 0;
}

.ls-loading-text::after {
  content: '';
  animation: ls-dots-animation 1.5s steps(4, end) infinite;
}

@keyframes ls-dots-animation {
  0%, 20% {
    content: '';
  }
  40% {
    content: '.';
  }
  60% {
    content: '..';
  }
  80%, 100% {
    content: '...';
  }
}

/* ============================================ */
/* PARTÍCULAS FLOTANTES */
/* ============================================ */
.ls-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.ls-particle {
  position: absolute;
  background-color: #d4af37;
  background-color: var(--ls-gold);
  border-radius: 50%;
  opacity: 0.3;
  animation: ls-float 3s ease-in-out infinite;
}

.ls-particle:nth-child(1) {
  width: 4px;
  height: 4px;
  top: 20%;
  left: 20%;
  animation-delay: 0s;
  animation-duration: 3s;
}

.ls-particle:nth-child(2) {
  width: 6px;
  height: 6px;
  top: 40%;
  left: 80%;
  animation-delay: 0.5s;
  animation-duration: 4s;
}

.ls-particle:nth-child(3) {
  width: 3px;
  height: 3px;
  top: 60%;
  left: 30%;
  animation-delay: 1s;
  animation-duration: 3.5s;
}

.ls-particle:nth-child(4) {
  width: 5px;
  height: 5px;
  top: 80%;
  left: 70%;
  animation-delay: 1.5s;
  animation-duration: 4.5s;
}

.ls-particle:nth-child(5) {
  width: 4px;
  height: 4px;
  top: 30%;
  left: 50%;
  animation-delay: 2s;
  animation-duration: 3.8s;
}

@keyframes ls-float {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-20px) translateX(10px);
  }
  50% {
    transform: translateY(-40px) translateX(-10px);
  }
  75% {
    transform: translateY(-20px) translateX(10px);
  }
}

/* ============================================ */
/* RESPONSIVE - TABLET */
/* ============================================ */
@media (max-width: 1024px) {
  .ls-logo-wrapper {
    width: 180px;
    height: 180px;
  }

  .ls-logo-icon {
    width: 70px;
    height: 70px;
  }

  .ls-brand-name {
    font-size: 42px;
  }

  .ls-loading-bar-container {
    width: 250px;
  }
}

/* ============================================ */
/* RESPONSIVE - MÓVIL */
/* ============================================ */
@media (max-width: 768px) {
  .ls-content {
    gap: 30px;
  }

  .ls-logo-wrapper {
    width: 150px;
    height: 150px;
  }

  .ls-logo-icon {
    width: 60px;
    height: 60px;
  }

  .ls-brand-name {
    font-size: 36px;
    letter-spacing: 3px;
  }

  .ls-brand-tagline {
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  .ls-loading-bar-container {
    width: 200px;
    height: 3px;
  }

  .ls-loading-text {
    font-size: 14px;
  }

  .ls-particle {
    opacity: 0.2;
  }
}

/* ============================================ */
/* RESPONSIVE - MÓVIL PEQUEÑO */
/* ============================================ */
@media (max-width: 480px) {
  .ls-content {
    gap: 24px;
  }

  .ls-logo-wrapper {
    width: 120px;
    height: 120px;
  }

  .ls-circle-outer {
    border-width: 2px;
  }

  .ls-logo-icon {
    width: 50px;
    height: 50px;
  }

  .ls-brand-name {
    font-size: 28px;
    letter-spacing: 2px;
  }

  .ls-brand-tagline {
    font-size: 10px;
    letter-spacing: 1px;
  }

  .ls-loading-bar-container {
    width: 160px;
  }

  .ls-loading-text {
    font-size: 13px;
  }
}

/* ============================================ */
/* ANIMACIÓN DE ENTRADA */
/* ============================================ */
.ls-container {
  animation: ls-fade-in 0.5s ease-out;
}

@keyframes ls-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================ */
/* ACCESIBILIDAD */
/* ============================================ */
@media (prefers-reduced-motion: reduce) {
  .ls-circle-outer,
  .ls-circle-middle,
  .ls-circle-inner,
  .ls-logo-icon,
  .ls-brand-name,
  .ls-brand-tagline,
  .ls-loading-bar,
  .ls-particle,
  .ls-bg-animated::before {
    animation: none;
  }

  .ls-loading-bar {
    transform: translateX(0);
    width: 50%;
  }
}
/* Logo real de Noodle Store */
.ls-logo-image-container {
  position: relative;
  z-index: 2;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  padding: 10px;
  animation: ls-pulse 2s ease-in-out infinite;
}

.ls-logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6));
}

/* Responsive para la imagen */
@media (max-width: 768px) {
  .ls-logo-image-container {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 480px) {
  .ls-logo-image-container {
    width: 60px;
    height: 60px;
  }
}
/* ===========================
   NOODLE LANDING - PC/DESKTOP
   =========================== */

:root {
  --bg: #0a0a0a;
  --text: #e9ecef;
  --muted: #b7bcc4;
  --stroke: rgba(255, 255, 255, 0.12);
  --red: #e50914;
  --red-2: #ff1a25;
  --gold: #d4af37;
  --gold-2: #f0d574;
}

.noodle-landing {
  min-height: 100vh;
  background: #0a0a0a;
  background: var(--bg);
  color: #e9ecef;
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  overflow-x: hidden;
}

/* ============================================ */
/* NAVBAR */
/* ============================================ */
.noodle-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(10, 10, 10, 0.95);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--stroke);
}

.noodle-navbar-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.noodle-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.noodle-logo:hover {
  transform: scale(1.05);
}

.noodle-logo-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #d4af37;
  border: 2px solid var(--gold);
  animation: noodle-logo-glow 3s ease-in-out infinite;
}

@keyframes noodle-logo-glow {
  0%, 100% {
    box-shadow: 0 0 10px #d4af37;
    box-shadow: 0 0 10px var(--gold);
  }
  50% {
    box-shadow: 0 0 25px #d4af37, 0 0 40px #f0d574;
    box-shadow: 0 0 25px var(--gold), 0 0 40px var(--gold-2);
  }
}

.noodle-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.noodle-logo-text {
  font-family: 'Orbitron', monospace;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(
    90deg,
    #e9ecef 40%,
    #d4af37 50%,
    #e9ecef 60%
  );
  background: linear-gradient(
    90deg,
    var(--text) 40%,
    var(--gold) 50%,
    var(--text) 60%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: noodle-logo-shine 4s ease-in-out infinite;
}

@keyframes noodle-logo-shine {
  0%, 100% {
    background-position: 200% center;
  }
  50% {
    background-position: -100% center;
  }
}

.noodle-nav-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1;
  justify-content: center;
}

.noodle-nav-link {
  position: relative;
  display: block;
  padding: 12px 24px;
  color: #e9ecef;
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 10px;
  transition: all 0.3s ease;
  overflow: hidden;
}

.noodle-nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
  transition: left 0.6s ease;
}

.noodle-nav-link:hover::before {
  left: 100%;
}

.noodle-nav-link:hover,
.noodle-nav-link.active {
  color: #d4af37;
  color: var(--gold);
  background: rgba(212, 175, 55, 0.1);
}

.noodle-btn-ingresar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #e50914, #ff1a25);
  background: linear-gradient(135deg, var(--red), var(--red-2));
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.noodle-btn-ingresar::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.noodle-btn-ingresar:hover::before {
  width: 300px;
  height: 300px;
}

.noodle-btn-ingresar:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(229, 9, 20, 0.4);
}

.noodle-user-icon {
  position: relative;
  z-index: 1;
}

.noodle-menu-toggle {
  display: none;
}

.noodle-mobile-menu {
  display: none;
}

/* ============================================ */
/* HERO - MÁS CHATO Y SIN SOBREPASAR BORDES */
/* ============================================ */
.noodle-hero {
  position: relative;
  height: 420px; /* MÁS CHATO */
  width: 100%;
  overflow: hidden;
  margin-top: 100px;
  padding: 0 80px; /* PADDING LATERAL PARA NO SOBREPASAR */
  margin-bottom: 20px; /* MÁS PEGADO A LA CINTA */
}

.noodle-hero-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  max-width: 100%; /* NO SOBREPASA */
}

.noodle-slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.noodle-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.noodle-slide.active {
  opacity: 1;
}

.noodle-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to right,
    rgba(10, 10, 10, 0.85) 0%,
    rgba(10, 10, 10, 0.5) 40%,
    transparent 70%
  );
  z-index: 2;
}

.noodle-hero-content {
  position: relative;
  z-index: 10;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.noodle-hero-subtitle {
  font-size: 22px;
  font-weight: 400;
  color: white;
  letter-spacing: 1px;
  margin: 0;
  animation: noodle-fade-in 1s ease;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.9);
}

.noodle-hero-title {
  font-family: 'Orbitron', monospace;
  font-size: 64px; /* MÁS PEQUEÑO PARA EL HERO CHATO */
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 3px;
  margin: 0;
  text-transform: uppercase;
  color: white;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.9);
  animation: noodle-slide-up 1.2s ease;
}

@keyframes noodle-fade-in {
  from { 
    opacity: 0;
    transform: translateX(-30px);
  }
  to { 
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes noodle-slide-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.noodle-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  background: black;
  border: none;
  border-radius: 50px;
  color: white;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: flex-start;
  margin-top: 15px;
  animation: noodle-fade-in 1.4s ease;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

.noodle-hero-btn::before {
  content: "✓";
  font-size: 18px;
}

.noodle-hero-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.noodle-carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: rgba(10, 10, 10, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--stroke);
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.noodle-carousel-control:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: white;
  transform: translateY(-50%) scale(1.15);
}

.noodle-carousel-control.prev {
  left: 30px;
}

.noodle-carousel-control.next {
  right: 30px;
}

.noodle-carousel-dots {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 12px;
}

.noodle-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.noodle-dot:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: scale(1.3);
}

.noodle-dot.active {
  background: white;
  border-color: #d4af37;
  border-color: var(--gold);
  transform: scale(1.4);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
}

/* ============================================ */
/* CINTA - RÁPIDA, SIN PARPADEO, LOGOS PEQUEÑOS */
/* ============================================ */
.noodle-brands {
  width: 100%;
  background: #0a0a0a;
  background: var(--bg);
  padding: 15px 0; /* MÁS PEQUEÑA */
  margin: 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--stroke);
  position: relative;
}

.noodle-brands-track {
  display: flex;
  align-items: center;
  gap: 0;
  animation: noodle-scroll-ultra-fast 15s linear infinite; /* MÁS RÁPIDO */
  will-change: transform;
}

@keyframes noodle-scroll-ultra-fast {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-33.333%); /* AJUSTADO PARA 3 COPIAS */
  }
}

.noodle-brand-item {
  flex-shrink: 0;
  width: 140px; /* LOGOS MÁS PEQUEÑOS */
  height: 70px; /* MÁS BAJO */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  filter: grayscale(100%) brightness(0.4);
  opacity: 0.5;
  transition: filter 0.4s ease, opacity 0.4s ease; /* SOLO CAMBIA COLOR */
  cursor: default; /* SIN POINTER */
}

/* HOVER SOLO CAMBIA COLOR - SIN ESCALA NI NADA */
.noodle-brand-item:hover {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
  /* SIN transform: scale() */
}

.noodle-brand-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none; /* NO CLICKEABLE */
}

/* src/pages/public/Login.css */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --login-bg: #0a0a0a;
  --login-card-bg: rgba(10, 10, 10, 0.95);
  --login-gold: #d4af37;
  --login-gold-light: #f0d574;
  --login-red: #e50914;
  --login-red-light: #ff1a25;
  --login-text: #e9ecef;
  --login-muted: #b7bcc4;
  --login-stroke: rgba(255, 255, 255, 0.12);
  --login-whatsapp: #25d366;
}

/* ============================================ */
/* CONTAINER */
/* ============================================ */
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-image: url('https://noodlestore.net/wp-content/uploads/2025/06/WhatsApp-Image-2025-06-10-at-2.29.00-PM-800x800.webp');
  background-size: cover;
  background-position: center;
  background-color: rgba(10, 10, 10, 0.85);
  background-blend-mode: darken;
  padding: 20px;
  position: relative;
}

/* ============================================ */
/* CARD */
/* ============================================ */
.login-card {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--login-card-bg);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  padding: 40px;
  width: 100%;
  max-width: 450px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--login-stroke);
  animation: fadeIn 0.5s ease-out;
}

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

/* ============================================ */
/* HEADER */
/* ============================================ */
.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  margin-bottom: 16px;
}

.login-logo-image {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid #d4af37;
  border: 2px solid var(--login-gold);
  transition: transform 0.3s ease;
}

.login-logo-image:hover {
  transform: scale(1.05);
}

.login-logo-text {
  font-family: 'Orbitron', monospace;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--login-gold), var(--login-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-title {
  font-size: 28px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--login-text);
  margin: 0 0 8px 0;
  font-family: 'Rajdhani', sans-serif;
}

.login-subtitle {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--login-muted);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* FORM */
/* ============================================ */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-error-box {
  background-color: rgba(229, 9, 20, 0.1);
  border: 1px solid #e50914;
  border: 1px solid var(--login-red);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e50914;
  color: var(--login-red);
  font-size: 14px;
  animation: shake 0.5s ease-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

.login-error-icon {
  font-size: 18px;
}

.login-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-label {
  font-size: 14px;
  font-weight: 600;
  color: #e9ecef;
  color: var(--login-text);
  font-family: 'Rajdhani', sans-serif;
}

.login-input {
  padding: 12px 16px;
  font-size: 16px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border: 2px solid var(--login-stroke);
  border-radius: 8px;
  outline: none;
  transition: all 0.3s ease;
  background-color: #0a0a0a;
  background-color: var(--login-bg);
  color: #e9ecef;
  color: var(--login-text);
  font-family: 'Rajdhani', sans-serif;
}

.login-input:focus {
  border-color: #d4af37;
  border-color: var(--login-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.login-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Password con ojito */
.login-password-wrapper {
  position: relative;
}

.login-password-wrapper .login-input {
  padding-right: 48px;
}

.login-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #b7bcc4;
  color: var(--login-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.login-password-toggle:hover {
  color: #d4af37;
  color: var(--login-gold);
}

/* ============================================ */
/* FORGOT PASSWORD */
/* ============================================ */
.login-forgot-password {
  text-align: right;
  margin-top: -8px;
}

.login-forgot-link {
  background: none;
  border: none;
  color: #d4af37;
  color: var(--login-gold);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Rajdhani', sans-serif;
  transition: color 0.3s ease;
}

.login-forgot-link:hover {
  color: #f0d574;
  color: var(--login-gold-light);
  text-decoration: underline;
}

/* ============================================ */
/* BUTTON */
/* ============================================ */
.login-button {
  background: linear-gradient(135deg, #e50914, #ff1a25);
  background: linear-gradient(135deg, var(--login-red), var(--login-red-light));
  color: white;
  border: none;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 8px;
  font-family: 'Rajdhani', sans-serif;
}

.login-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(229, 9, 20, 0.4);
}

.login-button:active:not(:disabled) {
  transform: translateY(0);
}

.login-button-disabled {
  background: #b7bcc4;
  background: var(--login-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ============================================ */
/* FOOTER */
/* ============================================ */
.login-footer {
  margin-top: 24px;
  text-align: center;
}

.login-footer-text {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--login-muted);
  margin: 8px 0;
  font-family: 'Rajdhani', sans-serif;
}

.login-link {
  color: #d4af37;
  color: var(--login-gold);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.login-link:hover {
  color: #f0d574;
  color: var(--login-gold-light);
  text-decoration: underline;
}

/* ============================================ */
/* WHATSAPP FLOAT BUTTON */
/* ============================================ */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  background-color: var(--login-whatsapp);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s ease;
  animation: pulse 2s ease-in-out infinite;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  }
  50% {
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
  }
}

/* ============================================ */
/* MODAL */
/* ============================================ */
.login-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
  animation: fadeIn 0.3s ease-out;
}

.login-modal {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--login-card-bg);
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  max-width: 450px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--login-stroke);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  animation: slideUp 0.3s ease-out;
}

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

.login-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.login-modal-title {
  font-size: 24px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--login-text);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.login-modal-close {
  background: none;
  border: none;
  color: #b7bcc4;
  color: var(--login-muted);
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.3s ease;
}

.login-modal-close:hover {
  color: #e9ecef;
  color: var(--login-text);
}

.login-modal-description {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--login-muted);
  margin-bottom: 20px;
  line-height: 1.5;
  font-family: 'Rajdhani', sans-serif;
}

.login-modal-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.login-modal-cancel {
  flex: 1 1;
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border: 2px solid var(--login-stroke);
  color: #e9ecef;
  color: var(--login-text);
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.login-modal-cancel:hover:not(:disabled) {
  border-color: #d4af37;
  border-color: var(--login-gold);
  color: #d4af37;
  color: var(--login-gold);
}

.login-modal-actions .login-button {
  flex: 1 1;
  margin-top: 0;
}

/* Success state */
.login-modal-success {
  text-align: center;
  padding: 20px 0;
}

.login-success-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(39, 174, 96, 0.2);
  border: 3px solid #27ae60;
  color: #27ae60;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

.login-success-text {
  font-size: 16px;
  color: #e9ecef;
  color: var(--login-text);
  line-height: 1.5;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* RESPONSIVE */
/* ============================================ */
@media (max-width: 768px) {
  .login-card {
    padding: 30px 24px;
  }

  .login-logo-text {
    font-size: 24px;
  }

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

  .login-subtitle {
    font-size: 14px;
  }

  .whatsapp-float {
    width: 56px;
    height: 56px;
    bottom: 20px;
    right: 20px;
  }

  .login-modal {
    padding: 24px;
  }

  .login-modal-title {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 16px;
  }

  .login-card {
    padding: 24px 20px;
  }

  .login-logo {
    gap: 12px;
  }

  .login-logo-image {
    width: 48px;
    height: 48px;
  }

  .login-logo-text {
    font-size: 20px;
  }

  .login-title {
    font-size: 22px;
  }

  .login-input {
    font-size: 16px; /* Previene zoom en iOS */
  }

  .whatsapp-float {
    width: 52px;
    height: 52px;
    bottom: 16px;
    right: 16px;
  }
}
/* ============================================
   IMPORTS Y FONTS
   ============================================ */

/* ============================================
   VARIABLES
   ============================================ */
:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: rgba(10, 10, 10, 0.98);
  --border-color: rgba(255, 255, 255, 0.12);
  --text-primary: #e9ecef;
  --text-secondary: #b7bcc4;
  --accent-gold: #d4af37;
  --accent-red: #e50914;
  --accent-red-light: #ff1a25;
  --accent-purple: #7c5cff;
  --accent-cyan: #4dd2ff;
  --success-green: #27ae60;
}

/* ============================================
   RESET Y BASE
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Rajdhani', sans-serif;
  background-color: #0a0a0a;
  background-color: var(--bg-primary);
  color: #e9ecef;
  color: var(--text-primary);
  overflow-x: hidden;
}

/* ============================================
   CONTAINER
   ============================================ */
.dashboard-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--bg-primary);
}

/* ============================================
   NAVBAR
   ============================================ */
.dashboard-navbar {
  background-color: rgba(10, 10, 10, 0.98);
  background-color: var(--bg-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 16px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.navbar-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border-color);
  color: #e9ecef;
  color: var(--text-primary);
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.menu-button:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #d4af37;
  border-color: var(--accent-gold);
}

/* ============================================
   LOGO CON ANIMACIÓN SHINE
   ============================================ */
.navbar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.logo-image-wrapper {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #d4af37;
  border: 2px solid var(--accent-gold);
}

.logo-image-wrapper::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 70%
  );
  animation: logoShine 3s ease-in-out infinite;
}

@keyframes logoShine {
  0%, 100% {
    transform: translate(-100%, -100%) rotate(45deg);
  }
  50% {
    transform: translate(100%, 100%) rotate(45deg);
  }
}

.logo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.logo-text {
  font-family: 'Orbitron', monospace;
  font-size: 20px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--text-primary);
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--accent-gold), #f0d574);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  animation: textShine 2s ease-in-out infinite;
}

@keyframes textShine {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.3);
  }
}

/* ============================================
   BÚSQUEDA
   ============================================ */
.search-container {
  flex: 1 1;
  min-width: 200px;
  max-width: 500px;
  position: relative;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #b7bcc4;
  color: var(--text-secondary);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 10px 10px 10px 40px;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.3);
  color: #e9ecef;
  color: var(--text-primary);
  font-family: 'Rajdhani', sans-serif;
  outline: none;
  transition: all 0.3s ease;
}

.search-input:focus {
  border-color: #d4af37;
  border-color: var(--accent-gold);
  background-color: rgba(0, 0, 0, 0.5);
}

.search-input::placeholder {
  color: #b7bcc4;
  color: var(--text-secondary);
  opacity: 0.7;
}

/* ============================================
   NAVBAR RIGHT (BOTONES)
   ============================================ */
.navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.nav-button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border-color);
  color: #e9ecef;
  color: var(--text-primary);
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.nav-button:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #d4af37;
  border-color: var(--accent-gold);
  transform: translateY(-2px);
}

.nav-button-text {
  display: inline;
}

.nav-button-text-hidden {
  display: inline;
}

.logout-button {
  background: linear-gradient(135deg, #e50914, #ff1a25);
  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-light));
  border: none;
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.logout-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(229, 9, 20, 0.5);
}

/* ============================================
   BANNER PROMOCIONAL AUTO-ROTACIÓN (1200x400)
   ============================================ */
.banner-promo-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  margin-bottom: 20px;
}

.banner-promo-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-promo-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0;
}

.banner-promo-slide.active {
  opacity: 1;
  z-index: 1;
}

.banner-promo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Indicadores (dots) */
.banner-indicators {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.banner-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
}

.banner-dot.active {
  background: #d4af37;
  background: var(--accent-gold);
  width: 30px;
  border-radius: 6px;
}

.banner-dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

/* ============================================
   CARRUSEL DE CATEGORÍAS CON LED
   ============================================ */
.carrusel-categorias-container {
  position: relative;
  max-width: 1400px;
  margin: 0 auto 20px;
  padding: 0 60px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.carrusel-flecha {
  background: rgba(10, 10, 10, 0.98);
  background: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border-color);
  color: #e9ecef;
  color: var(--text-primary);
  padding: 12px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
  z-index: 10;
}

.carrusel-flecha:hover:not(.disabled) {
  background: #d4af37;
  background: var(--accent-gold);
  color: #0a0a0a;
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.carrusel-flecha.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.carrusel-wrapper {
  flex: 1 1;
  overflow: hidden;
  border-radius: 12px;
}

.carrusel-track {
  display: flex;
  gap: 12px;
  transition: transform 0.5s ease;
}

.carrusel-item {
 flex: 0 0 90px;
  min-width: 0;
  cursor: pointer;
}

/* CARRUSEL IMAGEN CON ANIMACIÓN LED */
.carrusel-imagen {
  position: relative;
  width: 100%;
  height: 90px;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  padding: 3px;
  background: linear-gradient(90deg, #d4af37, #e50914, #7c5cff, #4dd2ff, #d4af37);
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-red), var(--accent-purple), var(--accent-cyan), var(--accent-gold));
  background-size: 400% 400%;
  animation: ledChaseCarrusel 3s linear infinite;
}

@keyframes ledChaseCarrusel {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 400% 50%;
  }
}

.carrusel-imagen:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.5);
}

.carrusel-imagen.active {
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.8);
  animation: ledChaseCarruselActive 2s linear infinite;
}

@keyframes ledChaseCarruselActive {
  0% {
    background-position: 0% 50%;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
  }
  50% {
    background-position: 200% 50%;
    box-shadow: 0 0 40px rgba(229, 9, 20, 0.8);
  }
  100% {
    background-position: 400% 50%;
    box-shadow: 0 0 20px rgba(124, 92, 255, 0.6);
  }
}

.carrusel-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 9px;
 background-color: #0a0a0a;
 background-color: var(--bg-primary);
}

.carrusel-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent);
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carrusel-contador {
  font-size: 14px;
  font-weight: 700;
  color: #d4af37;
  color: var(--accent-gold);
  font-family: 'Rajdhani', sans-serif;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */
.main-layout {
  display: flex;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 16px;
  gap: 24px;
  position: relative;
}

/* ============================================
   SIDEBAR
   ============================================ */
.dashboard-sidebar {
  width: 280px;
  flex-shrink: 0;
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
  height: calc(100vh - 100px);
  overflow-y: auto;
  background-color: rgba(10, 10, 10, 0.98);
  background-color: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0;
  transition: transform 0.3s ease;
}

.dashboard-sidebar.open {
  transform: translateX(0);
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-title {
  font-size: 18px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--text-primary);
  font-family: 'Rajdhani', sans-serif;
  margin: 0;
}

.sidebar-close {
  background: transparent;
  border: none;
  color: #e9ecef;
  color: var(--text-primary);
  cursor: pointer;
  display: none;
  padding: 4px;
}

.sidebar-content {
  padding: 16px;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
}

/* Scrollbar personalizado para sidebar */
.dashboard-sidebar::-webkit-scrollbar {
  width: 6px;
}

.dashboard-sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.dashboard-sidebar::-webkit-scrollbar-thumb {
  background: #d4af37;
  background: var(--accent-gold);
  border-radius: 3px;
}

.dashboard-sidebar::-webkit-scrollbar-thumb:hover {
  background: #f0d574;
}

/* ============================================
   BADGE AFILIADO
   ============================================ */
.afiliado-badge {
  background: linear-gradient(135deg, #7c5cff, #4dd2ff);
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(124, 92, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 30px rgba(77, 210, 255, 0.7);
  }
}

/* ============================================
   CATEGORÍAS SIMPLIFICADAS (SIN ACORDEÓN)
   ============================================ */
.categorias-simple-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.categoria-simple-button {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e9ecef;
  color: var(--text-primary);
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.categoria-simple-button:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #d4af37;
  border-color: var(--accent-gold);
  transform: translateX(4px);
}

.categoria-simple-button.active {
  background: linear-gradient(135deg, #e50914, #ff1a25);
  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-light));
  border: none;
  box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
}

.categoria-simple-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.categoria-icono-imagen {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
}

.categoria-icono-emoji {
  font-size: 18px;
}

.categoria-simple-texto {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.contador-categoria {
  font-size: 12px;
  font-weight: 600;
  color: #d4af37;
  color: var(--accent-gold);
  background-color: rgba(212, 175, 55, 0.15);
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: auto;
}

/* ============================================
   CONTENIDO PRINCIPAL
   ============================================ */
.main-content {
  flex: 1 1;
  min-width: 0;
}

.content-header {
  margin-bottom: 20px;
}

.content-title {
  font-size: 24px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--text-primary);
  font-family: 'Rajdhani', sans-serif;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.productos-count {
  font-size: 18px;
  color: #b7bcc4;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ============================================
   LOADING Y EMPTY STATE
   ============================================ */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: #e9ecef;
  color: var(--text-primary);
  font-family: 'Rajdhani', sans-serif;
}

.loading-text {
  margin-top: 12px;
  font-size: 16px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top: 4px solid #d4af37;
  border-top: 4px solid var(--accent-gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center;
  padding: 40px 20px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-title {
  font-size: 24px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--text-primary);
  font-family: 'Rajdhani', sans-serif;
  margin: 0 0 8px 0;
}

.empty-text {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--text-secondary);
  font-family: 'Rajdhani', sans-serif;
  margin: 0;
}

.limpiar-todo-button {
  background: linear-gradient(135deg, #e50914, #ff1a25);
  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-light));
  border: none;
  color: white;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 16px;
  transition: all 0.3s ease;
}

.limpiar-todo-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(229, 9, 20, 0.5);
}

/* ============================================
   GRID DE PRODUCTOS
   ============================================ */
.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

/* ============================================
   PAGINACIÓN
   ============================================ */
.paginacion {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding: 20px 0;
  flex-wrap: wrap;
}

.paginacion-button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border-color);
  color: #e9ecef;
  color: var(--text-primary);
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.paginacion-button:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.05);
  border-color: #d4af37;
  border-color: var(--accent-gold);
  transform: translateY(-2px);
}

.paginacion-button.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.paginacion-numero {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border-color);
  color: #e9ecef;
  color: var(--text-primary);
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 40px;
  text-align: center;
}

.paginacion-numero:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #d4af37;
  border-color: var(--accent-gold);
  transform: translateY(-2px);
}

.paginacion-numero.active {
  background: linear-gradient(135deg, #e50914, #ff1a25);
  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-light));
  border: none;
  color: white;
  box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
}

.paginacion-dots {
  color: #b7bcc4;
  color: var(--text-secondary);
  padding: 0 8px;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================
   MODAL DE TEXTO
   ============================================ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

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

.modal-box {
  background-color: rgba(10, 10, 10, 0.98);
  background-color: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

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

.modal-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.modal-titulo {
  font-size: 20px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--text-primary);
  font-family: 'Rajdhani', sans-serif;
  margin: 0;
}

.modal-close-button {
  background: transparent;
  border: none;
  color: #e9ecef;
  color: var(--text-primary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.modal-close-button:hover {
  color: #e50914;
  color: var(--accent-red);
  transform: scale(1.1) rotate(90deg);
}

.modal-body {
  padding: 20px;
}

.modal-texto {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--text-secondary);
  font-family: 'Rajdhani', sans-serif;
  line-height: 1.8;
  margin: 0;
  white-space: pre-wrap;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}

.modal-button-cerrar {
  background: linear-gradient(135deg, #e50914, #ff1a25);
  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-light));
  border: none;
  color: white;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-button-cerrar:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(229, 9, 20, 0.5);
}

/* Scrollbar para modal */
.modal-box::-webkit-scrollbar {
  width: 6px;
}

.modal-box::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.modal-box::-webkit-scrollbar-thumb {
  background: #d4af37;
  background: var(--accent-gold);
  border-radius: 3px;
}

.modal-box::-webkit-scrollbar-thumb:hover {
  background: #f0d574;
}

















/* ==========================================
   TARJETA DE PRODUCTO
   ============================================ */    
   /* ============================================
   PRODUCTOS - CARDS CON BORDE LED Y ANIMACIONES
   ============================================ */

/* GRID DE PRODUCTOS - 4 por fila, adaptable */
.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

/* Forzar 4 columnas en pantallas grandes */
@media (min-width: 1200px) {
  .productos-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================
   TARJETA DE PRODUCTO
   ============================================ */
.product-card {
  position: relative;
  border-radius: 16px;
  overflow: visible;
  transition: transform 0.4s ease, z-index 0s;
  height: 460px;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-8px);
  z-index: 10;
}

/* BORDE LED ANIMADO */
.neon-card-border {
  position: absolute;
  inset: -3px;
  border-radius: 16px;
  padding: 3px;
  background: linear-gradient(90deg, #d4af37, #e50914, #7c5cff, #4dd2ff, #d4af37);
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-red), var(--accent-purple), var(--accent-cyan), var(--accent-gold));
  background-size: 400% 400%;
  animation: ledChaseCard 3s linear infinite;
  opacity: 0.8;
  z-index: 0;
}

@keyframes ledChaseCard {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 400% 50%;
  }
}

/* CONTENIDO INTERNO */
.card-inner-content {
  position: relative;
  z-index: 1;
  background-color: rgba(10, 10, 10, 0.98);
  background-color: var(--bg-secondary);
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border-color);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ============================================
   BADGES
   ============================================ */
.badges-container {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 10;
  pointer-events: none;
}

/* Código en esquina superior izquierda */
.badge-codigo {
  background: rgba(0, 0, 0, 0.85);
  color: #d4af37;
  color: var(--accent-gold);
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  border: 1px solid rgba(212, 175, 55, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

/* Oferta con animación de pulso y brillo */
.badge-oferta {
  background: linear-gradient(135deg, #e50914, #ff1a25);
  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-light));
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  animation: badgeOfertaPulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(229, 9, 20, 0.6);
  position: relative;
  overflow: hidden;
}

@keyframes badgeOfertaPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.4);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(229, 9, 20, 0.8);
  }
}

.badge-oferta::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 70%
  );
  animation: badgeShine 2s linear infinite;
}

@keyframes badgeShine {
  0% {
    transform: translate(-100%, -100%) rotate(45deg);
  }
  100% {
    transform: translate(100%, 100%) rotate(45deg);
  }
}

.badge-agotado {
  background: rgba(183, 188, 196, 0.9);
  color: #0a0a0a;
  color: var(--bg-primary);
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

/* ============================================
   IMAGEN DEL PRODUCTO - SIN ZOOM
   ============================================ */
.product-image-container {
  width: 100%;
  height: 180px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.9), rgba(30, 30, 30, 0.9));
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: none;
}

.product-image.no-stock {
  filter: grayscale(100%);
  opacity: 0.5;
}

/* LOGO VENDEDOR CON LED */
.vendor-logo-container {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
}

.vendor-logo-wrapper {
  position: relative;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(90deg, #d4af37, #e50914, #7c5cff, #4dd2ff, #d4af37);
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-red), var(--accent-purple), var(--accent-cyan), var(--accent-gold));
  background-size: 400% 400%;
  animation: ledChaseVendor 3s linear infinite;
}

@keyframes ledChaseVendor {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 400% 50%;
  }
}

.vendor-logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #0a0a0a;
  border: 2px solid var(--bg-primary);
  display: block;
}

/* ============================================
   CONTENIDO - 280PX RESTANTES
   ============================================ */
.product-content {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1;
  overflow: hidden;
}

/* NOMBRE - 2 líneas - 14PX */
.product-name {
  font-size: 14px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--text-primary);
  font-family: 'Rajdhani', sans-serif;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2;
  height: 34px;
}

/* VENDEDOR - 1 línea */
.product-vendor {
  font-size: 11px;
  color: #d4af37;
  color: var(--accent-gold);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 16px;
}

/* DETALLES - 2 líneas máximo */
.detalles-expandibles {
  margin-bottom: 4px;
  height: 40px;
  overflow: hidden;
}

.detalles-texto {
  font-size: 11px;
  color: #b7bcc4;
  color: var(--text-secondary);
  font-family: 'Rajdhani', sans-serif;
  line-height: 1.3;
  margin: 0 0 3px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 29px;
}

.boton-expandir {
  background: transparent;
  border: 1px solid rgba(77, 210, 255, 0.3);
  color: #4dd2ff;
  color: var(--accent-cyan);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  transition: all 0.3s ease;
  display: inline-block;
}

.boton-expandir:hover {
  background: rgba(77, 210, 255, 0.15);
  border-color: #4dd2ff;
  border-color: var(--accent-cyan);
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(77, 210, 255, 0.3);
}

/* ICONOS DE INFORMACIÓN - CON ANIMACIONES */
.info-icons-container {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-bottom: 4px;
  height: 28px;
}

.info-button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border-color);
  color: #e9ecef;
  color: var(--text-primary);
  font-size: 13px;
  padding: 4px 7px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.info-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}

.info-button:hover::before {
  width: 120%;
  height: 120%;
}

.info-button:hover {
  background: #d4af37;
  background: var(--accent-gold);
  color: #0a0a0a;
  border-color: #d4af37;
  border-color: var(--accent-gold);
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
  animation: iconBounce 0.6s ease-in-out;
}

@keyframes iconBounce {
  0%, 100% {
    transform: scale(1.15) rotate(5deg);
  }
  50% {
    transform: scale(1.25) rotate(-5deg);
  }
}

.info-button:nth-child(1):hover {
  animation-delay: 0s;
}

.info-button:nth-child(2):hover {
  animation-delay: 0.1s;
}

.info-button:nth-child(3):hover {
  animation-delay: 0.2s;
}

/* PRECIO - COMPACTO */
.price-container {
  margin-bottom: 4px;
  flex-shrink: 0;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 6px;
  padding: 6px;
}

.price-main {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}

.price-old {
  font-size: 11px;
  color: #b7bcc4;
  color: var(--text-secondary);
  font-family: 'Rajdhani', sans-serif;
  text-decoration: line-through;
  opacity: 0.7;
}

.price-new {
  font-size: 20px;
  font-weight: 900;
  color: #d4af37;
  color: var(--accent-gold);
  font-family: 'Orbitron', monospace;
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
  animation: priceGlow 2s ease-in-out infinite;
}

@keyframes priceGlow {
  0%, 100% {
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
  }
  50% {
    text-shadow: 0 0 25px rgba(212, 175, 55, 0.7);
  }
}

.renovacion-container {
  display: flex;
  align-items: center;
  gap: 3px;
  padding-top: 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.renovacion-icon {
  font-size: 10px;
  animation: rotateIcon 2s linear infinite;
}

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

.renovacion-text {
  font-size: 10px;
  color: #4dd2ff;
  color: var(--accent-cyan);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
}

/* STOCK - COMPACTO */
.stock-container {
  margin-bottom: 6px;
  flex-shrink: 0;
  text-align: center;
  height: 20px;
}

.stock-badge {
  font-size: 10px;
  color: #27ae60;
  color: var(--success-green);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(39, 174, 96, 0.15);
  border: 1px solid #27ae60;
  border: 1px solid var(--success-green);
}

.stock-badge.no {
  color: #ff4444;
  background: rgba(255, 68, 68, 0.15);
  border: 1px solid #ff4444;
}

/* BOTÓN "VER PRODUCTO" CON EFECTOS NEÓN */
.product-button {
  width: 100%;
  background: linear-gradient(135deg, #e50914, #ff1a25);
  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-light));
  border: none;
  color: white;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 900;
  padding: 9px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  margin-top: auto;
  box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  height: 36px;
}

.product-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: rotate(45deg);
  animation: buttonSweep 3s linear infinite;
}

@keyframes buttonSweep {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

.product-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    #d4af37, 
    #e50914, 
    #7c5cff, 
    #4dd2ff,
    #d4af37
  );
  background: linear-gradient(90deg, 
    var(--accent-gold), 
    var(--accent-red), 
    var(--accent-purple), 
    var(--accent-cyan),
    var(--accent-gold)
  );
  background-size: 400% 400%;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: neonBorder 3s linear infinite;
  z-index: -1;
  filter: blur(8px);
}

@keyframes neonBorder {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 400% 50%;
  }
}

.product-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(229, 9, 20, 0.6), 
              0 0 40px rgba(229, 9, 20, 0.4),
              inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.product-button:hover::after {
  opacity: 1;
}

.product-button:active {
  transform: translateY(-1px);
}

/* SIN STOCK */
.product-button.disabled {
  background: linear-gradient(135deg, #3a3a3a, #1a1a1a);
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

.product-button.disabled:hover {
  transform: none;
  box-shadow: none;
}

.product-button.disabled::before,
.product-button.disabled::after {
  display: none;
}

/* ============================================
   PAGINACIÓN
   ============================================ */
.paginacion {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding: 20px 0;
  flex-wrap: wrap;
}

.paginacion-button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border-color);
  color: #e9ecef;
  color: var(--text-primary);
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.paginacion-button:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.05);
  border-color: #d4af37;
  border-color: var(--accent-gold);
  transform: translateY(-2px);
}

.paginacion-button.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.paginacion-numero {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border-color);
  color: #e9ecef;
  color: var(--text-primary);
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 40px;
  text-align: center;
}

.paginacion-numero:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #d4af37;
  border-color: var(--accent-gold);
  transform: translateY(-2px);
}

.paginacion-numero.active {
  background: linear-gradient(135deg, #e50914, #ff1a25);
  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-light));
  border: none;
  color: white;
  box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
}

.paginacion-dots {
  color: #b7bcc4;
  color: var(--text-secondary);
  padding: 0 8px;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================
   MODAL DE TEXTO
   ============================================ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

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

.modal-box {
  background-color: rgba(10, 10, 10, 0.98);
  background-color: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

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

.modal-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.modal-titulo {
  font-size: 20px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--text-primary);
  font-family: 'Rajdhani', sans-serif;
  margin: 0;
}

.modal-close-button {
  background: transparent;
  border: none;
  color: #e9ecef;
  color: var(--text-primary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.modal-close-button:hover {
  color: #e50914;
  color: var(--accent-red);
  transform: scale(1.1) rotate(90deg);
}

.modal-body {
  padding: 20px;
}

.modal-texto {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--text-secondary);
  font-family: 'Rajdhani', sans-serif;
  line-height: 1.8;
  margin: 0;
  white-space: pre-wrap;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}

.modal-button-cerrar {
  background: linear-gradient(135deg, #e50914, #ff1a25);
  background: linear-gradient(135deg, var(--accent-red), var(--accent-red-light));
  border: none;
  color: white;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-button-cerrar:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(229, 9, 20, 0.5);
}

/* Scrollbar para modal */
.modal-box::-webkit-scrollbar {
  width: 6px;
}

.modal-box::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.modal-box::-webkit-scrollbar-thumb {
  background: #d4af37;
  background: var(--accent-gold);
  border-radius: 3px;
}

.modal-box::-webkit-scrollbar-thumb:hover {
  background: #f0d574;
}

/* src/pages/cliente/ProductDetail.css */
/* PREFIJO: pd- (Product Detail) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --pd-bg-primary: #0a0a0a;
  --pd-bg-secondary: #1a1a1a;
  --pd-bg-card: rgba(20, 20, 20, 0.95);
  --pd-gold: #d4af37;
  --pd-gold-light: #f0d574;
  --pd-gold-dark: #b8941f;
  --pd-text-primary: #e9ecef;
  --pd-text-secondary: #b7bcc4;
  --pd-border: rgba(255, 255, 255, 0.12);
  --pd-success: #27ae60;
  --pd-danger: #e74c3c;
  --pd-info: #3498db;
  --pd-warning: #f39c12;
}

/* ============================================ */
/* RESET & BASE */
/* ============================================ */
.pd-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0a0a 0%, #0f0f0f 100%);
  background: linear-gradient(135deg, var(--pd-bg-primary) 0%, #0f0f0f 100%);
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.pd-header {
  background: linear-gradient(135deg, rgba(20, 20, 20, 0.98), rgba(10, 10, 10, 0.95));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--pd-border);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  animation: pd-slideDown 0.5s ease-out;
}

.pd-header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.pd-back-button-header {
  background: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--pd-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--pd-border);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.pd-back-button-header:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(-4px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.pd-header-center {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1;
  justify-content: center;
}

.pd-header-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
  animation: pd-float 3s ease-in-out infinite;
}

.pd-logo {
  font-size: 24px;
  font-weight: 900;
  margin: 0;
  font-family: 'Orbitron', monospace;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--pd-gold), var(--pd-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.pd-wallet-button {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--pd-gold), var(--pd-gold-light));
  color: #0a0a0a;
  color: var(--pd-bg-primary);
  border: none;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.pd-wallet-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
}

/* ============================================ */
/* MAIN CONTENT */
/* ============================================ */
.pd-main {
  padding: 40px 24px;
}

.pd-main-content {
  max-width: 1400px;
  margin: 0 auto;
}

.pd-product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
  gap: 40px;
  animation: pd-fadeIn 0.6s ease-out;
}

/* ============================================ */
/* IMAGE SECTION */
/* ============================================ */
.pd-image-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pd-badges-container {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.pd-code-badge {
  background: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--pd-text-primary);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--pd-border);
  font-family: 'Orbitron', monospace;
}

.pd-offer-badge {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
  animation: pd-pulse 2s ease-in-out infinite;
}

.pd-no-stock-badge {
  background: linear-gradient(135deg, #7f8c8d, #95a5a6);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

.pd-image-wrapper {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(20, 20, 20, 0.95);
  background: var(--pd-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--pd-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.pd-product-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.pd-product-image:hover {
  transform: scale(1.05);
}

.pd-product-image-no-stock {
  filter: grayscale(100%) opacity(0.5);
}

/* ============================================ */
/* VENDOR CARD */
/* ============================================ */
.pd-vendor-card {
  background: rgba(20, 20, 20, 0.95);
  background: var(--pd-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--pd-border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.pd-vendor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.2);
}

.pd-vendor-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.pd-vendor-icon {
  color: #d4af37;
  color: var(--pd-gold);
}

.pd-vendor-label {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--pd-text-secondary);
  font-weight: 500;
}

.pd-vendor-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pd-vendor-logo-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #d4af37;
  border: 2px solid var(--pd-gold);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

.pd-vendor-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-vendor-name {
  font-size: 18px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--pd-text-primary);
  margin: 0;
}

/* ============================================ */
/* INFO SECTION */
/* ============================================ */
.pd-info-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pd-afiliado-badge {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--pd-gold), var(--pd-gold-light));
  color: #0a0a0a;
  color: var(--pd-bg-primary);
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  width: -webkit-fit-content;
  width: fit-content;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
  animation: pd-shimmer 3s ease-in-out infinite;
}

.pd-product-name {
  font-size: 36px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--pd-text-primary);
  margin: 0;
  line-height: 1.2;
  font-family: 'Rajdhani', sans-serif;
}

.pd-product-details {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--pd-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ============================================ */
/* PRICE SECTION */
/* ============================================ */
.pd-price-section {
  background: rgba(20, 20, 20, 0.95);
  background: var(--pd-bg-card);
  border: 2px solid #d4af37;
  border: 2px solid var(--pd-gold);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.2);
}

.pd-price-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pd-price-old {
  font-size: 24px;
  color: #b7bcc4;
  color: var(--pd-text-secondary);
  text-decoration: line-through;
  font-weight: 500;
}

.pd-price-new {
  font-size: 48px;
  font-weight: 900;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--pd-gold), var(--pd-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Orbitron', monospace;
}

.pd-price-unit {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--pd-text-secondary);
  font-weight: 500;
}

.pd-renovacion-badge {
  margin-top: 12px;
  background: rgba(52, 152, 219, 0.2);
  border: 1px solid #3498db;
  border: 1px solid var(--pd-info);
  color: #3498db;
  color: var(--pd-info);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
}

/* ============================================ */
/* STOCK SECTION */
/* ============================================ */
.pd-stock-section {
  padding: 12px 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--pd-border);
}

.pd-stock-text-yes {
  color: #27ae60;
  color: var(--pd-success);
  font-weight: 600;
  font-size: 16px;
}

.pd-stock-text-no {
  color: #e74c3c;
  color: var(--pd-danger);
  font-weight: 600;
  font-size: 16px;
}

/* ============================================ */
/* QUANTITY SECTION */
/* ============================================ */
.pd-quantity-section {
  background: rgba(20, 20, 20, 0.95);
  background: var(--pd-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--pd-border);
  border-radius: 12px;
  padding: 20px;
}

.pd-quantity-label {
  font-size: 16px;
  font-weight: 600;
  color: #e9ecef;
  color: var(--pd-text-primary);
  margin-bottom: 12px;
  display: block;
}

.pd-quantity-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pd-quantity-button {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--pd-gold), var(--pd-gold-light));
  color: #0a0a0a;
  color: var(--pd-bg-primary);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-weight: 700;
}

.pd-quantity-button:hover:not(:disabled) {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.5);
}

.pd-quantity-button:disabled {
  background: #4b5563;
  cursor: not-allowed;
  opacity: 0.5;
}

.pd-quantity-input {
  width: 80px;
  height: 44px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--pd-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--pd-border);
  border-radius: 10px;
  font-family: 'Orbitron', monospace;
}

.pd-quantity-input:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--pd-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

.pd-quantity-hint {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--pd-text-secondary);
  margin-top: 8px;
  display: block;
}

/* ============================================ */
/* SUMMARY CARD */
/* ============================================ */
.pd-summary-card {
  background: rgba(20, 20, 20, 0.95);
  background: var(--pd-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--pd-border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.pd-summary-title {
  font-size: 20px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--pd-text-primary);
  margin: 0 0 16px 0;
}

.pd-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pd-summary-row:last-child {
  border-bottom: none;
}

.pd-summary-label {
  font-size: 15px;
  color: #b7bcc4;
  color: var(--pd-text-secondary);
  font-weight: 500;
}

.pd-summary-value {
  font-size: 15px;
  color: #e9ecef;
  color: var(--pd-text-primary);
  font-weight: 600;
}

.pd-summary-label-discount {
  font-size: 15px;
  color: #27ae60;
  color: var(--pd-success);
  font-weight: 600;
}

.pd-summary-value-discount {
  font-size: 15px;
  color: #27ae60;
  color: var(--pd-success);
  font-weight: 700;
}

.pd-summary-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  background: linear-gradient(90deg, transparent, var(--pd-gold), transparent);
  margin: 16px 0;
}

.pd-summary-label-total {
  font-size: 18px;
  color: #e9ecef;
  color: var(--pd-text-primary);
  font-weight: 700;
}

.pd-summary-value-total {
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--pd-gold), var(--pd-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Orbitron', monospace;
}

/* ============================================ */
/* WALLET CARD */
/* ============================================ */
.pd-wallet-card {
  border-radius: 16px;
  padding: 24px;
  border: 2px solid;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.pd-wallet-card-success {
  background: rgba(39, 174, 96, 0.1);
  border-color: #27ae60;
  border-color: var(--pd-success);
}

.pd-wallet-card-error {
  background: rgba(231, 76, 60, 0.1);
  border-color: #e74c3c;
  border-color: var(--pd-danger);
}

.pd-wallet-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.pd-wallet-card-label {
  font-size: 15px;
  color: #b7bcc4;
  color: var(--pd-text-secondary);
  font-weight: 500;
}

.pd-wallet-card-value {
  font-size: 16px;
  color: #e9ecef;
  color: var(--pd-text-primary);
  font-weight: 600;
  font-family: 'Orbitron', monospace;
}

.pd-wallet-card-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  margin: 12px 0;
}

.pd-wallet-card-label-bold {
  font-size: 18px;
  color: #e9ecef;
  color: var(--pd-text-primary);
  font-weight: 700;
}

.pd-wallet-card-value-bold {
  font-size: 24px;
  font-weight: 900;
  font-family: 'Orbitron', monospace;
}

.pd-wallet-card-warning {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(231, 76, 60, 0.2);
  border: 1px solid #e74c3c;
  border: 1px solid var(--pd-danger);
  border-radius: 8px;
  color: #e74c3c;
  color: var(--pd-danger);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* ============================================ */
/* ERROR MESSAGE */
/* ============================================ */
.pd-error-message {
  background: rgba(231, 76, 60, 0.2);
  border: 1px solid #e74c3c;
  border: 1px solid var(--pd-danger);
  color: #e74c3c;
  color: var(--pd-danger);
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  animation: pd-shake 0.5s ease-in-out;
}

/* ============================================ */
/* INFO BUTTONS */
/* ============================================ */
.pd-info-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.pd-info-button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--pd-border);
  color: #e9ecef;
  color: var(--pd-text-primary);
  padding: 16px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: 'Rajdhani', sans-serif;
}

.pd-info-button:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: #d4af37;
  border-color: var(--pd-gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.pd-info-button-icon {
  color: #d4af37;
  color: var(--pd-gold);
}

.pd-info-button-text {
  font-size: 14px;
  font-weight: 600;
}

/* ============================================ */
/* BUY BUTTON */
/* ============================================ */
.pd-buy-button {
  width: 100%;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--pd-gold), var(--pd-gold-light));
  color: #0a0a0a;
  color: var(--pd-bg-primary);
  border: none;
  padding: 18px 24px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 6px 24px rgba(212, 175, 55, 0.5);
}

.pd-buy-button:hover:not(.pd-buy-button-disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.7);
}

.pd-buy-button-disabled {
  background: #4b5563;
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

.pd-info-note {
  text-align: center;
  font-size: 14px;
  color: #b7bcc4;
  color: var(--pd-text-secondary);
  margin: 0;
  font-style: italic;
}

.pd-warning-note {
  text-align: center;
  font-size: 14px;
  color: #f39c12;
  color: var(--pd-warning);
  margin: 0;
  font-weight: 600;
  background: rgba(243, 156, 18, 0.1);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #f39c12;
  border: 1px solid var(--pd-warning);
}

/* ============================================ */
/* MODAL INFO */
/* ============================================ */
.pd-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: pd-fadeIn 0.3s ease-out;
}

.pd-modal-content {
  background: rgba(20, 20, 20, 0.95);
  background: var(--pd-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--pd-border);
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  animation: pd-scaleIn 0.3s ease-out;
}

.pd-modal-header {
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--pd-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pd-modal-titulo {
  font-size: 22px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--pd-text-primary);
  margin: 0;
}

.pd-modal-close {
  background: none;
  border: none;
  color: #b7bcc4;
  color: var(--pd-text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.pd-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--pd-text-primary);
}

.pd-modal-body {
  padding: 24px;
  max-height: 400px;
  overflow-y: auto;
}

.pd-modal-texto {
  font-size: 15px;
  color: #b7bcc4;
  color: var(--pd-text-secondary);
  line-height: 1.8;
  margin: 0;
}

.pd-modal-footer {
  padding: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid var(--pd-border);
  display: flex;
  justify-content: flex-end;
}

.pd-modal-button-cerrar {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--pd-gold), var(--pd-gold-light));
  color: #0a0a0a;
  color: var(--pd-bg-primary);
  border: none;
  padding: 12px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.pd-modal-button-cerrar:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.5);
}

/* ============================================ */
/* MODAL SUCCESS */
/* ============================================ */
.pd-modal-overlay-success {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
  animation: pd-fadeIn 0.4s ease-out;
}

.pd-modal-content-success {
  background: rgba(20, 20, 20, 0.95);
  background: var(--pd-bg-card);
  border: 2px solid #27ae60;
  border: 2px solid var(--pd-success);
  border-radius: 20px;
  max-width: 550px;
  width: 100%;
  padding: 40px 32px;
  box-shadow: 0 30px 80px rgba(39, 174, 96, 0.4);
  animation: pd-bounceIn 0.6s ease-out;
  position: relative;
}

.pd-modal-close-success {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: #b7bcc4;
  color: var(--pd-text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.pd-modal-close-success:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--pd-text-primary);
}

.pd-success-icon-container {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.pd-success-icon {
  color: #27ae60;
  color: var(--pd-success);
  animation: pd-checkmark 0.8s ease-out;
}

.pd-success-title {
  font-size: 28px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--pd-text-primary);
  text-align: center;
  margin: 0 0 24px 0;
}

.pd-success-details {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--pd-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.pd-success-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.pd-success-label {
  font-size: 15px;
  color: #b7bcc4;
  color: var(--pd-text-secondary);
  font-weight: 500;
}

.pd-success-value {
  font-size: 16px;
  color: #e9ecef;
  color: var(--pd-text-primary);
  font-weight: 700;
}

.pd-success-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #27ae60, transparent);
  background: linear-gradient(90deg, transparent, var(--pd-success), transparent);
  margin: 12px 0;
}

.pd-success-label-bold {
  font-size: 17px;
  color: #e9ecef;
  color: var(--pd-text-primary);
  font-weight: 700;
}

.pd-success-value-bold {
  font-size: 22px;
  font-weight: 900;
  color: #27ae60;
  color: var(--pd-success);
  font-family: 'Orbitron', monospace;
}

.pd-success-message {
  text-align: center;
  font-size: 15px;
  color: #b7bcc4;
  color: var(--pd-text-secondary);
  line-height: 1.6;
  margin: 0 0 24px 0;
}

.pd-success-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.pd-success-button-primary {
  flex: 1 1;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--pd-gold), var(--pd-gold-light));
  color: #0a0a0a;
  color: var(--pd-bg-primary);
  border: none;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.pd-success-button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
}

.pd-success-button-secondary {
  flex: 1 1;
  background: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--pd-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--pd-border);
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.pd-success-button-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #d4af37;
  border-color: var(--pd-gold);
}

.pd-success-auto-redirect {
  text-align: center;
  font-size: 13px;
  color: #b7bcc4;
  color: var(--pd-text-secondary);
  margin: 0;
  font-style: italic;
}

/* ============================================ */
/* LOADING */
/* ============================================ */
.pd-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 20px;
}

.pd-spinner {
  width: 60px;
  height: 60px;
  border: 6px solid rgba(255, 255, 255, 0.1);
  border-top: 6px solid #d4af37;
  border-top: 6px solid var(--pd-gold);
  border-radius: 50%;
  animation: pd-spin 1s linear infinite;
}

.pd-loading-text {
  font-size: 18px;
  color: #b7bcc4;
  color: var(--pd-text-secondary);
  font-weight: 600;
}

/* ============================================ */
/* ERROR CONTAINER */
/* ============================================ */
.pd-error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;
  text-align: center;
}

.pd-error-icon {
  font-size: 80px;
  margin-bottom: 24px;
}

.pd-error-title {
  font-size: 28px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--pd-text-primary);
  margin: 0 0 20px 0;
}

.pd-back-button {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--pd-gold), var(--pd-gold-light));
  color: #0a0a0a;
  color: var(--pd-bg-primary);
  border: none;
  padding: 14px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.pd-back-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
}

/* ============================================ */
/* SCROLLBAR */
/* ============================================ */
.pd-modal-body::-webkit-scrollbar {
  width: 8px;
}

.pd-modal-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.pd-modal-body::-webkit-scrollbar-thumb {
  background: #d4af37;
  background: var(--pd-gold);
  border-radius: 10px;
}

.pd-modal-body::-webkit-scrollbar-thumb:hover {
  background: #f0d574;
  background: var(--pd-gold-light);
}

/* ============================================ */
/* ANIMATIONS */
/* ============================================ */
@keyframes pd-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

@keyframes pd-bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pd-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

@keyframes pd-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

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

@keyframes pd-shimmer {
  0% { box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4); }
  50% { box-shadow: 0 6px 25px rgba(212, 175, 55, 0.6); }
  100% { box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4); }
}

@keyframes pd-checkmark {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

/* ============================================ */
/* RESPONSIVE - TABLETS */
/* ============================================ */
@media (max-width: 1024px) {
  .pd-product-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .pd-product-name {
    font-size: 30px;
  }

  .pd-price-new {
    font-size: 40px;
  }
}

/* ============================================ */
/* RESPONSIVE - MOBILE */
/* ============================================ */
@media (max-width: 768px) {
  .pd-header-content {
    flex-wrap: wrap;
    gap: 12px;
  }

  .pd-logo {
    font-size: 18px;
  }

  .pd-wallet-button {
    font-size: 14px;
    padding: 10px 16px;
  }

  .pd-product-name {
    font-size: 24px;
  }

  .pd-price-new {
    font-size: 32px;
  }

  .pd-info-buttons {
    grid-template-columns: 1fr;
  }

  .pd-success-buttons {
    flex-direction: column;
  }

  .pd-modal-content-success {
    padding: 32px 24px;
  }
}


/* src/pages/cliente/MisPedidos.css */
/* PREFIJO: cmpx- (Cliente Mis Pedidos eXtended) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --cmpx-bg-primary: #0a0a0a;
  --cmpx-bg-secondary: rgba(10, 10, 10, 0.95);
  --cmpx-bg-card: rgba(20, 20, 20, 0.95);
  --cmpx-gold: #d4af37;
  --cmpx-gold-light: #f0d574;
  --cmpx-text-primary: #e9ecef;
  --cmpx-text-secondary: #b7bcc4;
  --cmpx-border: rgba(255, 255, 255, 0.12);
  --cmpx-success: #27ae60;
  --cmpx-warning: #f39c12;
  --cmpx-danger: #e74c3c;
  --cmpx-info: #3498db;
  --cmpx-purple: #9b59b6;
}

/* ============================================ */
/* RESET & BASE */
/* ============================================ */
.cmpx-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--cmpx-bg-primary);
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-container * {
  box-sizing: border-box;
}

/* ============================================ */
/* NOTIFICACIÓN INTERNA (TOAST) */
/* ============================================ */
.cmpx-notificacion {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 9999;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--cmpx-bg-card);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
  border: 2px solid;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  max-width: 500px;
  animation: cmpx-slideIn 0.3s ease-out;
}

@keyframes cmpx-slideIn {
  from {
    transform: translateX(120%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.cmpx-notificacion-success {
  border-color: #27ae60;
  border-color: var(--cmpx-success);
  background: linear-gradient(135deg, rgba(39, 174, 96, 0.1), rgba(39, 174, 96, 0.05));
}

.cmpx-notificacion-error {
  border-color: #e74c3c;
  border-color: var(--cmpx-danger);
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(231, 76, 60, 0.05));
}

.cmpx-notificacion-info {
  border-color: #3498db;
  border-color: var(--cmpx-info);
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(52, 152, 219, 0.05));
}

.cmpx-notificacion-contenido {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1;
  color: #e9ecef;
  color: var(--cmpx-text-primary);
  font-size: 15px;
  font-weight: 500;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-notificacion-success .cmpx-notificacion-contenido svg {
  color: #27ae60;
  color: var(--cmpx-success);
}

.cmpx-notificacion-error .cmpx-notificacion-contenido svg {
  color: #e74c3c;
  color: var(--cmpx-danger);
}

.cmpx-notificacion-info .cmpx-notificacion-contenido svg {
  color: #3498db;
  color: var(--cmpx-info);
}

.cmpx-notificacion-cerrar {
  background: none;
  border: none;
  color: #b7bcc4;
  color: var(--cmpx-text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.cmpx-notificacion-cerrar:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--cmpx-text-primary);
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.cmpx-header {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--cmpx-bg-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--cmpx-border);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.cmpx-header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.cmpx-back-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--cmpx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cmpx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-back-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateX(-2px);
}

.cmpx-header-center {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1;
  justify-content: center;
}

.cmpx-header-logo {
  width: 45px;
  height: 45px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid #d4af37;
  border: 2px solid var(--cmpx-gold);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.cmpx-logo {
  font-size: 24px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--cmpx-text-primary);
  margin: 0;
  font-family: 'Orbitron', monospace;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--cmpx-gold), var(--cmpx-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cmpx-wallet-button {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
  color: #d4af37;
  color: var(--cmpx-gold);
  border: 1px solid #d4af37;
  border: 1px solid var(--cmpx-gold);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cmpx-wallet-button:hover {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--cmpx-gold), var(--cmpx-gold-light));
  color: #0a0a0a;
  color: var(--cmpx-bg-primary);
  transform: scale(1.05);
}

.cmpx-wallet-saldo {
  font-weight: 700;
}

/* ============================================ */
/* MAIN */
/* ============================================ */
.cmpx-main {
  padding: 40px 24px;
}

.cmpx-main-content {
  max-width: 1400px;
  margin: 0 auto;
}

/* ============================================ */
/* TITLE SECTION */
/* ============================================ */
.cmpx-title-section {
  margin-bottom: 32px;
}

.cmpx-title {
  font-size: 32px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--cmpx-text-primary);
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-subtitle {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--cmpx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* ESTADÍSTICAS */
/* ============================================ */
.cmpx-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.cmpx-stat-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--cmpx-bg-card);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cmpx-border);
  transition: all 0.3s ease;
}

.cmpx-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
}

.cmpx-stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.cmpx-stat-icon-total {
  background-color: #d4af37;
  background-color: var(--cmpx-gold);
}

.cmpx-stat-icon-pendiente {
  background-color: #f39c12;
  background-color: var(--cmpx-warning);
}

.cmpx-stat-icon-proceso {
  background-color: #3498db;
  background-color: var(--cmpx-info);
}

.cmpx-stat-icon-entregado {
  background-color: #27ae60;
  background-color: var(--cmpx-success);
}

.cmpx-stat-info {
  flex: 1 1;
}

.cmpx-stat-label {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--cmpx-text-secondary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--cmpx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* FILTROS Y BÚSQUEDA */
/* ============================================ */
.cmpx-filters-section {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cmpx-search-box {
  position: relative;
  max-width: 600px;
}

.cmpx-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #b7bcc4;
  color: var(--cmpx-text-secondary);
}

.cmpx-search-input {
  width: 100%;
  padding: 12px 12px 12px 48px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--cmpx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cmpx-border);
  border-radius: 8px;
  color: #e9ecef;
  color: var(--cmpx-text-primary);
  font-size: 15px;
  font-family: 'Rajdhani', sans-serif;
  transition: all 0.3s ease;
}

.cmpx-search-input:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--cmpx-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.cmpx-search-input::placeholder {
  color: #b7bcc4;
  color: var(--cmpx-text-secondary);
}

.cmpx-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cmpx-filter-button {
  background-color: rgba(255, 255, 255, 0.05);
  color: #b7bcc4;
  color: var(--cmpx-text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cmpx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cmpx-filter-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #d4af37;
  border-color: var(--cmpx-gold);
}

.cmpx-filter-button-active {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--cmpx-gold), var(--cmpx-gold-light));
  color: #0a0a0a;
  color: var(--cmpx-bg-primary);
  border-color: #d4af37;
  border-color: var(--cmpx-gold);
  font-weight: 600;
}

/* ============================================ */
/* PEDIDOS GRID */
/* ============================================ */
.cmpx-pedidos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.cmpx-pedido-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--cmpx-bg-card);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cmpx-border);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cmpx-pedido-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  border-color: #d4af37;
  border-color: var(--cmpx-gold);
}

.cmpx-pedido-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--cmpx-border);
}

.cmpx-pedido-codigo {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #b7bcc4;
  color: var(--cmpx-text-secondary);
  font-size: 13px;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-pedido-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-badge-pendiente {
  background-color: rgba(243, 156, 18, 0.2);
  color: #f39c12;
  color: var(--cmpx-warning);
  border: 1px solid #f39c12;
  border: 1px solid var(--cmpx-warning);
}

.cmpx-badge-proceso {
  background-color: rgba(52, 152, 219, 0.2);
  color: #3498db;
  color: var(--cmpx-info);
  border: 1px solid #3498db;
  border: 1px solid var(--cmpx-info);
}

.cmpx-badge-entregado {
  background-color: rgba(39, 174, 96, 0.2);
  color: #27ae60;
  color: var(--cmpx-success);
  border: 1px solid #27ae60;
  border: 1px solid var(--cmpx-success);
}

.cmpx-badge-completado {
  background-color: rgba(39, 174, 96, 0.3);
  color: #27ae60;
  color: var(--cmpx-success);
  border: 1px solid #27ae60;
  border: 1px solid var(--cmpx-success);
}

.cmpx-badge-cancelado {
  background-color: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  color: var(--cmpx-danger);
  border: 1px solid #e74c3c;
  border: 1px solid var(--cmpx-danger);
}

/* ============================================ */
/* TIMELINE DEL PEDIDO */
/* ============================================ */
.cmpx-pedido-timeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  position: relative;
}

.cmpx-timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.cmpx-timeline-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border: 2px solid var(--cmpx-border);
  transition: all 0.3s ease;
}

.cmpx-timeline-active .cmpx-timeline-dot {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--cmpx-gold), var(--cmpx-gold-light));
  border-color: #d4af37;
  border-color: var(--cmpx-gold);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}

.cmpx-timeline-label {
  font-size: 11px;
  color: #b7bcc4;
  color: var(--cmpx-text-secondary);
  font-weight: 500;
  font-family: 'Rajdhani', sans-serif;
  text-align: center;
}

.cmpx-timeline-active .cmpx-timeline-label {
  color: #d4af37;
  color: var(--cmpx-gold);
  font-weight: 700;
}

.cmpx-timeline-line {
  flex: 1 1;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.12);
  background-color: var(--cmpx-border);
  position: relative;
  top: -20px;
}

/* ============================================ */
/* CONTENIDO DEL PEDIDO */
/* ============================================ */
.cmpx-pedido-content {
  display: flex;
  gap: 16px;
}

.cmpx-pedido-imagen-container {
  flex-shrink: 0;
}

.cmpx-pedido-imagen {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border: 2px solid var(--cmpx-border);
}

.cmpx-pedido-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cmpx-pedido-nombre {
  font-size: 16px;
  font-weight: 600;
  color: #e9ecef;
  color: var(--cmpx-text-primary);
  margin: 0;
  line-height: 1.3;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-pedido-codigo-producto {
  font-size: 12px;
  color: #d4af37;
  color: var(--cmpx-gold);
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-pedido-vendedor {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--cmpx-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-pedido-detalles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cmpx-pedido-detalle-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #b7bcc4;
  color: var(--cmpx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-precio {
  color: #d4af37;
  color: var(--cmpx-gold);
  font-weight: 700;
  font-size: 16px;
}

.cmpx-pedido-fecha {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--cmpx-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-pedido-renovacion-badge {
  background-color: rgba(155, 89, 182, 0.2);
  color: #9b59b6;
  color: var(--cmpx-purple);
  border: 1px solid #9b59b6;
  border: 1px solid var(--cmpx-purple);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Rajdhani', sans-serif;
  width: -webkit-fit-content;
  width: fit-content;
}

/* ============================================ */
/* MENSAJE DE ESTADO */
/* ============================================ */
.cmpx-pedido-mensaje-estado {
  background: linear-gradient(135deg, rgba(39, 174, 96, 0.1), rgba(39, 174, 96, 0.05));
  border: 1px solid #27ae60;
  border: 1px solid var(--cmpx-success);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #27ae60;
  color: var(--cmpx-success);
  font-size: 13px;
  font-weight: 500;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-mensaje-cancelado {
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(231, 76, 60, 0.05));
  border-color: #e74c3c;
  border-color: var(--cmpx-danger);
  color: #e74c3c;
  color: var(--cmpx-danger);
}

/* ============================================ */
/* ACCIONES */
/* ============================================ */
.cmpx-pedido-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cmpx-btn-ver {
  flex: 1 1;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--cmpx-gold), var(--cmpx-gold-light));
  color: #0a0a0a;
  color: var(--cmpx-bg-primary);
  border: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cmpx-btn-ver:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
}

.cmpx-btn-chat {
  flex: 1 1;
  background-color: rgba(52, 152, 219, 0.2);
  color: #3498db;
  color: var(--cmpx-info);
  border: 1px solid #3498db;
  border: 1px solid var(--cmpx-info);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cmpx-btn-chat:hover {
  background-color: #3498db;
  background-color: var(--cmpx-info);
  color: white;
}

/* ============================================ */
/* EMPTY STATE */
/* ============================================ */
.cmpx-empty-state {
  text-align: center;
  padding: 80px 20px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--cmpx-bg-card);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cmpx-border);
}

.cmpx-empty-icon {
  font-size: 80px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.cmpx-empty-title {
  font-size: 24px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--cmpx-text-primary);
  margin-bottom: 8px;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-empty-text {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--cmpx-text-secondary);
  margin: 0 0 24px 0;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-empty-button {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--cmpx-gold), var(--cmpx-gold-light));
  color: #0a0a0a;
  color: var(--cmpx-bg-primary);
  border: none;
  padding: 14px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  transition: all 0.3s ease;
}

.cmpx-empty-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
}

/* ============================================ */
/* MODAL */
/* ============================================ */
.cmpx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.cmpx-modal-content {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--cmpx-bg-secondary);
  border-radius: 16px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.8);
  border: 2px solid #d4af37;
  border: 2px solid var(--cmpx-gold);
}

.cmpx-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--cmpx-border);
}

.cmpx-modal-title {
  font-size: 24px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--cmpx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-modal-close {
  background: none;
  border: none;
  color: #b7bcc4;
  color: var(--cmpx-text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cmpx-modal-close:hover {
  background-color: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  color: var(--cmpx-danger);
}

.cmpx-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cmpx-modal-imagen-container {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border: 2px solid var(--cmpx-border);
}

.cmpx-modal-imagen {
  width: 100%;
  height: auto;
  display: block;
}

.cmpx-modal-estado-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
}

.cmpx-modal-estado-label {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--cmpx-text-secondary);
  font-weight: 500;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-modal-badge {
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-modal-badge-pendiente {
  background-color: rgba(243, 156, 18, 0.2);
  color: #f39c12;
  color: var(--cmpx-warning);
  border: 1px solid #f39c12;
  border: 1px solid var(--cmpx-warning);
}

.cmpx-modal-badge-proceso {
  background-color: rgba(52, 152, 219, 0.2);
  color: #3498db;
  color: var(--cmpx-info);
  border: 1px solid #3498db;
  border: 1px solid var(--cmpx-info);
}

.cmpx-modal-badge-entregado {
  background-color: rgba(39, 174, 96, 0.2);
  color: #27ae60;
  color: var(--cmpx-success);
  border: 1px solid #27ae60;
  border: 1px solid var(--cmpx-success);
}

.cmpx-modal-badge-completado {
  background-color: rgba(39, 174, 96, 0.3);
  color: #27ae60;
  color: var(--cmpx-success);
  border: 1px solid #27ae60;
  border: 1px solid var(--cmpx-success);
}

.cmpx-modal-badge-cancelado {
  background-color: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  color: var(--cmpx-danger);
  border: 1px solid #e74c3c;
  border: 1px solid var(--cmpx-danger);
}

.cmpx-modal-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cmpx-modal-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #d4af37;
  color: var(--cmpx-gold);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cmpx-modal-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.cmpx-modal-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cmpx-modal-label {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--cmpx-text-secondary);
  font-weight: 500;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-modal-value {
  font-size: 16px;
  color: #e9ecef;
  color: var(--cmpx-text-primary);
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-modal-value-small {
  font-size: 14px;
  color: #e9ecef;
  color: var(--cmpx-text-primary);
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-modal-value-tachado {
  font-size: 15px;
  color: #b7bcc4;
  color: var(--cmpx-text-secondary);
  text-decoration: line-through;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-modal-value-descuento {
  font-size: 16px;
  color: #e74c3c;
  color: var(--cmpx-danger);
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-modal-label-total {
  font-size: 15px;
  color: #d4af37;
  color: var(--cmpx-gold);
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
}

.cmpx-modal-value-total {
  font-size: 24px;
  color: #d4af37;
  color: var(--cmpx-gold);
  font-weight: 900;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-modal-id {
  background-color: rgba(255, 255, 255, 0.03);
  padding: 16px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cmpx-modal-id-label {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--cmpx-text-secondary);
  font-weight: 500;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-modal-id-code {
  font-size: 13px;
  color: #d4af37;
  color: var(--cmpx-gold);
  font-family: 'Courier New', monospace;
  background-color: rgba(212, 175, 55, 0.1);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  word-break: break-all;
}

.cmpx-modal-footer {
  padding: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid var(--cmpx-border);
  display: flex;
  justify-content: flex-end;
}

.cmpx-modal-btn-cerrar {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--cmpx-gold), var(--cmpx-gold-light));
  color: #0a0a0a;
  color: var(--cmpx-bg-primary);
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.cmpx-modal-btn-cerrar:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
}

/* ============================================ */
/* LOADING */
/* ============================================ */
.cmpx-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--cmpx-bg-primary);
  gap: 20px;
}

.cmpx-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.1);
  border-top: 5px solid #d4af37;
  border-top: 5px solid var(--cmpx-gold);
  border-radius: 50%;
  animation: cmpx-spin 1s linear infinite;
}

@keyframes cmpx-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.cmpx-loading-text {
  color: #b7bcc4;
  color: var(--cmpx-text-secondary);
  font-size: 16px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

/* ============================================ */
/* SCROLLBAR */
/* ============================================ */
.cmpx-modal-content::-webkit-scrollbar {
  width: 8px;
}

.cmpx-modal-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.cmpx-modal-content::-webkit-scrollbar-thumb {
  background: #d4af37;
  background: var(--cmpx-gold);
  border-radius: 10px;
}

.cmpx-modal-content::-webkit-scrollbar-thumb:hover {
  background: #f0d574;
  background: var(--cmpx-gold-light);
}

/* ============================================ */
/* RESPONSIVE - TABLETS */
/* ============================================ */
@media (max-width: 1024px) {
  .cmpx-pedidos-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }

  .cmpx-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* ============================================ */
/* RESPONSIVE - MOBILE */
/* ============================================ */
@media (max-width: 768px) {
  .cmpx-header-content {
    flex-wrap: wrap;
    gap: 12px;
  }

  .cmpx-header-center {
    order: -1;
    width: 100%;
    justify-content: flex-start;
  }

  .cmpx-logo {
    font-size: 18px;
  }

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

  .cmpx-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cmpx-filter-buttons {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
  }

  .cmpx-filter-button {
    white-space: nowrap;
  }

  .cmpx-pedidos-grid {
    grid-template-columns: 1fr;
  }

  .cmpx-pedido-content {
    flex-direction: column;
  }

  .cmpx-pedido-imagen {
    width: 100%;
    height: 200px;
  }

  .cmpx-pedido-actions {
    flex-direction: column;
  }

  .cmpx-modal-content {
    max-width: 95%;
    margin: 20px;
  }

  .cmpx-modal-info-grid {
    grid-template-columns: 1fr;
  }

  .cmpx-pedido-timeline {
    overflow-x: auto;
    padding: 16px 8px;
  }

  .cmpx-timeline-label {
    font-size: 10px;
  }
}

/* ============================================ */
/* ANIMACIONES */
/* ============================================ */
@keyframes cmpx-fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cmpx-pedido-card {
  animation: cmpx-fadeIn 0.3s ease-out;
}

/* ============================================ */
/* UTILITIES */
/* ============================================ */
.cmpx-text-center {
  text-align: center;
}

.cmpx-mt-2 {
  margin-top: 16px;
}

.cmpx-mb-2 {
  margin-bottom: 16px;
}

/* ============================================ */
/* PRINT STYLES */
/* ============================================ */
@media print {
  .cmpx-header,
  .cmpx-filters-section,
  .cmpx-pedido-actions,
  .cmpx-notificacion {
    display: none !important;
  }

  .cmpx-pedido-card {
    page-break-inside: avoid;
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #000;
  }
}
/* src/pages/cliente/ChatPedido.css */
/* PREFIJO: ccpx- (Cliente Chat Pedido eXtended) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --ccpx-bg-primary: #0a0a0a;
  --ccpx-bg-secondary: #1a1a1a;
  --ccpx-bg-card: rgba(20, 20, 20, 0.95);
  --ccpx-gold: #d4af37;
  --ccpx-gold-light: #f0d574;
  --ccpx-text-primary: #e9ecef;
  --ccpx-text-secondary: #b7bcc4;
  --ccpx-border: rgba(255, 255, 255, 0.12);
  --ccpx-success: #27ae60;
  --ccpx-danger: #e74c3c;
  --ccpx-info: #3498db;
  --ccpx-cliente: #6366f1;
  --ccpx-vendedor: #374151;
  --ccpx-admin: #ef4444;
}

/* ============================================ */
/* CONTAINER */
/* ============================================ */
.ccpx-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--ccpx-bg-primary);
  font-family: 'Rajdhani', sans-serif;
  overflow: hidden;
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.ccpx-header {
  background-color: #1a1a1a;
  background-color: var(--ccpx-bg-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--ccpx-border);
  z-index: 100;
}

.ccpx-header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.ccpx-back-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--ccpx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--ccpx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ccpx-back-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateX(-2px);
}

.ccpx-header-center {
  flex: 1 1;
  display: flex;
  justify-content: center;
}

.ccpx-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ccpx-header-logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #d4af37;
  border: 2px solid var(--ccpx-gold);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.ccpx-header-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--ccpx-gold), var(--ccpx-gold-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  color: var(--ccpx-bg-primary);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.ccpx-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ccpx-header-title {
  font-size: 18px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--ccpx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.ccpx-header-subtitle {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--ccpx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.ccpx-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.ccpx-admin-badge {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  background: linear-gradient(135deg, var(--ccpx-admin), #dc2626);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* INFO DEL PEDIDO BAR */
/* ============================================ */
.ccpx-pedido-info-bar {
  background-color: #1a1a1a;
  background-color: var(--ccpx-bg-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--ccpx-border);
  padding: 16px 24px;
}

.ccpx-pedido-info-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.ccpx-pedido-imagen-wrapper {
  flex-shrink: 0;
}

.ccpx-pedido-imagen {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border: 2px solid var(--ccpx-border);
}

.ccpx-pedido-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b7bcc4;
  color: var(--ccpx-text-secondary);
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
}

.ccpx-pedido-info-label {
  font-weight: 500;
  color: #b7bcc4;
  color: var(--ccpx-text-secondary);
}

.ccpx-pedido-info-value {
  font-weight: 600;
  color: #e9ecef;
  color: var(--ccpx-text-primary);
}

.ccpx-pedido-info-price {
  font-weight: 700;
  color: #d4af37;
  color: var(--ccpx-gold);
  font-size: 16px;
}

.ccpx-pedido-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.ccpx-badge-pendiente {
  background-color: rgba(243, 156, 18, 0.2);
  color: #f39c12;
  border: 1px solid #f39c12;
}

.ccpx-badge-proceso {
  background-color: rgba(52, 152, 219, 0.2);
  color: #3498db;
  color: var(--ccpx-info);
  border: 1px solid #3498db;
  border: 1px solid var(--ccpx-info);
}

.ccpx-badge-entregado {
  background-color: rgba(39, 174, 96, 0.2);
  color: #27ae60;
  color: var(--ccpx-success);
  border: 1px solid #27ae60;
  border: 1px solid var(--ccpx-success);
}

.ccpx-badge-completado {
  background-color: rgba(39, 174, 96, 0.3);
  color: #27ae60;
  color: var(--ccpx-success);
  border: 1px solid #27ae60;
  border: 1px solid var(--ccpx-success);
}

.ccpx-badge-cancelado {
  background-color: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  color: var(--ccpx-danger);
  border: 1px solid #e74c3c;
  border: 1px solid var(--ccpx-danger);
}

/* ============================================ */
/* CHAT CONTAINER */
/* ============================================ */
.ccpx-chat-container {
  flex: 1 1;
  overflow-y: auto;
  background: linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 100%);
  background: linear-gradient(180deg, var(--ccpx-bg-primary) 0%, #0f0f0f 100%);
  padding: 24px;
}

.ccpx-mensajes-lista {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* ============================================ */
/* EMPTY CHAT */
/* ============================================ */
.ccpx-empty-chat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  color: #b7bcc4;
  color: var(--ccpx-text-secondary);
}

.ccpx-empty-chat svg {
  opacity: 0.3;
  margin-bottom: 16px;
}

.ccpx-empty-title {
  font-size: 22px;
  font-weight: 600;
  color: #e9ecef;
  color: var(--ccpx-text-primary);
  margin: 0 0 8px 0;
  font-family: 'Rajdhani', sans-serif;
}

.ccpx-empty-text {
  font-size: 15px;
  color: #b7bcc4;
  color: var(--ccpx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* MENSAJES */
/* ============================================ */
.ccpx-mensaje-wrapper {
  display: flex;
  margin: 15px 0;
  align-items: flex-end;
  gap: 10px;
  animation: ccpx-fadeIn 0.3s ease-out;
}

.ccpx-mensaje-mio {
  justify-content: flex-end;
}

.ccpx-mensaje-otro {
  justify-content: flex-start;
}

.ccpx-mensaje-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.ccpx-avatar-vendedor {
  background-color: #374151;
  background-color: var(--ccpx-vendedor);
}

.ccpx-avatar-admin {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  background: linear-gradient(135deg, var(--ccpx-admin), #dc2626);
}

.ccpx-avatar-imagen {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.ccpx-mensaje-content {
  max-width: 65%;
  display: flex;
  flex-direction: column;
}

.ccpx-mensaje-mio .ccpx-mensaje-content {
  align-items: flex-end;
}

.ccpx-mensaje-otro .ccpx-mensaje-content {
  align-items: flex-start;
}

.ccpx-mensaje-nombre {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--ccpx-text-secondary);
  margin: 0 0 4px 12px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.ccpx-nombre-admin {
  color: #ef4444;
  color: var(--ccpx-admin);
}

.ccpx-mensaje-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  word-break: break-word;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ccpx-bubble-mio {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  background: linear-gradient(135deg, var(--ccpx-cliente), #4f46e5);
  color: white;
  border-bottom-right-radius: 4px;
}

.ccpx-bubble-vendedor {
  background-color: #374151;
  background-color: var(--ccpx-vendedor);
  color: white;
  border-bottom-left-radius: 4px;
}

.ccpx-bubble-admin {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  background: linear-gradient(135deg, var(--ccpx-admin), #dc2626);
  color: white;
  border-bottom-left-radius: 4px;
}

.ccpx-mensaje-texto {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

.ccpx-mensaje-fecha {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  text-align: right;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* INPUT CONTAINER */
/* ============================================ */
.ccpx-input-container {
  background-color: #1a1a1a;
  background-color: var(--ccpx-bg-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid var(--ccpx-border);
  padding: 16px 24px;
}

.ccpx-input-form {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
}

.ccpx-input-field {
  flex: 1 1;
  padding: 14px 20px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--ccpx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--ccpx-border);
  border-radius: 24px;
  color: #e9ecef;
  color: var(--ccpx-text-primary);
  font-size: 15px;
  font-family: 'Rajdhani', sans-serif;
  transition: all 0.3s ease;
}

.ccpx-input-field:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--ccpx-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.ccpx-input-field::placeholder {
  color: #b7bcc4;
  color: var(--ccpx-text-secondary);
}

.ccpx-input-field:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ccpx-send-button {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  background: linear-gradient(135deg, var(--ccpx-cliente), #4f46e5);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ccpx-send-button:hover:not(:disabled) {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.ccpx-send-button:disabled {
  background-color: #4b5563;
  cursor: not-allowed;
  opacity: 0.5;
}

.ccpx-send-admin {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  background: linear-gradient(135deg, var(--ccpx-admin), #dc2626);
}

.ccpx-send-admin:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.ccpx-send-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid white;
  border-radius: 50%;
  animation: ccpx-spin 0.8s linear infinite;
}

/* ============================================ */
/* NOTIFICACIÓN */
/* ============================================ */
.ccpx-notificacion {
  position: fixed;
  top: 24px;
  right: 24px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--ccpx-bg-card);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1000;
  min-width: 300px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--ccpx-border);
  animation: ccpx-slideIn 0.3s ease-out;
}

.ccpx-notificacion-contenido {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1;
  color: #e9ecef;
  color: var(--ccpx-text-primary);
  font-size: 14px;
  font-weight: 500;
  font-family: 'Rajdhani', sans-serif;
}

.ccpx-notificacion-success {
  border-left: 4px solid #27ae60;
  border-left: 4px solid var(--ccpx-success);
}

.ccpx-notificacion-success .ccpx-notificacion-contenido svg {
  color: #27ae60;
  color: var(--ccpx-success);
}

.ccpx-notificacion-error {
  border-left: 4px solid #e74c3c;
  border-left: 4px solid var(--ccpx-danger);
}

.ccpx-notificacion-error .ccpx-notificacion-contenido svg {
  color: #e74c3c;
  color: var(--ccpx-danger);
}

.ccpx-notificacion-info {
  border-left: 4px solid #3498db;
  border-left: 4px solid var(--ccpx-info);
}

.ccpx-notificacion-info .ccpx-notificacion-contenido svg {
  color: #3498db;
  color: var(--ccpx-info);
}

.ccpx-notificacion-cerrar {
  background: none;
  border: none;
  color: #b7bcc4;
  color: var(--ccpx-text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.ccpx-notificacion-cerrar:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--ccpx-text-primary);
}

/* ============================================ */
/* LOADING */
/* ============================================ */
.ccpx-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--ccpx-bg-primary);
  gap: 20px;
}

.ccpx-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.1);
  border-top: 5px solid #d4af37;
  border-top: 5px solid var(--ccpx-gold);
  border-radius: 50%;
  animation: ccpx-spin 1s linear infinite;
}

.ccpx-loading-text {
  color: #b7bcc4;
  color: var(--ccpx-text-secondary);
  font-size: 16px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

/* ============================================ */
/* ERROR */
/* ============================================ */
.ccpx-error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--ccpx-bg-primary);
  padding: 40px 20px;
  text-align: center;
}

.ccpx-error-icon {
  color: #e74c3c;
  color: var(--ccpx-danger);
  margin-bottom: 24px;
  opacity: 0.8;
}

.ccpx-error-title {
  font-size: 28px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--ccpx-text-primary);
  margin: 0 0 12px 0;
  font-family: 'Rajdhani', sans-serif;
}

.ccpx-error-text {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--ccpx-text-secondary);
  margin: 0 0 32px 0;
  font-family: 'Rajdhani', sans-serif;
}

.ccpx-error-button {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--ccpx-gold), var(--ccpx-gold-light));
  color: #0a0a0a;
  color: var(--ccpx-bg-primary);
  border: none;
  padding: 14px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.ccpx-error-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
}

/* ============================================ */
/* SCROLLBAR */
/* ============================================ */
.ccpx-chat-container::-webkit-scrollbar {
  width: 8px;
}

.ccpx-chat-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.ccpx-chat-container::-webkit-scrollbar-thumb {
  background: #d4af37;
  background: var(--ccpx-gold);
  border-radius: 10px;
}

.ccpx-chat-container::-webkit-scrollbar-thumb:hover {
  background: #f0d574;
  background: var(--ccpx-gold-light);
}

/* ============================================ */
/* ANIMACIONES */
/* ============================================ */
@keyframes ccpx-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

@keyframes ccpx-slideIn {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================ */
/* RESPONSIVE - TABLETS */
/* ============================================ */
@media (max-width: 1024px) {
  .ccpx-header-content {
    padding: 12px 16px;
  }

  .ccpx-pedido-info-content {
    padding: 12px 16px;
  }

  .ccpx-chat-container {
    padding: 16px;
  }

  .ccpx-mensaje-content {
    max-width: 75%;
  }
}

/* ============================================ */
/* RESPONSIVE - MOBILE */
/* ============================================ */
@media (max-width: 768px) {
  .ccpx-header-content {
    flex-wrap: wrap;
    gap: 12px;
  }

  .ccpx-header-center {
    order: -1;
    width: 100%;
    justify-content: flex-start;
  }

  .ccpx-header-title {
    font-size: 16px;
  }

  .ccpx-pedido-info-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .ccpx-mensaje-content {
    max-width: 85%;
  }

  .ccpx-notificacion {
    right: 12px;
    left: 12px;
    min-width: auto;
  }
}

/* ============================================ */
/* PRINT */
/* ============================================ */
@media print {
  .ccpx-header,
  .ccpx-input-container,
  .ccpx-notificacion {
    display: none !important;
  }

  .ccpx-chat-container {
    overflow: visible;
  }
}

/* ============================================ */
/* MENSAJES ESPECIALES - CREDENCIALES */
/* ============================================ */
.ccpx-mensaje-bubble.ccpx-mensaje-credenciales {
  padding: 20px;
  max-width: 500px;
  line-height: 1.8;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.ccpx-bubble-vendedor.ccpx-mensaje-credenciales {
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
  border-color: #d4af37;
  border-color: var(--ccpx-gold);
}

.ccpx-bubble-admin.ccpx-mensaje-credenciales {
  background: linear-gradient(135deg, #7c2d12 0%, #991b1b 100%);
  border-color: #fbbf24;
}

/* ============================================ */
/* FORMATO DE TEXTO EN MENSAJES */
/* ============================================ */
.ccpx-mensaje-texto {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Títulos en mensajes (líneas con ✅, 🔐, ⚠️, etc.) */
.ccpx-mensaje-texto strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin: 12px 0 8px 0;
  color: #f0d574;
  color: var(--ccpx-gold-light);
  letter-spacing: 0.5px;
}

/* Primera línea destacada */
.ccpx-mensaje-bubble-vendedor .ccpx-mensaje-texto strong:first-child,
.ccpx-mensaje-bubble-admin .ccpx-mensaje-texto strong:first-child {
  font-size: 18px;
  color: #fbbf24;
  text-align: center;
  margin-top: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* ============================================ */
/* SECCIONES DENTRO DE MENSAJES */
/* ============================================ */
.ccpx-mensaje-seccion-titulo {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #d4af37;
  color: var(--ccpx-gold);
  margin: 16px 0 8px 0;
  padding: 8px 12px;
  background-color: rgba(212, 175, 55, 0.15);
  border-left: 3px solid #d4af37;
  border-left: 3px solid var(--ccpx-gold);
  border-radius: 4px;
}

/* ============================================ */
/* LISTAS EN MENSAJES */
/* ============================================ */
.ccpx-mensaje-lista {
  margin: 12px 0;
  padding-left: 0;
  list-style: none;
}

.ccpx-mensaje-lista-item {
  padding: 8px 12px;
  margin: 6px 0;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border-left: 3px solid rgba(255, 255, 255, 0.3);
  font-size: 14px;
  line-height: 1.6;
}

/* ============================================ */
/* DATOS DESTACADOS (Email, URL, etc.) */
/* ============================================ */
.ccpx-mensaje-dato-importante {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #fbbf24;
  margin: 4px 0;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

/* ============================================ */
/* EMOJIS MÁS GRANDES */
/* ============================================ */
.ccpx-emoji-grande {
  font-size: 24px;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

/* ============================================ */
/* ADVERTENCIAS EN MENSAJES */
/* ============================================ */
.ccpx-mensaje-advertencia {
  display: block;
  margin-top: 16px;
  padding: 12px 16px;
  background-color: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-left: 4px solid #e74c3c;
  border-left: 4px solid var(--ccpx-danger);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.7;
}

/* ============================================ */
/* MENSAJES CON MÚLTIPLES SECCIONES */
/* ============================================ */
.ccpx-mensaje-bubble.ccpx-mensaje-largo {
  padding: 24px;
}

.ccpx-mensaje-separador {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  margin: 16px 0;
}

/* ============================================ */
/* INFORMACIÓN DE CREDENCIALES */
/* ============================================ */
.ccpx-credencial-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 6px 0;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  font-size: 14px;
}

.ccpx-credencial-label {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  min-width: 80px;
}

.ccpx-credencial-valor {
  color: #f0d574;
  color: var(--ccpx-gold-light);
  font-weight: 700;
  font-family: 'Courier New', monospace;
}

/* ============================================ */
/* INSTRUCCIONES NUMERADAS */
/* ============================================ */
.ccpx-instruccion-item {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  margin: 8px 0;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  align-items: flex-start;
}

.ccpx-instruccion-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--ccpx-gold), var(--ccpx-gold-light));
  color: #0a0a0a;
  color: var(--ccpx-bg-primary);
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.ccpx-instruccion-texto {
  flex: 1 1;
  padding-top: 4px;
  line-height: 1.6;
}

/* ============================================ */
/* ENLACES EN MENSAJES */
/* ============================================ */
.ccpx-mensaje-link {
  color: #60a5fa;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.3s ease;
}

.ccpx-mensaje-link:hover {
  color: #93c5fd;
}

/* ============================================ */
/* GARANTÍA Y EXPIRACIÓN */
/* ============================================ */
.ccpx-mensaje-garantia {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 16px;
  background-color: rgba(39, 174, 96, 0.15);
  border: 1px solid rgba(39, 174, 96, 0.3);
  border-left: 4px solid #27ae60;
  border-left: 4px solid var(--ccpx-success);
  border-radius: 8px;
}

.ccpx-mensaje-expiracion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-top: 12px;
  background-color: rgba(251, 191, 36, 0.2);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 8px;
  font-weight: 700;
  color: #fbbf24;
}

/* ============================================ */
/* FORMATO ESPECIAL PARA MENSAJES DEL VENDEDOR */
/* ============================================ */
.ccpx-bubble-vendedor .ccpx-mensaje-texto,
.ccpx-bubble-admin .ccpx-mensaje-texto {
  font-size: 14px;
}

/* Hacer más legible el texto en burbujas oscuras */
.ccpx-bubble-vendedor,
.ccpx-bubble-admin {
  color: rgba(255, 255, 255, 0.95);
}

/* ============================================ */
/* MEJORA DE ESPACIADO */
/* ============================================ */
.ccpx-mensaje-bubble p {
  margin: 8px 0;
}

.ccpx-mensaje-bubble p:first-child {
  margin-top: 0;
}

.ccpx-mensaje-bubble p:last-child {
  margin-bottom: 0;
}

/* ============================================ */
/* COPIAR TEXTO */
/* ============================================ */
.ccpx-copiable {
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ccpx-copiable:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.ccpx-copiable::after {
  content: '📋';
  position: absolute;
  right: -24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ccpx-copiable:hover::after {
  opacity: 0.7;
}

/* ============================================ */
/* RESPONSIVE PARA MENSAJES LARGOS */
/* ============================================ */
@media (max-width: 768px) {
  .ccpx-mensaje-bubble.ccpx-mensaje-credenciales {
    padding: 16px;
    max-width: 90%;
  }

  .ccpx-credencial-label {
    min-width: 70px;
    font-size: 13px;
  }

  .ccpx-credencial-valor {
    font-size: 13px;
  }

  .ccpx-mensaje-texto strong:first-child {
    font-size: 16px;
  }
}

/* ============================================ */
/* ANIMACIÓN PARA MENSAJES IMPORTANTES */
/* ============================================ */
@keyframes ccpx-pulso-suave {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
  }
}

.ccpx-mensaje-bubble.ccpx-mensaje-credenciales {
  animation: ccpx-pulso-suave 3s ease-in-out infinite;
}

/* ============================================ */
/* MEJORA DE CONTRASTE */
/* ============================================ */
.ccpx-bubble-vendedor .ccpx-mensaje-fecha,
.ccpx-bubble-admin .ccpx-mensaje-fecha {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

/* src/pages/cliente/MiPerfil.css */
/* PREFIJO: mp- (Mi Perfil) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --mp-bg-primary: #0a0a0a;
  --mp-bg-secondary: rgba(10, 10, 10, 0.95);
  --mp-bg-card: rgba(20, 20, 20, 0.95);
  --mp-gold: #d4af37;
  --mp-gold-light: #f0d574;
  --mp-text-primary: #e9ecef;
  --mp-text-secondary: #b7bcc4;
  --mp-border: rgba(255, 255, 255, 0.12);
  --mp-success: #27ae60;
  --mp-warning: #f39c12;
  --mp-danger: #e74c3c;
  --mp-info: #3498db;
}

/* ============================================ */
/* RESET & BASE */
/* ============================================ */
.mp-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--mp-bg-primary);
  font-family: 'Rajdhani', sans-serif;
}

.mp-container * {
  box-sizing: border-box;
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.mp-header {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--mp-bg-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--mp-border);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.mp-header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.mp-header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.mp-back-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--mp-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--mp-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mp-back-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateX(-2px);
}

.mp-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mp-logo-image {
  width: 45px;
  height: 45px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid #d4af37;
  border: 2px solid var(--mp-gold);
}

.mp-logo-text {
  font-size: 20px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--mp-text-primary);
  font-family: 'Orbitron', monospace;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--mp-gold), var(--mp-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mp-header-right {
  display: flex;
  gap: 12px;
}

.mp-nav-button {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--mp-gold), var(--mp-gold-light));
  color: #0a0a0a;
  color: var(--mp-bg-primary);
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mp-nav-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

/* ============================================ */
/* MAIN */
/* ============================================ */
.mp-main {
  padding: 40px 24px;
}

.mp-main-content {
  max-width: 1200px;
  margin: 0 auto;
}

/* ============================================ */
/* TITLE SECTION */
/* ============================================ */
.mp-title-section {
  margin-bottom: 32px;
}

.mp-title-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mp-title-icon {
  color: #d4af37;
  color: var(--mp-gold);
}

.mp-title {
  font-size: 32px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--mp-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
}

.mp-subtitle {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--mp-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* MENSAJES */
/* ============================================ */
.mp-mensaje {
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  animation: slideDown 0.3s ease-out;
}

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

.mp-mensaje-success {
  background-color: rgba(39, 174, 96, 0.15);
  color: #27ae60;
  color: var(--mp-success);
  border: 1px solid rgba(39, 174, 96, 0.3);
}

.mp-mensaje-error {
  background-color: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  color: var(--mp-danger);
  border: 1px solid rgba(231, 76, 60, 0.3);
}

/* ============================================ */
/* CARDS CONTAINER */
/* ============================================ */
.mp-cards-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 24px;
  gap: 24px;
}

/* ============================================ */
/* CARD */
/* ============================================ */
.mp-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--mp-bg-card);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--mp-border);
  transition: all 0.3s ease;
}

.mp-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
}

.mp-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--mp-border);
}

.mp-card-title-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d4af37;
  color: var(--mp-gold);
}

.mp-card-title {
  font-size: 22px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--mp-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.mp-edit-button {
  background-color: rgba(212, 175, 55, 0.15);
  color: #d4af37;
  color: var(--mp-gold);
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mp-edit-button:hover {
  background-color: rgba(212, 175, 55, 0.25);
  transform: translateY(-2px);
}

/* ============================================ */
/* FORM */
/* ============================================ */
.mp-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mp-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mp-label {
  font-size: 14px;
  font-weight: 600;
  color: #e9ecef;
  color: var(--mp-text-primary);
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mp-input {
  padding: 14px 16px;
  font-size: 15px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border: 2px solid var(--mp-border);
  border-radius: 10px;
  outline: none;
  transition: all 0.3s ease;
  background-color: rgba(255, 255, 255, 0.05);
  color: #e9ecef;
  color: var(--mp-text-primary);
  font-family: 'Rajdhani', sans-serif;
}

.mp-input:focus {
  border-color: #d4af37;
  border-color: var(--mp-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
  background-color: rgba(255, 255, 255, 0.08);
}

.mp-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: rgba(255, 255, 255, 0.02);
}

.mp-input-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: rgba(255, 255, 255, 0.02);
}

.mp-hint {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--mp-text-secondary);
  font-family: 'Rajdhani', sans-serif;
  margin-top: -4px;
}

/* ============================================ */
/* PASSWORD WRAPPER */
/* ============================================ */
.mp-password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.mp-password-wrapper .mp-input {
  padding-right: 48px;
  width: 100%;
}

.mp-password-toggle {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #b7bcc4;
  color: var(--mp-text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.mp-password-toggle:hover {
  color: #d4af37;
  color: var(--mp-gold);
}

/* ============================================ */
/* ROLE BADGE */
/* ============================================ */
.mp-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background-color: rgba(212, 175, 55, 0.15);
  color: #d4af37;
  color: var(--mp-gold);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

/* ============================================ */
/* BUTTON GROUP */
/* ============================================ */
.mp-button-group {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.mp-save-button {
  flex: 1 1;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--mp-gold), var(--mp-gold-light));
  color: #0a0a0a;
  color: var(--mp-bg-primary);
  border: none;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mp-save-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.mp-save-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.mp-cancel-button {
  flex: 1 1;
  background-color: transparent;
  color: #e9ecef;
  color: var(--mp-text-primary);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border: 2px solid var(--mp-border);
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mp-cancel-button:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: #e9ecef;
  border-color: var(--mp-text-primary);
}

.mp-cancel-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================ */
/* PASSWORD INFO */
/* ============================================ */
.mp-password-info {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--mp-text-secondary);
  line-height: 1.6;
  margin: 0;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border-left: 3px solid #d4af37;
  border-left: 3px solid var(--mp-gold);
}

/* ============================================ */
/* INFO LIST */
/* ============================================ */
.mp-info-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mp-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--mp-border);
  transition: all 0.3s ease;
}

.mp-info-item:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.mp-info-label {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--mp-text-secondary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mp-info-value {
  font-size: 15px;
  color: #e9ecef;
  color: var(--mp-text-primary);
  font-weight: 600;
}

.mp-info-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}

.mp-badge-success {
  background-color: rgba(39, 174, 96, 0.15);
  color: #27ae60;
  color: var(--mp-success);
  border: 1px solid rgba(39, 174, 96, 0.3);
}

.mp-badge-warning {
  background-color: rgba(243, 156, 18, 0.15);
  color: #f39c12;
  color: var(--mp-warning);
  border: 1px solid rgba(243, 156, 18, 0.3);
}

.mp-badge-error {
  background-color: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  color: var(--mp-danger);
  border: 1px solid rgba(231, 76, 60, 0.3);
}

/* ============================================ */
/* LOGOUT CARD */
/* ============================================ */
.mp-card-logout {
  border: 1px solid rgba(231, 76, 60, 0.3);
}

.mp-logout-info {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--mp-text-secondary);
  line-height: 1.6;
  margin: 0 0 20px 0;
  padding: 16px;
  background-color: rgba(231, 76, 60, 0.05);
  border-radius: 8px;
  border-left: 3px solid #e74c3c;
  border-left: 3px solid var(--mp-danger);
}

.mp-logout-button {
  width: 100%;
  background-color: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  color: var(--mp-danger);
  border: 2px solid rgba(231, 76, 60, 0.3);
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.mp-logout-button:hover {
  background-color: rgba(231, 76, 60, 0.25);
  border-color: #e74c3c;
  border-color: var(--mp-danger);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

/* ============================================ */
/* ANIMACIONES */
/* ============================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mp-card {
  animation: fadeIn 0.4s ease-out;
}

.mp-card:nth-child(1) {
  animation-delay: 0.05s;
}

.mp-card:nth-child(2) {
  animation-delay: 0.1s;
}

.mp-card:nth-child(3) {
  animation-delay: 0.15s;
}

.mp-card:nth-child(4) {
  animation-delay: 0.2s;
}

/* ============================================ */
/* SCROLLBAR */
/* ============================================ */
.mp-container::-webkit-scrollbar {
  width: 10px;
}

.mp-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.mp-container::-webkit-scrollbar-thumb {
  background: #d4af37;
  background: var(--mp-gold);
  border-radius: 10px;
}

.mp-container::-webkit-scrollbar-thumb:hover {
  background: #f0d574;
  background: var(--mp-gold-light);
}

/* src/pages/cliente/Billetera.css */
/* PREFIJO: cbwx- (Cliente Billetera Wallet eXtended) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --cbwx-bg-primary: #0a0a0a;
  --cbwx-bg-secondary: rgba(10, 10, 10, 0.95);
  --cbwx-bg-card: rgba(20, 20, 20, 0.95);
  --cbwx-gold: #d4af37;
  --cbwx-gold-light: #f0d574;
  --cbwx-text-primary: #e9ecef;
  --cbwx-text-secondary: #b7bcc4;
  --cbwx-border: rgba(255, 255, 255, 0.12);
  --cbwx-success: #27ae60;
  --cbwx-danger: #e74c3c;
  --cbwx-info: #3498db;
  --cbwx-warning: #f39c12;
}

/* ============================================ */
/* RESET & BASE */
/* ============================================ */
.cbwx-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--cbwx-bg-primary);
  font-family: 'Rajdhani', sans-serif;
}

.cbwx-container * {
  box-sizing: border-box;
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.cbwx-header {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--cbwx-bg-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--cbwx-border);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.cbwx-header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cbwx-back-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--cbwx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cbwx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
}

.cbwx-back-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateX(-2px);
}

.cbwx-header-info {
  text-align: center;
}

.cbwx-header-title {
  font-size: 32px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--cbwx-text-primary);
  margin: 0 0 8px 0;
  font-family: 'Rajdhani', sans-serif;
}

.cbwx-header-subtitle {
  fontSize: 14px;
  color: #b7bcc4;
  color: var(--cbwx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* MAIN */
/* ============================================ */
.cbwx-main {
  padding: 40px 24px;
}

.cbwx-main-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ============================================ */
/* TARJETA DE SALDO PRINCIPAL */
/* ============================================ */
.cbwx-saldo-card {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
  borderRadius: 20px;
  padding: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(212, 175, 55, 0.3);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cbwx-saldo-header {
  display: flex;
  align-items: center;
  gap: 32px;
}

.cbwx-saldo-icon {
  width: 90px;
  height: 90px;
  border-radius: 20px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--cbwx-gold), var(--cbwx-gold-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  color: var(--cbwx-bg-primary);
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
}

.cbwx-saldo-info {
  flex: 1 1;
}

.cbwx-saldo-label {
  font-size: 16px;
  font-weight: 600;
  color: #b7bcc4;
  color: var(--cbwx-text-secondary);
  margin: 0 0 8px 0;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cbwx-saldo-amount {
  font-size: 56px;
  font-weight: bold;
  color: #d4af37;
  color: var(--cbwx-gold);
  margin: 0 0 8px 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1;
}

.cbwx-saldo-subtext {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--cbwx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.cbwx-saldo-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cbwx-btn-primary {
  flex: 1 1;
  min-width: 200px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--cbwx-gold), var(--cbwx-gold-light));
  color: #0a0a0a;
  color: var(--cbwx-bg-primary);
  border: none;
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cbwx-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.cbwx-btn-secondary {
  flex: 1 1;
  min-width: 200px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--cbwx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cbwx-border);
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cbwx-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* ============================================ */
/* ESTADÍSTICAS */
/* ============================================ */
.cbwx-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.cbwx-stat-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--cbwx-bg-card);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cbwx-border);
  transition: all 0.3s ease;
}

.cbwx-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
}

.cbwx-stat-icon {
  width: 55px;
  height: 55px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
}

.cbwx-stat-icon-recarga {
  background-color: #27ae60;
  background-color: var(--cbwx-success);
}

.cbwx-stat-icon-gastado {
  background-color: #e74c3c;
  background-color: var(--cbwx-danger);
}

.cbwx-stat-icon-reembolso {
  background-color: #3498db;
  background-color: var(--cbwx-info);
}

.cbwx-stat-content {
  flex: 1 1;
}

.cbwx-stat-label {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--cbwx-text-secondary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
}

.cbwx-stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--cbwx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* SECCIÓN */
/* ============================================ */
.cbwx-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cbwx-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cbwx-section-title {
  font-size: 24px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--cbwx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* FILTROS */
/* ============================================ */
.cbwx-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cbwx-filter-button {
  background-color: rgba(255, 255, 255, 0.05);
  color: #b7bcc4;
  color: var(--cbwx-text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cbwx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cbwx-filter-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #d4af37;
  border-color: var(--cbwx-gold);
}

.cbwx-filter-active {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--cbwx-gold), var(--cbwx-gold-light));
  color: #0a0a0a;
  color: var(--cbwx-bg-primary);
  border-color: #d4af37;
  border-color: var(--cbwx-gold);
  font-weight: 600;
}

/* ============================================ */
/* LISTA DE MOVIMIENTOS */
/* ============================================ */
.cbwx-movimientos-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cbwx-movimiento-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--cbwx-bg-card);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cbwx-border);
  transition: all 0.3s ease;
}

.cbwx-movimiento-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
  border-color: #d4af37;
  border-color: var(--cbwx-gold);
}

.cbwx-movimiento-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cbwx-movimiento-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cbwx-movimiento-tipo {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--cbwx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.cbwx-movimiento-descripcion {
  font-size: 16px;
  font-weight: 600;
  color: #e9ecef;
  color: var(--cbwx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.cbwx-movimiento-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.cbwx-movimiento-fecha,
.cbwx-movimiento-pedido,
.cbwx-movimiento-admin {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--cbwx-text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Rajdhani', sans-serif;
}

.cbwx-movimiento-pedido {
  color: #d4af37;
  color: var(--cbwx-gold);
}

.cbwx-movimiento-admin {
  color: #3498db;
  color: var(--cbwx-info);
}

.cbwx-movimiento-monto {
  display: flex;
  align-items: center;
}

.cbwx-monto-texto {
  font-size: 24px;
  font-weight: bold;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* EMPTY STATE */
/* ============================================ */
.cbwx-empty-state {
  text-align: center;
  padding: 80px 20px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--cbwx-bg-card);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cbwx-border);
}

.cbwx-empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
  color: #b7bcc4;
  color: var(--cbwx-text-secondary);
}

.cbwx-empty-title {
  font-size: 24px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--cbwx-text-primary);
  margin-bottom: 8px;
  font-family: 'Rajdhani', sans-serif;
}

.cbwx-empty-text {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--cbwx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* INFO CARD */
/* ============================================ */
.cbwx-info-card {
  background-color: rgba(52, 152, 219, 0.1);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid rgba(52, 152, 219, 0.3);
}

.cbwx-info-title {
  font-size: 18px;
  font-weight: bold;
  color: #3498db;
  color: var(--cbwx-info);
  margin-bottom: 16px;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cbwx-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cbwx-info-item {
  font-size: 14px;
  color: #e9ecef;
  color: var(--cbwx-text-primary);
  font-family: 'Rajdhani', sans-serif;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.cbwx-info-item svg {
  color: #27ae60;
  color: var(--cbwx-success);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================ */
/* LOADING */
/* ============================================ */
.cbwx-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--cbwx-bg-primary);
  gap: 20px;
}

.cbwx-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.1);
  border-top: 5px solid #d4af37;
  border-top: 5px solid var(--cbwx-gold);
  border-radius: 50%;
  animation: cbwx-spin 1s linear infinite;
}

@keyframes cbwx-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.cbwx-loading-text {
  color: #b7bcc4;
  color: var(--cbwx-text-secondary);
  font-size: 16px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

/* ============================================ */
/* RESPONSIVE - TABLETS */
/* ============================================ */
@media (max-width: 1024px) {
  .cbwx-saldo-header {
    flex-direction: column;
    text-align: center;
  }

  .cbwx-saldo-amount {
    font-size: 48px;
  }

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

/* ============================================ */
/* RESPONSIVE - MOBILE */
/* ============================================ */
@media (max-width: 768px) {
  .cbwx-header-title {
    font-size: 24px;
  }

  .cbwx-saldo-card {
    padding: 24px;
  }

  .cbwx-saldo-amount {
    font-size: 40px;
  }

  .cbwx-saldo-actions {
    flex-direction: column;
  }

  .cbwx-btn-primary,
  .cbwx-btn-secondary {
    min-width: 100%;
  }

  .cbwx-stats-grid {
    grid-template-columns: 1fr;
  }

  .cbwx-filter-buttons {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
  }

  .cbwx-filter-button {
    white-space: nowrap;
  }

  .cbwx-movimiento-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .cbwx-movimiento-monto {
    align-self: flex-end;
  }
}

/* ============================================ */
/* ANIMACIONES */
/* ============================================ */
@keyframes cbwx-fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cbwx-movimiento-card {
  animation: cbwx-fadeIn 0.3s ease-out;
}

/* ============================================ */
/* SCROLLBAR */
/* ============================================ */
.cbwx-movimientos-lista::-webkit-scrollbar {
  width: 8px;
}

.cbwx-movimientos-lista::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.cbwx-movimientos-lista::-webkit-scrollbar-thumb {
  background: #d4af37;
  background: var(--cbwx-gold);
  border-radius: 10px;
}

.cbwx-movimientos-lista::-webkit-scrollbar-thumb:hover {
  background: #f0d574;
  background: var(--cbwx-gold-light);
}
/* src/pages/cliente/MisCuentas.css */
/* PREFIJO: cmc- (Cliente Mis Cuentas) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES - DARK THEME */
/* ============================================ */
:root {
  --cmc-bg-primary: #0a0a0a;
  --cmc-bg-secondary: rgba(10, 10, 10, 0.95);
  --cmc-bg-card: rgba(20, 20, 20, 0.95);
  --cmc-gold: #d4af37;
  --cmc-gold-light: #f0d574;
  --cmc-text-primary: #e9ecef;
  --cmc-text-secondary: #b7bcc4;
  --cmc-border: rgba(255, 255, 255, 0.12);
  --cmc-success: #27ae60;
  --cmc-warning: #f39c12;
  --cmc-danger: #e74c3c;
  --cmc-info: #3498db;
  --cmc-purple: #9b59b6;
  --cmc-shadow: rgba(0, 0, 0, 0.5);
}

/* ============================================ */
/* RESET & BASE */
/* ============================================ */
.cmc-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--cmc-bg-primary);
  font-family: 'Rajdhani', sans-serif;
}

.cmc-container * {
  box-sizing: border-box;
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.cmc-header {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--cmc-bg-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 12px var(--cmc-shadow);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--cmc-border);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.cmc-header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.cmc-back-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--cmc-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cmc-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.cmc-back-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateX(-2px);
}

.cmc-header-center {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1;
  justify-content: center;
}

.cmc-header-logo {
  width: 45px;
  height: 45px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid #d4af37;
  border: 2px solid var(--cmc-gold);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.cmc-logo {
  font-size: 24px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--cmc-text-primary);
  margin: 0;
  font-family: 'Orbitron', monospace;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--cmc-gold), var(--cmc-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cmc-perfil-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--cmc-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cmc-border);
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cmc-perfil-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

/* ============================================ */
/* MAIN */
/* ============================================ */
.cmc-main {
  padding: 40px 24px;
}

.cmc-main-content {
  max-width: 1400px;
  margin: 0 auto;
}

/* ============================================ */
/* TITLE SECTION */
/* ============================================ */
.cmc-title-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 20px;
}

.cmc-title-wrapper {
  flex: 1 1;
  min-width: 250px;
}

.cmc-title {
  font-size: 32px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--cmc-text-primary);
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Rajdhani', sans-serif;
}

.cmc-subtitle {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--cmc-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.cmc-btn-explorar {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--cmc-gold), var(--cmc-gold-light));
  color: #0a0a0a;
  color: var(--cmc-bg-primary);
  border: none;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.cmc-btn-explorar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
}

/* ============================================ */
/* ESTADÍSTICAS */
/* ============================================ */
.cmc-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.cmc-stat-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--cmc-bg-card);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 12px var(--cmc-shadow);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cmc-border);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cmc-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cmc-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

.cmc-stat-card:hover::before {
  opacity: 1;
}

.cmc-stat-activo::before {
  background: linear-gradient(180deg, #27ae60, #2ecc71);
  background: linear-gradient(180deg, var(--cmc-success), #2ecc71);
}

.cmc-stat-por-vencer::before {
  background: linear-gradient(180deg, #f39c12, #f39c12);
  background: linear-gradient(180deg, var(--cmc-warning), #f39c12);
}

.cmc-stat-vencido::before {
  background: linear-gradient(180deg, #e74c3c, #c0392b);
  background: linear-gradient(180deg, var(--cmc-danger), #c0392b);
}

.cmc-stat-total::before {
  background: linear-gradient(180deg, #d4af37, #f0d574);
  background: linear-gradient(180deg, var(--cmc-gold), var(--cmc-gold-light));
}

.cmc-stat-icon-wrapper {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
}

.cmc-stat-activo .cmc-stat-icon-wrapper {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  background: linear-gradient(135deg, var(--cmc-success), #2ecc71);
}

.cmc-stat-por-vencer .cmc-stat-icon-wrapper {
  background: linear-gradient(135deg, #f39c12, #f39c12);
  background: linear-gradient(135deg, var(--cmc-warning), #f39c12);
}

.cmc-stat-vencido .cmc-stat-icon-wrapper {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  background: linear-gradient(135deg, var(--cmc-danger), #c0392b);
}

.cmc-stat-total .cmc-stat-icon-wrapper {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--cmc-gold), var(--cmc-gold-light));
}

.cmc-stat-info {
  flex: 1 1;
}

.cmc-stat-value {
  font-size: 36px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--cmc-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1;
}

.cmc-stat-label {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--cmc-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================ */
/* CONTROLS SECTION (BÚSQUEDA Y FILTROS) */
/* ============================================ */
.cmc-controls-section {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cmc-search-box {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
}

.cmc-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #b7bcc4;
  color: var(--cmc-text-secondary);
}

.cmc-search-input {
  width: 100%;
  padding: 16px 50px 16px 50px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--cmc-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cmc-border);
  border-radius: 12px;
  color: #e9ecef;
  color: var(--cmc-text-primary);
  font-size: 15px;
  font-family: 'Rajdhani', sans-serif;
  transition: all 0.3s ease;
}

.cmc-search-input:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--cmc-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.cmc-search-input::placeholder {
  color: #b7bcc4;
  color: var(--cmc-text-secondary);
}

.cmc-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #b7bcc4;
  color: var(--cmc-text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cmc-search-clear:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e74c3c;
  color: var(--cmc-danger);
}

.cmc-filters-section {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.cmc-filter-btn {
  background-color: rgba(255, 255, 255, 0.05);
  color: #b7bcc4;
  color: var(--cmc-text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cmc-border);
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cmc-filter-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #d4af37;
  border-color: var(--cmc-gold);
  transform: translateY(-2px);
}

.cmc-filter-active {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--cmc-gold), var(--cmc-gold-light));
  color: #0a0a0a;
  color: var(--cmc-bg-primary);
  border-color: #d4af37;
  border-color: var(--cmc-gold);
  font-weight: 700;
}

/* ============================================ */
/* SERVICIOS GRID */
/* ============================================ */
.cmc-servicios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 28px;
  gap: 28px;
}

/* ============================================ */
/* SERVICIO CARD */
/* ============================================ */
.cmc-servicio-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--cmc-bg-card);
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 16px var(--cmc-shadow);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cmc-border);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: cmc-fadeIn 0.4s ease-out;
}

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

.cmc-servicio-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8);
}

.cmc-servicio-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  transition: opacity 0.3s ease;
}

.cmc-estado-activo::before {
  background: linear-gradient(90deg, #27ae60, #2ecc71);
  background: linear-gradient(90deg, var(--cmc-success), #2ecc71);
}

.cmc-estado-por-vencer::before {
  background: linear-gradient(90deg, #f39c12, #f39c12);
  background: linear-gradient(90deg, var(--cmc-warning), #f39c12);
  animation: cmc-pulse-gradient 2s infinite;
}

.cmc-estado-vencido::before {
  background: linear-gradient(90deg, #e74c3c, #c0392b);
  background: linear-gradient(90deg, var(--cmc-danger), #c0392b);
}

@keyframes cmc-pulse-gradient {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* ============================================ */
/* SERVICIO HEADER */
/* ============================================ */
.cmc-servicio-header {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--cmc-border);
}

.cmc-servicio-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1;
  min-width: 0;
}

.cmc-servicio-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 900;
  color: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  font-family: 'Orbitron', monospace;
  flex-shrink: 0;
}

.cmc-servicio-info-header {
  flex: 1 1;
  min-width: 0;
}

.cmc-servicio-nombre {
  font-size: 20px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--cmc-text-primary);
  margin: 0 0 8px 0;
  font-family: 'Rajdhani', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmc-servicio-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cmc-servicio-codigo,
.cmc-servicio-tipo,
.cmc-servicio-cantidad {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.cmc-servicio-codigo {
  background-color: rgba(212, 175, 55, 0.2);
  color: #d4af37;
  color: var(--cmc-gold);
  border: 1px solid rgba(212, 175, 55, 0.3);
  font-family: 'Courier New', monospace;
}

.cmc-servicio-tipo {
  background-color: rgba(52, 152, 219, 0.2);
  color: #3498db;
  color: var(--cmc-info);
  border: 1px solid rgba(52, 152, 219, 0.3);
}

.cmc-servicio-cantidad {
  background-color: rgba(155, 89, 182, 0.2);
  color: #9b59b6;
  color: var(--cmc-purple);
  border: 1px solid rgba(155, 89, 182, 0.3);
}

.cmc-servicio-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
}

.cmc-badge-activo {
  background-color: rgba(39, 174, 96, 0.2);
  color: #27ae60;
  color: var(--cmc-success);
  border: 1px solid #27ae60;
  border: 1px solid var(--cmc-success);
}

.cmc-badge-por-vencer {
  background-color: rgba(243, 156, 18, 0.2);
  color: #f39c12;
  color: var(--cmc-warning);
  border: 1px solid #f39c12;
  border: 1px solid var(--cmc-warning);
  animation: cmc-pulse-badge 2s infinite;
}

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

.cmc-badge-vencido {
  background-color: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  color: var(--cmc-danger);
  border: 1px solid #e74c3c;
  border: 1px solid var(--cmc-danger);
}

.cmc-badge-text {
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* ============================================ */
/* IMAGEN DEL SERVICIO */
/* ============================================ */
.cmc-servicio-imagen-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.03);
}

.cmc-servicio-imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.cmc-servicio-card:hover .cmc-servicio-imagen {
  transform: scale(1.05);
}

/* ============================================ */
/* FECHAS */
/* ============================================ */
.cmc-servicio-fechas {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--cmc-border);
}

.cmc-fecha-item {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.cmc-fecha-item svg {
  color: #d4af37;
  color: var(--cmc-gold);
  flex-shrink: 0;
}

.cmc-fecha-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cmc-fecha-label {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--cmc-text-secondary);
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cmc-fecha-valor {
  font-size: 14px;
  color: #e9ecef;
  color: var(--cmc-text-primary);
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
}

.cmc-fecha-separador {
  width: 1px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.12);
  background-color: var(--cmc-border);
}

/* ============================================ */
/* DÍAS RESTANTES */
/* ============================================ */
.cmc-dias-restantes {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 0;
  font-family: 'Rajdhani', sans-serif;
}

.cmc-dias-activo {
  background: linear-gradient(135deg, rgba(39, 174, 96, 0.1) 0%, rgba(39, 174, 96, 0.05) 100%);
  border-bottom: 2px solid rgba(39, 174, 96, 0.3);
  color: #27ae60;
  color: var(--cmc-success);
}

.cmc-dias-por-vencer {
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.1) 0%, rgba(243, 156, 18, 0.05) 100%);
  border-bottom: 2px solid rgba(243, 156, 18, 0.3);
  color: #f39c12;
  color: var(--cmc-warning);
  animation: cmc-pulse-section 2s infinite;
}

@keyframes cmc-pulse-section {
  0%, 100% {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.1) 0%, rgba(243, 156, 18, 0.05) 100%);
  }
  50% {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.15) 0%, rgba(243, 156, 18, 0.08) 100%);
  }
}

.cmc-dias-vencido {
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, rgba(231, 76, 60, 0.05) 100%);
  border-bottom: 2px solid rgba(231, 76, 60, 0.3);
  color: #e74c3c;
  color: var(--cmc-danger);
}

.cmc-dias-restantes svg {
  flex-shrink: 0;
}

.cmc-dias-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1;
}

.cmc-dias-texto {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.cmc-dias-detalle {
  font-size: 14px;
  opacity: 0.9;
  font-weight: 600;
}

/* ============================================ */
/* CREDENCIALES SECTION */
/* ============================================ */
.cmc-credenciales-section {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--cmc-border);
}

.cmc-btn-toggle-credenciales {
  background: linear-gradient(135deg, #3498db, #5dade2);
  background: linear-gradient(135deg, var(--cmc-info), #5dade2);
  color: white;
  border: none;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.cmc-btn-toggle-credenciales:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
}

.cmc-credenciales-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: cmc-slideDown 0.4s ease-out;
}

@keyframes cmc-slideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    max-height: 2000px;
    transform: translateY(0);
  }
}

.cmc-credencial-block {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cmc-border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cmc-credencial-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #d4af37;
  color: var(--cmc-gold);
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--cmc-border);
}

.cmc-credencial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.cmc-credencial-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cmc-field-full {
  grid-column: 1 / -1;
}

.cmc-field-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #b7bcc4;
  color: var(--cmc-text-secondary);
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cmc-field-header svg {
  color: #d4af37;
  color: var(--cmc-gold);
}

.cmc-field-label {
  font-size: 13px;
}

.cmc-field-valor-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cmc-border);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.cmc-field-valor-container:hover {
  border-color: #d4af37;
  border-color: var(--cmc-gold);
  background-color: rgba(255, 255, 255, 0.08);
}

.cmc-field-valor {
  flex: 1 1;
  font-size: 14px;
  color: #e9ecef;
  color: var(--cmc-text-primary);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmc-btn-copy {
  background-color: rgba(212, 175, 55, 0.2);
  color: #d4af37;
  color: var(--cmc-gold);
  border: 1px solid rgba(212, 175, 55, 0.3);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cmc-btn-copy:hover {
  background-color: #d4af37;
  background-color: var(--cmc-gold);
  color: #0a0a0a;
  color: var(--cmc-bg-primary);
  transform: scale(1.1);
}

.cmc-btn-copy.copiado {
  background-color: #27ae60;
  background-color: var(--cmc-success);
  color: white;
  border-color: #27ae60;
  border-color: var(--cmc-success);
}

.cmc-url-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 10px;
  color: #d4af37;
  color: var(--cmc-gold);
  text-decoration: none;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  transition: all 0.3s ease;
}

.cmc-url-link:hover {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--cmc-gold), var(--cmc-gold-light));
  color: #0a0a0a;
  color: var(--cmc-bg-primary);
  transform: translateX(4px);
}

.cmc-url-link span {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================ */
/* SERVICIO ACCIONES */
/* ============================================ */
.cmc-servicio-acciones {
  padding: 20px 24px;
  display: flex;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--cmc-border);
}

.cmc-btn-renovar,
.cmc-btn-comprar-nuevo,
.cmc-btn-detalles,
.cmc-btn-chat {
  flex: 1 1;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
}

.cmc-btn-renovar {
  flex: 2 1;
}

.cmc-btn-renovar.vencido {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  background: linear-gradient(135deg, var(--cmc-danger), #c0392b);
  color: white;
}

.cmc-btn-renovar.por-vencer {
  background: linear-gradient(135deg, #f39c12, #f39c12);
  background: linear-gradient(135deg, var(--cmc-warning), #f39c12);
  color: white;
  animation: cmc-pulse-btn 2s infinite;
}

@keyframes cmc-pulse-btn {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
  }
  50% {
    box-shadow: 0 6px 20px rgba(243, 156, 18, 0.6);
  }
}

.cmc-btn-renovar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.cmc-btn-renovar-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cmc-btn-renovar-precio {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 900;
}

.cmc-btn-comprar-nuevo {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--cmc-gold), var(--cmc-gold-light));
  color: #0a0a0a;
  color: var(--cmc-bg-primary);
}

.cmc-btn-comprar-nuevo:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
}

.cmc-btn-detalles {
  background-color: rgba(212, 175, 55, 0.2);
  color: #d4af37;
  color: var(--cmc-gold);
  border: 1px solid #d4af37;
  border: 1px solid var(--cmc-gold);
}

.cmc-btn-detalles:hover {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--cmc-gold), var(--cmc-gold-light));
  color: #0a0a0a;
  color: var(--cmc-bg-primary);
}

.cmc-btn-chat {
  background-color: rgba(52, 152, 219, 0.2);
  color: #3498db;
  color: var(--cmc-info);
  border: 1px solid #3498db;
  border: 1px solid var(--cmc-info);
}

.cmc-btn-chat:hover {
  background-color: #3498db;
  background-color: var(--cmc-info);
  color: white;
}

/* ============================================ */
/* SERVICIO FOOTER */
/* ============================================ */
.cmc-servicio-footer {
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  background-color: rgba(255, 255, 255, 0.02);
}

.cmc-servicio-footer-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #b7bcc4;
  color: var(--cmc-text-secondary);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
}

.cmc-servicio-footer-item svg {
  color: #d4af37;
  color: var(--cmc-gold);
  flex-shrink: 0;
}

.cmc-renovacion-disponible {
  color: #d4af37;
  color: var(--cmc-gold);
  background-color: rgba(212, 175, 55, 0.1);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

/* ============================================ */
/* EMPTY STATE */
/* ============================================ */
.cmc-empty-state {
  text-align: center;
  padding: 80px 20px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--cmc-bg-card);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--cmc-border);
}

.cmc-empty-icon {
  font-size: 80px;
  margin-bottom: 24px;
  opacity: 0.5;
  color: #b7bcc4;
  color: var(--cmc-text-secondary);
}

.cmc-empty-title {
  font-size: 28px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--cmc-text-primary);
  margin-bottom: 12px;
  font-family: 'Rajdhani', sans-serif;
}

.cmc-empty-text {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--cmc-text-secondary);
  margin: 0 0 32px 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1.6;
}

.cmc-empty-button {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--cmc-gold), var(--cmc-gold-light));
  color: #0a0a0a;
  color: var(--cmc-bg-primary);
  border: none;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.cmc-empty-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(212, 175, 55, 0.5);
}

/* ============================================ */
/* LOADING */
/* ============================================ */
.cmc-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--cmc-bg-primary);
  gap: 24px;
}

.cmc-spinner {
  width: 60px;
  height: 60px;
  border: 6px solid rgba(255, 255, 255, 0.1);
  border-top: 6px solid #d4af37;
  border-top: 6px solid var(--cmc-gold);
  border-radius: 50%;
  animation: cmc-spin 1s linear infinite;
}

@keyframes cmc-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.cmc-loading-text {
  color: #b7bcc4;
  color: var(--cmc-text-secondary);
  font-size: 18px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
}

/* ============================================ */
/* SCROLLBAR */
/* ============================================ */
.cmc-main::-webkit-scrollbar {
  width: 10px;
}

.cmc-main::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.cmc-main::-webkit-scrollbar-thumb {
  background: #d4af37;
  background: var(--cmc-gold);
  border-radius: 10px;
}

.cmc-main::-webkit-scrollbar-thumb:hover {
  background: #f0d574;
  background: var(--cmc-gold-light);
}

/* ============================================ */
/* UTILITIES */
/* ============================================ */
.cmc-text-center {
  text-align: center;
}

.cmc-mt-2 {
  margin-top: 16px;
}

.cmc-mb-2 {
  margin-bottom: 16px;
}

/* ============================================ */
/* RESPONSIVE - TABLETS */
/* ============================================ */
@media (max-width: 1024px) {
  .cmc-servicios-grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }

  .cmc-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================ */
/* RESPONSIVE - MOBILE */
/* ============================================ */
@media (max-width: 768px) {
  .cmc-header-content {
    flex-wrap: wrap;
    gap: 12px;
  }

  .cmc-header-center {
    order: -1;
    width: 100%;
    justify-content: flex-start;
  }

  .cmc-logo {
    font-size: 18px;
  }

  .cmc-title {
    font-size: 26px;
  }

  .cmc-title-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .cmc-btn-explorar {
    width: 100%;
  }

  .cmc-servicios-grid {
    grid-template-columns: 1fr;
  }

  .cmc-stats-grid {
    grid-template-columns: 1fr;
  }

  .cmc-filters-section {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 8px;
  }

  .cmc-filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .cmc-servicio-header {
    flex-direction: column;
    align-items: stretch;
  }

  .cmc-servicio-badge {
    width: 100%;
    justify-content: center;
  }

  .cmc-servicio-fechas {
    flex-direction: column;
    gap: 12px;
  }

  .cmc-fecha-separador {
    display: none;
  }

  .cmc-credencial-grid {
    grid-template-columns: 1fr;
  }

  .cmc-servicio-acciones {
    flex-direction: column;
  }

  .cmc-servicio-footer {
    flex-direction: column;
    gap: 10px;
  }
}

/* ============================================ */
/* PRINT STYLES */
/* ============================================ */
@media print {
  .cmc-header,
  .cmc-controls-section,
  .cmc-btn-explorar,
  .cmc-servicio-acciones {
    display: none !important;
  }

  .cmc-servicio-card {
    page-break-inside: avoid;
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #000;
  }
}

:root {
  --rs-bg-primary: #0a0a0a;
  --rs-bg-secondary: rgba(13, 13, 13, 0.97);
  --rs-bg-card: rgba(22, 22, 22, 0.97);
  --rs-text-primary: #e9ecef;
  --rs-text-secondary: #b7bcc4;
  --rs-gold: #d4af37;
  --rs-gold-light: #f0d574;
  --rs-green: #27ae60;
  --rs-red: #e50914;
  --rs-red-light: #ff1a25;
  --rs-blue: #4dd2ff;
  --rs-purple: #915cdd;
  --rs-border: rgba(255,255,255,0.09);
}

/* ----------- CONTENEDOR Y BASE -------------- */
.rs-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #101010 0%, #16151a 50%, #101010 100%);
  color: #e9ecef;
  color: var(--rs-text-primary);
  font-family: 'Rajdhani', 'Arial', sans-serif;
}

/* ----------- HEADER -------------- */
.rs-header {
  background: rgba(13, 13, 13, 0.97);
  background: var(--rs-bg-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.09);
  border-bottom: 1px solid var(--rs-border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
  padding: 18px 28px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.rs-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.rs-header-center {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rs-logo {
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--rs-gold), var(--rs-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.17);
}
.rs-header-logo {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 2px solid #d4af37;
  border: 2px solid var(--rs-gold);
  object-fit: cover;
  background: #181818;
}
.rs-back-button-header,
.rs-wallet-button {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.09);
  border: 1.5px solid var(--rs-border);
  color: #e9ecef;
  color: var(--rs-text-primary);
  border-radius: 10px;
  font-weight: 700;
  padding: 9px 20px;
  transition: all 0.3s;
  cursor: pointer;
}
.rs-back-button-header:hover,
.rs-wallet-button:hover {
  border-color: #d4af37;
  border-color: var(--rs-gold);
  color: #d4af37;
  color: var(--rs-gold);
}

/* ----------- MAIN -------------- */
.rs-main {
  max-width: 1260px;
  margin: 0 auto;
  padding: 36px 12px;
}
.rs-main-content {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* -------- SERVICIO ACTUAL -------- */
.rs-servicio-actual-card {
  background: rgba(22, 22, 22, 0.97);
  background: var(--rs-bg-card);
  border: 1px solid rgba(255,255,255,0.09);
  border: 1px solid var(--rs-border);
  border-radius: 14px;
  padding: 26px 28px;
}
.rs-servicio-actual-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d4af37;
  color: var(--rs-gold);
  font-size: 20px;
  font-weight: 700;
}
.rs-servicio-nombre {
  font-size: 22px;
  margin: 10px 0 0 0;
  font-weight: 700;
}
.rs-servicio-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 18px;
}
.rs-meta-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: #b7bcc4;
  color: var(--rs-text-secondary);
  font-size: 15px;
}
.rs-meta-estado {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 14px;
}
.rs-estado-activo { background: rgba(39, 174, 96, 0.12); color: #27ae60; color: var(--rs-green);}
.rs-estado-por-vencer { background: rgba(243,156,18,0.15); color: #d4af37; color: var(--rs-gold);}
.rs-estado-vencido { background: rgba(229,9,20,0.16); color: #e50914; color: var(--rs-red);}

/* -------- Credenciales -------- */
.rs-credenciales-resumen {
  margin-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.09);
  border-top: 1px solid var(--rs-border);
  padding-top: 11px;
}
.rs-credenciales-titulo {
  font-size: 15px;
  font-weight: 700;
  color: #4dd2ff;
  color: var(--rs-blue);
  margin-bottom: 6px;
}
.rs-credencial-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: rgba(255,255,255,0.045);
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.09);
  border: 1px solid var(--rs-border);
}
.rs-credencial-field {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #e9ecef;
  color: var(--rs-text-primary);
  font-size: 14px;
}
.rs-credenciales-mas {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--rs-text-secondary);
  margin-top: 3px;
}

/* -------- PRODUCT LAYOUT -------- */
.rs-product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 28px;
  gap: 28px;
}

/* -------- IMAGEN Y BADGES -------- */
.rs-image-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.rs-badges-container {
  position: absolute;
  top: 9px;
  left: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 1;
}
.rs-renovacion-badge {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--rs-gold), var(--rs-gold-light));
  color: #0a0a0a;
  padding: 6px 12px;
  border-radius: 7px;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.17);
}
.rs-code-badge {
  background: rgba(232,169,71,0.07);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  color: #d4af37;
  color: var(--rs-gold);
  font-weight: 700;
  border: 1px solid #d4af37;
  border: 1px solid var(--rs-gold);
}

.rs-image-wrapper {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.09);
  border: 1px solid var(--rs-border);
  overflow: hidden;
  background: #181818;
}
.rs-product-image {
  width: 100%;
  height: auto;
  min-height: 170px;
  background: #222;
  object-fit: cover;
  transition: all 0.4s;
}
.rs-product-image:hover { transform: scale(1.04); }

.rs-vendor-card {
  background: rgba(13, 13, 13, 0.97);
  background: var(--rs-bg-secondary);
  border: 1px solid rgba(255,255,255,0.09);
  border: 1px solid var(--rs-border);
  border-radius: 10px;
  padding: 11px 16px;
  margin-top: 10px;
}
.rs-vendor-header {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #b7bcc4;
  color: var(--rs-text-secondary);
  font-weight: 600;
  margin-bottom: 10px;
}
.rs-vendor-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rs-vendor-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #d4af37;
  border: 2px solid var(--rs-gold);
}
.rs-vendor-name {
  font-weight: 600;
  color: #e9ecef;
  color: var(--rs-text-primary);
  font-size: 15px;
}

/* -------- INFORMACIÓN -------- */
.rs-info-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rs-afiliado-badge {
  background: linear-gradient(135deg, #915cdd, #4dd2ff);
  background: linear-gradient(135deg, var(--rs-purple), var(--rs-blue));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 7px;
  padding: 8px 16px;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 7px;
}
.rs-product-name {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 4px;
}
.rs-product-details {
  color: #b7bcc4;
  color: var(--rs-text-secondary);
  line-height: 1.6;
  font-size: 14px;
}

/* -------- PRECIO -------- */
.rs-price-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  border: 1px solid var(--rs-border);
  border-radius: 9px;
  padding: 13px 18px;
}
.rs-price-row {
  display: flex;
  align-items: baseline;
  gap: 13px;
}
.rs-price-new {
  font-size: 26px;
  font-weight: 700;
  color: #d4af37;
  color: var(--rs-gold);
}
.rs-price-unit {
  color: #b7bcc4;
  color: var(--rs-text-secondary);
  font-size: 14px;
}
.rs-price-breakdown {
  margin-top: 6px;
  color: #4dd2ff;
  color: var(--rs-blue);
  font-size: 13px;
  font-weight: 700;
}
.rs-price-detail { margin-left: 2px; }

/* -------- DURACIÓN -------- */
.rs-duration-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rs-duration-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  margin-bottom: 2px;
}
.rs-duration-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
}
.rs-duration-option {
  background: rgba(255,255,255,0.057);
  padding: 13px;
  border-radius: 10px;
  border: 1.3px solid rgba(255,255,255,0.09);
  border: 1.3px solid var(--rs-border);
  cursor: pointer;
  transition: all 0.25s;
  font-size: 14px;
  font-weight: 600;
}
.rs-duration-option:hover {
  border-color: #d4af37;
  border-color: var(--rs-gold);
  background: rgba(212,175,55,0.05);
}
.rs-duration-active {
  border-color: #d4af37;
  border-color: var(--rs-gold);
  background: rgba(212,175,55,0.09);
}
.rs-duration-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
}
.rs-duration-meses {
  color: #e9ecef;
  color: var(--rs-text-primary);
  font-size: 16px;
}
.rs-duration-precio {
  font-weight: 700;
  color: #d4af37;
  color: var(--rs-gold);
}
.rs-duration-nueva-fecha {
  color: #b7bcc4;
  color: var(--rs-text-secondary);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.rs-duration-radio { display: none; }

/* -------- RESUMEN -------- */
.rs-summary-card {
  background: rgba(13, 13, 13, 0.97);
  background: var(--rs-bg-secondary);
  border: 1px solid rgba(255,255,255,0.09);
  border: 1px solid var(--rs-border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 0;
}
.rs-summary-title {
  font-weight: 700;
  color: #d4af37;
  color: var(--rs-gold);
  font-size: 17px;
  margin-bottom: 10px;
}
.rs-summary-row {
  display: flex;
  justify-content: space-between;
  margin: 3px 0;
  font-size: 15px;
}
.rs-summary-divider {
  height: 1.5px;
  background: rgba(255,255,255,0.09);
  background: var(--rs-border);
  margin: 8px 0;
  border-radius: 3px;
}
.rs-summary-label-total {
  font-weight: 700;
}
.rs-summary-value-total {
  color: #d4af37;
  color: var(--rs-gold);
  font-size: 19px;
  font-weight: 700;
}
.rs-summary-note {
  font-size: 13.5px;
  color: #4dd2ff;
  color: var(--rs-blue);
  margin-bottom: 0;
  margin-top: 10px;
}

/* -------- WALLET -------- */
.rs-wallet-card {
  border-radius: 10px;
  padding: 15px 16px;
  border: 2px solid;
  transition: all 0.3s;
  margin-bottom: 0;
}
.rs-wallet-success {
  border-color: rgba(39,174,96,0.4);
  background: rgba(39,174,96,0.13);
}
.rs-wallet-error {
  border-color: rgba(231,76,60,0.5);
  background: rgba(231,76,60,0.13);
}
.rs-wallet-row {
  display: flex;
  justify-content: space-between;
  margin: 3px 0;
  font-size: 14.5px;
}
.rs-wallet-label-bold {
  font-weight: 700;
}
.rs-wallet-value-bold {
  font-size: 18px;
  font-weight: 700;
}
.rs-wallet-divider {
  height: 1px;
  background: rgba(255,255,255,0.09);
  background: var(--rs-border);
  margin: 7px 0;
}
.rs-wallet-warning {
  text-align: center;
  color: #e50914;
  color: var(--rs-red);
  font-size: 14px;
  font-weight: 600;
  margin-top: 5px;
}

/* -------- ERROR MENSAJE -------- */
.rs-error-message {
  padding: 11px 16px;
  background: rgba(231, 76, 60, 0.12);
  border-radius: 9px;
  border: 1px solid rgba(231, 76, 60, 0.18);
  font-size: 14.5px;
  color: #e50914;
  color: var(--rs-red);
  font-weight: 700;
  margin: 6px 0;
}

/* -------- INFO BOTONES -------- */
.rs-info-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 0;
}
.rs-info-button {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.09);
  border: 1px solid var(--rs-border);
  color: #e9ecef;
  color: var(--rs-text-primary);
  font-weight: 700;
  border-radius: 8px;
  padding: 11px 15px;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.22s;
  font-size: 14px;
}
.rs-info-button:hover {
  border-color: #d4af37;
  border-color: var(--rs-gold);
  color: #d4af37;
  color: var(--rs-gold);
}

/* -------- BOTÓN PRINCIPAL -------- */
.rs-renovar-button {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--rs-gold), var(--rs-gold-light));
  color: #0a0a0a;
  padding: 15px 19px;
  font-weight: 800;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  font-size: 15.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.25);
  transition: all 0.25s;
}
.rs-renovar-button:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 9px 22px rgba(212, 175, 55, 0.37);
}
.rs-renovar-button-disabled {
  background: #666;
  cursor: not-allowed;
  color: #dedede;
  opacity: 0.7;
}
.rs-info-note {
  font-size: 14px;
  color: #4dd2ff;
  color: var(--rs-blue);
  margin-top: 7px;
  text-align: center;
}

/* -------- MODAL DE ÉXITO -------- */
.rs-modal-overlay-success {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  -webkit-backdrop-filter: blur(13px);
          backdrop-filter: blur(13px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeIn 0.32s;
}
.rs-modal-content-success {
  background: rgba(13, 13, 13, 0.97);
  background: var(--rs-bg-secondary);
  border: 1px solid rgba(255,255,255,0.09);
  border: 1px solid var(--rs-border);
  border-radius: 17px;
  padding: 40px 34px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  position: relative;
  animation: slideUp 0.36s;
}
.rs-modal-close-success {
  position: absolute;
  top: 15px;
  right: 16px;
  background: none;
  border: none;
  color: #b7bcc4;
  color: var(--rs-text-secondary);
  font-size: 22px;
  cursor: pointer;
  transition: all 0.2s;
}
.rs-modal-close-success:hover { color: #e50914; color: var(--rs-red); }
.rs-success-title {
  font-size: 25px;
  font-weight: 700;
  color: #d4af37;
  color: var(--rs-gold);
  margin: 7px 0 14px 0;
}
.rs-success-details {
  background: rgba(255,255,255,0.02);
  border-radius: 9px;
  padding: 15px 13px 8px 13px;
  margin-bottom: 19px;
  border: 1px solid rgba(255,255,255,0.09);
  border: 1px solid var(--rs-border);
}
.rs-success-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  font-size: 15px;
}
.rs-success-label-bold, .rs-success-value-bold { font-size: 17px; font-weight: 900; color: #d4af37; color: var(--rs-gold); }
.rs-success-divider {
  border-top: 1px solid #d4af37;
  border-top: 1px solid var(--rs-gold);
  margin: 13px 0;
}
.rs-success-buttons {
  display: flex;
  gap: 12px;
  margin: 18px 0 8px 0;
  justify-content: center;
}
.rs-success-button-primary {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  background: linear-gradient(135deg, var(--rs-green), #2ecc71);
  padding: 10px 19px;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 800;
  font-size: 15px;
  transition: all 0.2s;
}
.rs-success-button-secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.09);
  border: 1px solid var(--rs-border);
  color: #e9ecef;
  color: var(--rs-text-primary);
  border-radius: 10px;
  padding: 10px 19px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
}
.rs-success-button-secondary:hover { border-color: #d4af37; border-color: var(--rs-gold); color: #d4af37; color: var(--rs-gold); }
.rs-success-auto-redirect {
  font-size: 12.5px;
  color: #b7bcc4;
  color: var(--rs-text-secondary);
  margin-top: 8px;
}

/* -------- MODAL DE INFO -------- */
.rs-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1080;
}
.rs-modal-content {
  background: rgba(13, 13, 13, 0.97);
  background: var(--rs-bg-secondary);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.09);
  border: 1px solid var(--rs-border);
  max-width: 470px;
  width: 100%;
  box-shadow: 0 7px 46px rgba(0,0,0,0.6);
  animation: slideUp 0.32s;
}
.rs-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  border-bottom: 1px solid var(--rs-border);
}
.rs-modal-titulo {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}
.rs-modal-close {
  background: transparent;
  border: none;
  color: #e9ecef;
  color: var(--rs-text-primary);
  cursor: pointer;
  font-size: 23px;
  transition: all 0.19s;
}
.rs-modal-close:hover { color: #d4af37; color: var(--rs-gold); }
.rs-modal-body {
  padding: 22px;
  color: #b7bcc4;
  color: var(--rs-text-secondary);
}
.rs-modal-footer {
  padding: 13px 22px;
  border-top: 1px solid rgba(255,255,255,0.09);
  border-top: 1px solid var(--rs-border);
  text-align: right;
}
.rs-modal-button-cerrar {
  background: linear-gradient(135deg, #e50914, #ff1a25);
  background: linear-gradient(135deg, var(--rs-red), var(--rs-red-light));
  border: none;
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
}

/* -------- LOADING Y ERROR -------- */
.rs-loading-container,
.rs-error-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  gap: 19px;
}
.rs-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid #241a0a2a;
  border-top: 4px solid #d4af37;
  border-top: 4px solid var(--rs-gold);
  border-right: 4px solid #4dd2ff;
  border-right: 4px solid var(--rs-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.rs-error-icon {
  font-size: 48px;
  color: #e50914;
  color: var(--rs-red);
}
.rs-error-title {
  font-weight: 800;
  font-size: 20px;
  margin: 0;
}
.rs-back-button {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--rs-gold), var(--rs-gold-light));
  color: #000;
  border: none;
  font-weight: 700;
  padding: 11px 18px;
  border-radius: 8px;
  cursor: pointer;
}

/* -------- ANIMACIONES -------- */
@keyframes slideUp {
  from { transform: translateY(45px); opacity: 0;}
  to { transform: translateY(0); opacity: 1;}
}
@keyframes fadeIn {
  from { opacity: 0;}
  to { opacity: 1;}
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}


/* ============================================ */
/* 🆕 BADGE MAYORISTA/AFILIADO */
/* ============================================ */

/* Badge en el header del servicio actual */
.rs-badge-mayorista {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--cmc-gold), var(--cmc-gold-light));
  color: var(--cmc-bg-primary);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
  animation: rs-pulse-gold 2s infinite;
}

@keyframes rs-pulse-gold {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
  }
  50% {
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.6);
  }
}

/* Badge en la sección de info (desktop) */
.rs-afiliado-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(135deg, var(--cmc-gold), var(--cmc-gold-light));
  color: var(--cmc-bg-primary);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

/* ============================================ */
/* 🆕 ICONOS DE CATEGORÍA */
/* ============================================ */

/* Contenedor del nombre con icono en servicio actual */
.rs-servicio-nombre-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* Imagen del icono de categoría (pequeño) */
.rs-categoria-icono-img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--cmc-gold);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

/* Emoji del icono de categoría (pequeño) */
.rs-categoria-icono-emoji {
  font-size: 32px;
  flex-shrink: 0;
  line-height: 1;
}

/* Nombre del servicio (ajustado para tener icono) */
.rs-servicio-nombre {
  font-size: 20px;
  font-weight: 700;
  color: var(--cmc-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  flex: 1 1;
}

/* Contenedor del nombre del producto principal */
.rs-product-name-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

/* Imagen del icono de categoría (grande) */
.rs-product-categoria-icono-img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--cmc-gold);
  box-shadow: 0 3px 12px rgba(212, 175, 55, 0.4);
}

/* Emoji del icono de categoría (grande) */
.rs-product-categoria-icono-emoji {
  font-size: 48px;
  flex-shrink: 0;
  line-height: 1;
}

/* Nombre del producto (ajustado para tener icono) */
.rs-product-name {
  font-size: 28px;
  font-weight: bold;
  color: var(--cmc-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1.2;
  flex: 1 1;
}

/* ============================================ */
/* 📱 RESPONSIVE - MOBILE */
/* ============================================ */
@media (max-width: 768px) {
  /* Badge mayorista más pequeño en móvil */
  .rs-badge-mayorista {
    padding: 6px 12px;
    font-size: 11px;
    gap: 4px;
  }

  .rs-badge-mayorista svg {
    width: 14px;
    height: 14px;
  }

  .rs-afiliado-badge {
    padding: 10px 16px;
    font-size: 13px;
  }

  /* Iconos más pequeños en móvil */
  .rs-categoria-icono-img {
    width: 28px;
    height: 28px;
  }

  .rs-categoria-icono-emoji {
    font-size: 28px;
  }

  .rs-product-categoria-icono-img {
    width: 40px;
    height: 40px;
  }

  .rs-product-categoria-icono-emoji {
    font-size: 40px;
  }

  /* Nombres más pequeños */
  .rs-servicio-nombre {
    font-size: 18px;
  }

  .rs-product-name {
    font-size: 24px;
  }

  /* Contenedores ajustados */
  .rs-servicio-nombre-container,
  .rs-product-name-container {
    gap: 10px;
  }
}




/* src/pages/vendedor/CrearStock.css */
/* PREFIJO: vcsx- (Vendedor Crear Stock eXtended) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --vcsx-bg-primary: #0a0a0a;
  --vcsx-bg-secondary: rgba(10, 10, 10, 0.95);
  --vcsx-bg-card: rgba(20, 20, 20, 0.95);
  --vcsx-text-primary: #e9ecef;
  --vcsx-text-secondary: #b7bcc4;
  --vcsx-border: rgba(255, 255, 255, 0.12);
  --vcsx-success: #27ae60;
  --vcsx-warning: #f39c12;
  --vcsx-danger: #e74c3c;
  --vcsx-info: #3498db;
  --vcsx-gold: #d4af37;
  --vcsx-gold-light: #f0d574;
}

/* ============================================ */
/* RESET & BASE */
/* ============================================ */
.crear-stock-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--vcsx-bg-primary);
  font-family: 'Rajdhani', sans-serif;
}

.crear-stock-container * {
  box-sizing: border-box;
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.crear-stock-header {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--vcsx-bg-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--vcsx-border);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1800px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--vcsx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vcsx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.back-button:hover {
  background-color: rgba(212, 175, 55, 0.15);
  border-color: #d4af37;
  border-color: var(--vcsx-gold);
  color: #d4af37;
  color: var(--vcsx-gold);
  transform: translateY(-2px);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-image {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid #d4af37;
  border: 2px solid var(--vcsx-gold);
  transition: transform 0.3s ease;
}

.logo-image:hover {
  transform: scale(1.05);
}

.logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.logo-title {
  font-size: 18px;
  font-weight: 900;
  font-family: 'Orbitron', monospace;
  letter-spacing: 2px;
  margin: 0;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vcsx-gold), var(--vcsx-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.shop-name {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--vcsx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-button,
.logout-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--vcsx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vcsx-border);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.nav-button:hover {
  background-color: rgba(52, 152, 219, 0.15);
  border-color: #3498db;
  border-color: var(--vcsx-info);
  color: #3498db;
  color: var(--vcsx-info);
  transform: translateY(-2px);
}

.logout-button:hover {
  background-color: rgba(231, 76, 60, 0.15);
  border-color: #e74c3c;
  border-color: var(--vcsx-danger);
  color: #e74c3c;
  color: var(--vcsx-danger);
  transform: translateY(-2px);
}

/* ============================================ */
/* MAIN CONTENT */
/* ============================================ */
.crear-stock-main {
  padding: 40px 24px;
}

.crear-stock-content {
  max-width: 1000px;
  margin: 0 auto;
}

/* ============================================ */
/* TITLE SECTION */
/* ============================================ */
.title-section {
  margin-bottom: 32px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.page-title {
  font-size: 32px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--vcsx-text-primary);
  margin: 0 0 12px 0;
  font-family: 'Orbitron', monospace;
}

.page-subtitle {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--vcsx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* ERROR BOX */
/* ============================================ */
.error-box {
  background-color: rgba(231, 76, 60, 0.15);
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-left: 4px solid #e74c3c;
  border-left: 4px solid var(--vcsx-danger);
  color: #e74c3c;
  color: var(--vcsx-danger);
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* FORM */
/* ============================================ */
.crear-stock-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.form-section {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--vcsx-bg-card);
  border-radius: 16px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vcsx-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--vcsx-text-primary);
  margin: 0 0 24px 0;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================ */
/* INPUT GROUPS */
/* ============================================ */
.input-group {
  margin-bottom: 20px;
}

.input-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #e9ecef;
  color: var(--vcsx-text-primary);
  margin-bottom: 8px;
  font-family: 'Rajdhani', sans-serif;
}

.required {
  color: #e74c3c;
  color: var(--vcsx-danger);
  font-weight: 700;
}

.input-field,
.input-select {
  width: 100%;
  padding: 12px 16px;
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--vcsx-bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vcsx-border);
  border-radius: 10px;
  color: #e9ecef;
  color: var(--vcsx-text-primary);
  font-size: 15px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  transition: all 0.3s ease;
}

.input-field:focus,
.input-select:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--vcsx-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.input-field:disabled,
.input-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.input-hint {
  display: block;
  font-size: 13px;
  color: #b7bcc4;
  color: var(--vcsx-text-secondary);
  margin-top: 6px;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* RADIO GROUP */
/* ============================================ */
.radio-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--vcsx-bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vcsx-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.radio-option:hover {
  background-color: rgba(212, 175, 55, 0.1);
  border-color: #d4af37;
  border-color: var(--vcsx-gold);
}

.radio-option input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.radio-option input[type="radio"]:checked + span {
  color: #d4af37;
  color: var(--vcsx-gold);
}

/* ============================================ */
/* CHECKBOX GROUP */
/* ============================================ */
.checkbox-group {
  margin-bottom: 20px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #e9ecef;
  color: var(--vcsx-text-primary);
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* ============================================ */
/* PERFILES PREVIEW */
/* ============================================ */
.perfiles-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
}

.perfil-preview-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--vcsx-bg-secondary);
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vcsx-border);
  transition: all 0.3s ease;
}

.perfil-preview-item:hover {
  border-color: #d4af37;
  border-color: var(--vcsx-gold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.perfil-preview-numero {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vcsx-gold), var(--vcsx-gold-light));
  color: #0a0a0a;
  color: var(--vcsx-bg-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

.perfil-preview-info {
  flex: 1 1;
  display: flex;
  gap: 12px;
}

.perfil-preview-input,
.perfil-preview-pin {
  padding: 8px 12px;
  background-color: #0a0a0a;
  background-color: var(--vcsx-bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vcsx-border);
  border-radius: 8px;
  color: #e9ecef;
  color: var(--vcsx-text-primary);
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

.perfil-preview-input {
  flex: 2 1;
}

.perfil-preview-pin {
  flex: 1 1;
}

.perfiles-preview-more {
  padding: 16px;
  text-align: center;
  color: #b7bcc4;
  color: var(--vcsx-text-secondary);
  font-size: 14px;
  font-weight: 600;
  background-color: rgba(212, 175, 55, 0.05);
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border: 1px dashed var(--vcsx-border);
}

/* ============================================ */
/* BUTTONS */
/* ============================================ */
.button-group {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.submit-button,
.cancel-button {
  flex: 1 1;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.submit-button {
  background: linear-gradient(135deg, #27ae60, #52be80);
  background: linear-gradient(135deg, var(--vcsx-success), #52be80);
  color: white;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.submit-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(39, 174, 96, 0.5);
}

.submit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cancel-button {
  background-color: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
  color: var(--vcsx-danger);
  border: 1px solid rgba(231, 76, 60, 0.3);
}

.cancel-button:hover:not(:disabled) {
  background-color: rgba(231, 76, 60, 0.2);
  transform: translateY(-2px);
}

/* ============================================ */
/* INFO BOX */
/* ============================================ */
.info-box {
  background-color: rgba(52, 152, 219, 0.1);
  border: 1px solid rgba(52, 152, 219, 0.3);
  border-left: 4px solid #3498db;
  border-left: 4px solid var(--vcsx-info);
  color: #b7bcc4;
  color: var(--vcsx-text-secondary);
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* MODAL */
/* ============================================ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--vcsx-bg-card);
  border-radius: 16px;
  padding: 40px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vcsx-border);
  text-align: center;
}

.modal-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.modal-icon.success {
  color: #27ae60;
  color: var(--vcsx-success);
}

.modal-title {
  font-size: 28px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--vcsx-text-primary);
  margin: 0 0 16px 0;
  font-family: 'Rajdhani', sans-serif;
}

.modal-message {
  font-size: 15px;
  color: #b7bcc4;
  color: var(--vcsx-text-secondary);
  margin: 0 0 28px 0;
  line-height: 1.6;
  font-family: 'Rajdhani', sans-serif;
  white-space: pre-line;
}

.modal-button {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vcsx-gold), var(--vcsx-gold-light));
  color: #0a0a0a;
  color: var(--vcsx-bg-primary);
  border: none;
  padding: 14px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.modal-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}


/* src/pages/vendedor/GestionarStock.css */
/* PREFIJO: vgsx- (Vendedor Gestionar Stock eXtended) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --vgsx-bg-primary: #0a0a0a;
  --vgsx-bg-secondary: rgba(10, 10, 10, 0.95);
  --vgsx-bg-card: rgba(20, 20, 20, 0.95);
  --vgsx-text-primary: #e9ecef;
  --vgsx-text-secondary: #b7bcc4;
  --vgsx-border: rgba(255, 255, 255, 0.12);
  --vgsx-success: #27ae60;
  --vgsx-warning: #f39c12;
  --vgsx-danger: #e74c3c;
  --vgsx-info: #3498db;
  --vgsx-gold: #d4af37;
  --vgsx-gold-light: #f0d574;
}

/* ============================================ */
/* RESET & BASE */
/* ============================================ */
.gestionar-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--vgsx-bg-primary);
  font-family: 'Rajdhani', sans-serif;
  color: #e9ecef;
  color: var(--vgsx-text-primary);
}

.gestionar-container * {
  box-sizing: border-box;
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.gestionar-header {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--vgsx-bg-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--vgsx-border);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1800px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.back-button,
.btn-volver {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--vgsx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vgsx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.back-button:hover,
.btn-volver:hover {
  background-color: rgba(212, 175, 55, 0.15);
  border-color: #d4af37;
  border-color: var(--vgsx-gold);
  color: #d4af37;
  color: var(--vgsx-gold);
  transform: translateY(-2px);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-image {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid #d4af37;
  border: 2px solid var(--vgsx-gold);
  transition: transform 0.3s ease;
}

.logo-image:hover {
  transform: scale(1.05);
}

.logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.logo-title {
  font-size: 20px;
  font-weight: 900;
  font-family: 'Orbitron', monospace;
  letter-spacing: 2px;
  margin: 0;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vgsx-gold), var(--vgsx-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.shop-name {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--vgsx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-button,
.logout-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--vgsx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vgsx-border);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.nav-button:hover {
  background-color: rgba(52, 152, 219, 0.15);
  border-color: #3498db;
  border-color: var(--vgsx-info);
  color: #3498db;
  color: var(--vgsx-info);
  transform: translateY(-2px);
}

.logout-button:hover {
  background-color: rgba(231, 76, 60, 0.15);
  border-color: #e74c3c;
  border-color: var(--vgsx-danger);
  color: #e74c3c;
  color: var(--vgsx-danger);
  transform: translateY(-2px);
}

/* ============================================ */
/* MAIN CONTENT */
/* ============================================ */
.gestionar-main {
  padding: 40px 24px;
}

.gestionar-content {
  max-width: 1400px;
  margin: 0 auto;
}

/* ============================================ */
/* LOADING & ERROR */
/* ============================================ */
.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 20px;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.1);
  border-top: 5px solid #d4af37;
  border-top: 5px solid var(--vgsx-gold);
  border-radius: 50%;
  animation: vgsx-spin 1s linear infinite;
}

@keyframes vgsx-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: #b7bcc4;
  color: var(--vgsx-text-secondary);
  font-size: 17px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
}

.error-container h2 {
  font-size: 28px;
  font-weight: 700;
  color: #e74c3c;
  color: var(--vgsx-danger);
  margin: 0 0 12px 0;
}

.error-container p {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--vgsx-text-secondary);
  margin: 0 0 24px 0;
}

/* ============================================ */
/* CUENTA INFO CARD */
/* ============================================ */
.cuenta-info-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--vgsx-bg-card);
  border-radius: 16px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vgsx-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  margin-bottom: 24px;
}

.cuenta-info-header {
  margin-bottom: 20px;
}

.cuenta-nombre {
  font-size: 28px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--vgsx-text-primary);
  margin: 0 0 12px 0;
  font-family: 'Orbitron', monospace;
}

.cuenta-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.badge-info {
  padding: 6px 14px;
  background-color: rgba(52, 152, 219, 0.15);
  color: #3498db;
  color: var(--vgsx-info);
  border: 1px solid rgba(52, 152, 219, 0.3);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cuenta-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vgsx-border);
}

.stat-label {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--vgsx-text-secondary);
  font-weight: 500;
}

.stat-value {
  font-size: 22px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--vgsx-text-primary);
  font-family: 'Rajdhani', sans-serif;
}

.stat-value.warning {
  color: #f39c12;
  color: var(--vgsx-warning);
}

.stat-value.success {
  color: #27ae60;
  color: var(--vgsx-success);
}

/* ============================================ */
/* ERROR ALERT */
/* ============================================ */
.error-alert {
  background-color: rgba(231, 76, 60, 0.15);
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-left: 4px solid #e74c3c;
  border-left: 4px solid var(--vgsx-danger);
  color: #e74c3c;
  color: var(--vgsx-danger);
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close-alert {
  background: transparent;
  border: none;
  color: #e74c3c;
  color: var(--vgsx-danger);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  transition: transform 0.2s ease;
}

.close-alert:hover {
  transform: scale(1.2);
}

/* ============================================ */
/* TABS */
/* ============================================ */
.tabs-container {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.tab-button {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--vgsx-bg-card);
  color: #e9ecef;
  color: var(--vgsx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vgsx-border);
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.tab-button:hover {
  background-color: rgba(212, 175, 55, 0.1);
  border-color: #d4af37;
  border-color: var(--vgsx-gold);
  transform: translateY(-2px);
}

.tab-button.active {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vgsx-gold), var(--vgsx-gold-light));
  border-color: #d4af37;
  border-color: var(--vgsx-gold);
  color: #0a0a0a;
  color: var(--vgsx-bg-primary);
}

/* ============================================ */
/* TAB CONTENT */
/* ============================================ */
.tab-content {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--vgsx-bg-card);
  border-radius: 16px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vgsx-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.tab-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.panel-title {
  font-size: 24px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--vgsx-text-primary);
  margin: 0 0 8px 0;
  font-family: 'Rajdhani', sans-serif;
}

.subsection-title {
  font-size: 20px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--vgsx-text-primary);
  margin: 24px 0 16px 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* FORMS */
/* ============================================ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 15px;
  font-weight: 600;
  color: #e9ecef;
  color: var(--vgsx-text-primary);
  font-family: 'Rajdhani', sans-serif;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--vgsx-bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vgsx-border);
  border-radius: 10px;
  color: #e9ecef;
  color: var(--vgsx-text-primary);
  font-size: 15px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  transition: all 0.3s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--vgsx-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-hint {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--vgsx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* BUTTONS */
/* ============================================ */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-liberar {
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary {
  background: linear-gradient(135deg, #27ae60, #52be80);
  background: linear-gradient(135deg, var(--vgsx-success), #52be80);
  color: white;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(39, 174, 96, 0.5);
}

.btn-secondary {
  background-color: rgba(52, 152, 219, 0.15);
  color: #3498db;
  color: var(--vgsx-info);
  border: 1px solid rgba(52, 152, 219, 0.3);
}

.btn-secondary:hover:not(:disabled) {
  background-color: rgba(52, 152, 219, 0.25);
  transform: translateY(-2px);
}

.btn-danger {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  background: linear-gradient(135deg, var(--vgsx-danger), #c0392b);
  color: white;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.btn-danger:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.5);
}

.btn-liberar {
  background-color: rgba(243, 156, 18, 0.15);
  color: #f39c12;
  color: var(--vgsx-warning);
  border: 1px solid rgba(243, 156, 18, 0.3);
  width: 100%;
  margin-top: 12px;
  font-size: 14px;
  padding: 10px 16px;
}

.btn-liberar:hover:not(:disabled) {
  background-color: rgba(243, 156, 18, 0.25);
  transform: translateY(-2px);
}

.btn-small {
  padding: 8px 16px;
  font-size: 13px;
  margin-top: 8px;
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-liberar:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================ */
/* INFO BOX */
/* ============================================ */
.info-box {
  background-color: rgba(52, 152, 219, 0.1);
  border: 1px solid rgba(52, 152, 219, 0.3);
  border-left: 4px solid #3498db;
  border-left: 4px solid var(--vgsx-info);
  color: #b7bcc4;
  color: var(--vgsx-text-secondary);
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1.6;
}

.info-box.warning {
  background-color: rgba(243, 156, 18, 0.1);
  border-color: rgba(243, 156, 18, 0.3);
  border-left-color: #f39c12;
  border-left-color: var(--vgsx-warning);
  color: #f39c12;
  color: var(--vgsx-warning);
}

/* ============================================ */
/* EMPTY MESSAGE */
/* ============================================ */
.empty-message {
  padding: 60px 20px;
  text-align: center;
  color: #b7bcc4;
  color: var(--vgsx-text-secondary);
  font-size: 16px;
  font-weight: 500;
}

/* ============================================ */
/* PERFILES LISTA */
/* ============================================ */
.perfiles-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.perfil-card {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--vgsx-bg-secondary);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vgsx-border);
  transition: all 0.3s ease;
}

.perfil-card.ocupado {
  border-left: 4px solid #f39c12;
  border-left: 4px solid var(--vgsx-warning);
}

.perfil-card.disponible {
  border-left: 4px solid #27ae60;
  border-left: 4px solid var(--vgsx-success);
}

.perfil-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-color: #d4af37;
  border-color: var(--vgsx-gold);
}

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

.perfil-numero-badge {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vgsx-gold), var(--vgsx-gold-light));
  color: #0a0a0a;
  color: var(--vgsx-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  font-family: 'Rajdhani', sans-serif;
  flex-shrink: 0;
}

.perfil-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.perfil-nombre-input,
.perfil-pin-input {
  padding: 8px 12px;
  background-color: #0a0a0a;
  background-color: var(--vgsx-bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vgsx-border);
  border-radius: 8px;
  color: #e9ecef;
  color: var(--vgsx-text-primary);
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  transition: border-color 0.3s ease;
}

.perfil-nombre-input:focus,
.perfil-pin-input:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--vgsx-gold);
}

.perfil-nombre-input:disabled,
.perfil-pin-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.perfil-estado-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.perfil-estado-badge.ocupado {
  background-color: rgba(243, 156, 18, 0.15);
  color: #f39c12;
  color: var(--vgsx-warning);
  border: 1px solid rgba(243, 156, 18, 0.3);
}

.perfil-estado-badge.disponible {
  background-color: rgba(39, 174, 96, 0.15);
  color: #27ae60;
  color: var(--vgsx-success);
  border: 1px solid rgba(39, 174, 96, 0.3);
}

/* ============================================ */
/* CLIENTE INFO */
/* ============================================ */
.perfil-cliente-info {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vgsx-border);
}

.cliente-detalle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
}

.cliente-label {
  color: #b7bcc4;
  color: var(--vgsx-text-secondary);
  font-weight: 500;
}

.cliente-valor {
  font-weight: 700;
  color: #e9ecef;
  color: var(--vgsx-text-primary);
}

.cliente-valor.danger {
  color: #e74c3c;
  color: var(--vgsx-danger);
}

/* ============================================ */
/* HISTORIAL */
/* ============================================ */
.historial-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

.stat-box {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--vgsx-bg-secondary);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vgsx-border);
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  font-size: 40px;
}

.stat-numero {
  font-size: 28px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--vgsx-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
}

.stat-texto {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--vgsx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

.historial-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.historial-item {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--vgsx-bg-secondary);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vgsx-border);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 20px;
  gap: 20px;
  align-items: center;
}

.historial-perfil {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vgsx-gold), var(--vgsx-gold-light));
  color: #0a0a0a;
  color: var(--vgsx-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  font-family: 'Rajdhani', sans-serif;
}

.historial-info p {
  margin: 4px 0;
  font-size: 14px;
  color: #b7bcc4;
  color: var(--vgsx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

.historial-info strong {
  color: #e9ecef;
  color: var(--vgsx-text-primary);
  font-weight: 700;
}

.historial-meta p {
  margin: 4px 0;
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

.text-danger {
  color: #e74c3c;
  color: var(--vgsx-danger);
  font-weight: 700;
}

.estado-badge {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  display: inline-block;
  margin-top: 4px;
}

.estado-badge.success {
  background-color: rgba(39, 174, 96, 0.15);
  color: #27ae60;
  color: var(--vgsx-success);
  border: 1px solid rgba(39, 174, 96, 0.3);
}

.estado-badge.warning {
  background-color: rgba(243, 156, 18, 0.15);
  color: #f39c12;
  color: var(--vgsx-warning);
  border: 1px solid rgba(243, 156, 18, 0.3);
}

/* ============================================ */
/* DANGER ZONE */
/* ============================================ */
.danger-zone {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.danger-warning {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background-color: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-left: 4px solid #e74c3c;
  border-left: 4px solid var(--vgsx-danger);
  padding: 20px;
  border-radius: 12px;
}

.warning-icon {
  font-size: 32px;
}

.danger-warning h4 {
  font-size: 18px;
  font-weight: 700;
  color: #e74c3c;
  color: var(--vgsx-danger);
  margin: 0 0 8px 0;
  font-family: 'Rajdhani', sans-serif;
}

.danger-warning p {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--vgsx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

.danger-action {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--vgsx-bg-secondary);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vgsx-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.danger-action-info h4 {
  font-size: 18px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--vgsx-text-primary);
  margin: 0 0 8px 0;
  font-family: 'Rajdhani', sans-serif;
}

.danger-action-info p {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--vgsx-text-secondary);
  margin: 4px 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  line-height: 1.5;
}

.danger-note {
  margin-top: 12px !important;
}

/* ============================================ */
/* MODALS */
/* ============================================ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: vgsx-fade-in 0.3s ease;
}

@keyframes vgsx-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-content {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--vgsx-bg-card);
  border-radius: 16px;
  padding: 40px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vgsx-border);
  text-align: center;
  animation: vgsx-slide-up 0.3s ease;
}

@keyframes vgsx-slide-up {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.modal-icon.success {
  color: #27ae60;
  color: var(--vgsx-success);
}

.modal-icon.warning {
  color: #f39c12;
  color: var(--vgsx-warning);
}

.modal-icon.danger {
  color: #e74c3c;
  color: var(--vgsx-danger);
}

.modal-title {
  font-size: 28px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--vgsx-text-primary);
  margin: 0 0 16px 0;
  font-family: 'Rajdhani', sans-serif;
}

.modal-message {
  font-size: 15px;
  color: #b7bcc4;
  color: var(--vgsx-text-secondary);
  margin: 0 0 28px 0;
  line-height: 1.7;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

.modal-button {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vgsx-gold), var(--vgsx-gold-light));
  color: #0a0a0a;
  color: var(--vgsx-bg-primary);
  border: none;
  padding: 14px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  width: 100%;
}

.modal-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.modal-button.danger {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  background: linear-gradient(135deg, var(--vgsx-danger), #c0392b);
  color: white;
}

.modal-button.secondary {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--vgsx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vgsx-border);
}

.modal-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

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

/* ============================================ */
/* RESPONSIVE */
/* ============================================ */
@media (max-width: 1024px) {
  .cuenta-stats {
    grid-template-columns: 1fr;
  }

  .historial-item {
    grid-template-columns: 1fr;
  }

  .danger-action {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 768px) {
  .header-right {
    display: none;
  }

  .tabs-container {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .tab-content {
    padding: 20px;
  }

  .perfil-header {
    flex-wrap: wrap;
  }

  .historial-stats {
    grid-template-columns: 1fr;
  }
}


/* src/pages/vendedor/MisPedidos.css */
/* PREFIJO: vmpx- (Vendedor Mis Pedidos eXtended) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES - DARK THEME */
/* ============================================ */
:root {
  --vmpx-bg-primary: #0a0a0a;
  --vmpx-bg-secondary: rgba(10, 10, 10, 0.95);
  --vmpx-bg-card: rgba(20, 20, 20, 0.95);
  --vmpx-gold: #d4af37;
  --vmpx-gold-light: #f0d574;
  --vmpx-text-primary: #e9ecef;
  --vmpx-text-secondary: #b7bcc4;
  --vmpx-border: rgba(255, 255, 255, 0.12);
  --vmpx-success: #27ae60;
  --vmpx-warning: #f39c12;
  --vmpx-danger: #e74c3c;
  --vmpx-info: #3498db;
  --vmpx-purple: #9b59b6;
  --vmpx-shadow: rgba(0, 0, 0, 0.5);
}

/* ============================================ */
/* RESET & BASE */
/* ============================================ */
.vmpx-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--vmpx-bg-primary);
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-container * {
  box-sizing: border-box;
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.vmpx-header {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--vmpx-bg-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--vmpx-border);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.vmpx-header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.vmpx-back-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vmpx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-back-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateX(-2px);
}

.vmpx-header-center {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1;
  justify-content: center;
}

.vmpx-header-logo {
  width: 45px;
  height: 45px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid #d4af37;
  border: 2px solid var(--vmpx-gold);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.vmpx-logo {
  font-size: 24px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  margin: 0;
  font-family: 'Orbitron', monospace;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vmpx-gold), var(--vmpx-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vmpx-perfil-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vmpx-border);
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vmpx-perfil-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

/* ============================================ */
/* MAIN */
/* ============================================ */
.vmpx-main {
  padding: 40px 24px;
}

.vmpx-main-content {
  max-width: 1400px;
  margin: 0 auto;
}

/* ============================================ */
/* TITLE SECTION */
/* ============================================ */
.vmpx-title-section {
  margin-bottom: 32px;
}

.vmpx-title {
  font-size: 32px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-subtitle {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* ESTADÍSTICAS */
/* ============================================ */
.vmpx-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.vmpx-stat-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--vmpx-bg-card);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 12px var(--vmpx-shadow);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vmpx-border);
  transition: all 0.3s ease;
}

.vmpx-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
  border-color: #d4af37;
  border-color: var(--vmpx-gold);
}

.vmpx-stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  color: #0a0a0a;
  color: var(--vmpx-bg-primary);
}

.vmpx-stat-icon-total {
  background-color: #d4af37;
  background-color: var(--vmpx-gold);
}

.vmpx-stat-icon-pendiente {
  background-color: #f39c12;
  background-color: var(--vmpx-warning);
}

.vmpx-stat-icon-proceso {
  background-color: #3498db;
  background-color: var(--vmpx-info);
}

.vmpx-stat-icon-entregado {
  background-color: #27ae60;
  background-color: var(--vmpx-success);
}

.vmpx-stat-info {
  flex: 1 1;
}

.vmpx-stat-label {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* FILTROS Y BÚSQUEDA */
/* ============================================ */
.vmpx-filters-section {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vmpx-search-box {
  position: relative;
  max-width: 600px;
}

.vmpx-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
}

.vmpx-search-input {
  width: 100%;
  padding: 12px 12px 12px 48px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--vmpx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vmpx-border);
  border-radius: 8px;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  font-size: 15px;
  font-family: 'Rajdhani', sans-serif;
  transition: all 0.3s ease;
}

.vmpx-search-input:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--vmpx-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.vmpx-search-input::placeholder {
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
}

.vmpx-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.vmpx-filter-button {
  background-color: rgba(255, 255, 255, 0.05);
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vmpx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vmpx-filter-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #d4af37;
  border-color: var(--vmpx-gold);
}

.vmpx-filter-button-active {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vmpx-gold), var(--vmpx-gold-light));
  color: #0a0a0a;
  color: var(--vmpx-bg-primary);
  border-color: #d4af37;
  border-color: var(--vmpx-gold);
  font-weight: 600;
}

/* ============================================ */
/* PEDIDOS GRID */
/* ============================================ */
.vmpx-pedidos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.vmpx-pedido-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--vmpx-bg-card);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 12px var(--vmpx-shadow);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vmpx-border);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vmpx-pedido-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  border-color: #d4af37;
  border-color: var(--vmpx-gold);
}

.vmpx-pedido-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--vmpx-border);
}

.vmpx-pedido-codigo {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  font-size: 13px;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-pedido-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-badge-pendiente {
  background-color: rgba(243, 156, 18, 0.2);
  color: #f39c12;
  color: var(--vmpx-warning);
  border: 1px solid #f39c12;
  border: 1px solid var(--vmpx-warning);
}

.vmpx-badge-proceso {
  background-color: rgba(52, 152, 219, 0.2);
  color: #3498db;
  color: var(--vmpx-info);
  border: 1px solid #3498db;
  border: 1px solid var(--vmpx-info);
}

.vmpx-badge-entregado {
  background-color: rgba(39, 174, 96, 0.2);
  color: #27ae60;
  color: var(--vmpx-success);
  border: 1px solid #27ae60;
  border: 1px solid var(--vmpx-success);
}

.vmpx-badge-completado {
  background-color: rgba(39, 174, 96, 0.3);
  color: #27ae60;
  color: var(--vmpx-success);
  border: 1px solid #27ae60;
  border: 1px solid var(--vmpx-success);
}

.vmpx-badge-cancelado {
  background-color: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  color: var(--vmpx-danger);
  border: 1px solid #e74c3c;
  border: 1px solid var(--vmpx-danger);
}

.vmpx-pedido-content {
  display: flex;
  gap: 16px;
}

.vmpx-pedido-imagen-container {
  flex-shrink: 0;
}

.vmpx-pedido-imagen {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border: 2px solid var(--vmpx-border);
}

.vmpx-pedido-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vmpx-pedido-nombre {
  font-size: 16px;
  font-weight: 600;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  margin: 0;
  line-height: 1.3;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-pedido-codigo-producto {
  font-size: 12px;
  color: #d4af37;
  color: var(--vmpx-gold);
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-pedido-cliente {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-mayorista-badge {
  background: linear-gradient(135deg, #9b59b6, #e74c3c);
  background: linear-gradient(135deg, var(--vmpx-purple), #e74c3c);
  color: white;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 8px;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-pedido-detalles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vmpx-pedido-detalle-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-precio {
  color: #d4af37;
  color: var(--vmpx-gold);
  font-weight: 700;
  font-size: 16px;
}

.vmpx-pedido-fecha {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* ACCIONES DE ESTADO */
/* ============================================ */
.vmpx-pedido-acciones-estado {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid var(--vmpx-border);
}

.vmpx-btn-aceptar {
  background: linear-gradient(135deg, #3498db, #5dade2);
  background: linear-gradient(135deg, var(--vmpx-info), #5dade2);
  color: white;
  border: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.vmpx-btn-aceptar:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

.vmpx-btn-aceptar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vmpx-btn-entregar {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  background: linear-gradient(135deg, var(--vmpx-success), #2ecc71);
  color: white;
  border: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.vmpx-btn-entregar:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

.vmpx-btn-entregar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================ */
/* ACCIONES PRINCIPALES */
/* ============================================ */
.vmpx-pedido-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vmpx-btn-chat {
  flex: 1 1;
  background-color: rgba(52, 152, 219, 0.2);
  color: #3498db;
  color: var(--vmpx-info);
  border: 1px solid #3498db;
  border: 1px solid var(--vmpx-info);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.vmpx-btn-chat:hover {
  background-color: #3498db;
  background-color: var(--vmpx-info);
  color: white;
}

.vmpx-btn-ver {
  flex: 1 1;
  background-color: rgba(212, 175, 55, 0.2);
  color: #d4af37;
  color: var(--vmpx-gold);
  border: 1px solid #d4af37;
  border: 1px solid var(--vmpx-gold);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.vmpx-btn-ver:hover {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vmpx-gold), var(--vmpx-gold-light));
  color: #0a0a0a;
  color: var(--vmpx-bg-primary);
}

.vmpx-btn-cancelar {
  flex: 1 1;
  background-color: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  color: var(--vmpx-danger);
  border: 1px solid #e74c3c;
  border: 1px solid var(--vmpx-danger);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.vmpx-btn-cancelar:hover:not(:disabled) {
  background-color: #e74c3c;
  background-color: var(--vmpx-danger);
  color: white;
}

.vmpx-btn-cancelar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================ */
/* EMPTY STATE */
/* ============================================ */
.vmpx-empty-state {
  text-align: center;
  padding: 80px 20px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--vmpx-bg-card);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vmpx-border);
}

.vmpx-empty-icon {
  font-size: 80px;
  margin-bottom: 16px;
  opacity: 0.5;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
}

.vmpx-empty-title {
  font-size: 24px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  margin-bottom: 8px;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-empty-text {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* MODAL */
/* ============================================ */
.vmpx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.vmpx-modal-content,
.vmpx-modal-entrega-content,
.vmpx-modal-mensaje-content {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--vmpx-bg-secondary);
  border-radius: 16px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.8);
  border: 2px solid #d4af37;
  border: 2px solid var(--vmpx-gold);
}

.vmpx-modal-entrega-content {
  max-width: 800px;
}

.vmpx-modal-mensaje-content {
  max-width: 500px;
}

.vmpx-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--vmpx-border);
}

.vmpx-modal-title {
  font-size: 24px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-modal-close {
  background: none;
  border: none;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vmpx-modal-close:hover {
  background-color: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  color: var(--vmpx-danger);
}

.vmpx-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vmpx-modal-imagen-container {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border: 2px solid var(--vmpx-border);
}

.vmpx-modal-imagen {
  width: 100%;
  height: auto;
  display: block;
}

.vmpx-modal-estado-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
}

.vmpx-modal-estado-label {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  font-weight: 500;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-modal-badge {
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-modal-badge-pendiente {
  background-color: rgba(243, 156, 18, 0.2);
  color: #f39c12;
  color: var(--vmpx-warning);
  border: 1px solid #f39c12;
  border: 1px solid var(--vmpx-warning);
}

.vmpx-modal-badge-proceso {
  background-color: rgba(52, 152, 219, 0.2);
  color: #3498db;
  color: var(--vmpx-info);
  border: 1px solid #3498db;
  border: 1px solid var(--vmpx-info);
}

.vmpx-modal-badge-entregado {
  background-color: rgba(39, 174, 96, 0.2);
  color: #27ae60;
  color: var(--vmpx-success);
  border: 1px solid #27ae60;
  border: 1px solid var(--vmpx-success);
}

.vmpx-modal-badge-completado {
  background-color: rgba(39, 174, 96, 0.3);
  color: #27ae60;
  color: var(--vmpx-success);
  border: 1px solid #27ae60;
  border: 1px solid var(--vmpx-success);
}

.vmpx-modal-badge-cancelado {
  background-color: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  color: var(--vmpx-danger);
  border: 1px solid #e74c3c;
  border: 1px solid var(--vmpx-danger);
}

.vmpx-modal-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vmpx-modal-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #d4af37;
  color: var(--vmpx-gold);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.vmpx-modal-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.vmpx-modal-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vmpx-modal-label {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  font-weight: 500;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-modal-value {
  font-size: 16px;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-modal-value-small {
  font-size: 14px;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-modal-value-tachado {
  font-size: 15px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  text-decoration: line-through;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-modal-value-descuento {
  font-size: 16px;
  color: #e74c3c;
  color: var(--vmpx-danger);
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-modal-label-total {
  font-size: 15px;
  color: #d4af37;
  color: var(--vmpx-gold);
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
}

.vmpx-modal-value-total {
  font-size: 24px;
  color: #d4af37;
  color: var(--vmpx-gold);
  font-weight: 900;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-modal-id {
  background-color: rgba(255, 255, 255, 0.03);
  padding: 16px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vmpx-modal-id-label {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  font-weight: 500;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-modal-id-code {
  font-size: 13px;
  color: #d4af37;
  color: var(--vmpx-gold);
  font-family: 'Courier New', monospace;
  background-color: rgba(212, 175, 55, 0.1);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  word-break: break-all;
}

.vmpx-modal-footer {
  padding: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid var(--vmpx-border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.vmpx-modal-btn-cerrar {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vmpx-gold), var(--vmpx-gold-light));
  color: #0a0a0a;
  color: var(--vmpx-bg-primary);
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-modal-btn-cerrar:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
}

.vmpx-modal-btn-cancelar {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  color: var(--vmpx-danger);
  border: 1px solid #e74c3c;
  border: 1px solid var(--vmpx-danger);
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-modal-btn-cancelar:hover {
  background: #e74c3c;
  background: var(--vmpx-danger);
  color: white;
}

.vmpx-modal-btn-entregar {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  background: linear-gradient(135deg, var(--vmpx-success), #2ecc71);
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-modal-btn-entregar:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(39, 174, 96, 0.4);
}

.vmpx-modal-btn-entregar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================ */
/* MODAL DE ENTREGA */
/* ============================================ */
.vmpx-entrega-info-pedido {
  background-color: rgba(255, 255, 255, 0.03);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vmpx-border);
}

.vmpx-entrega-subtitle {
  font-size: 16px;
  font-weight: 700;
  color: #d4af37;
  color: var(--vmpx-gold);
  margin: 0 0 16px 0;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
}

.vmpx-entrega-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.vmpx-entrega-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vmpx-entrega-label {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-entrega-value {
  font-size: 15px;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-entrega-value-precio {
  font-size: 18px;
  color: #d4af37;
  color: var(--vmpx-gold);
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-entrega-duracion-section {
  margin-bottom: 24px;
}

.vmpx-entrega-duracion-opciones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.vmpx-entrega-duracion-opcion {
  flex: 1 1;
  min-width: 80px;
  display: flex;
  cursor: pointer;
}

.vmpx-entrega-duracion-opcion input[type="radio"] {
  display: none;
}

.vmpx-entrega-duracion-label {
  flex: 1 1;
  padding: 12px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border: 2px solid var(--vmpx-border);
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  transition: all 0.3s ease;
  background-color: rgba(255, 255, 255, 0.03);
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-entrega-duracion-opcion input[type="radio"]:checked + .vmpx-entrega-duracion-label {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vmpx-gold), var(--vmpx-gold-light));
  color: #0a0a0a;
  color: var(--vmpx-bg-primary);
  border-color: #d4af37;
  border-color: var(--vmpx-gold);
}

.vmpx-entrega-duracion-opcion:hover .vmpx-entrega-duracion-label {
  border-color: #d4af37;
  border-color: var(--vmpx-gold);
}

.vmpx-entrega-fecha-expiracion {
  background-color: rgba(243, 156, 18, 0.15);
  padding: 12px 16px;
  border-radius: 10px;
  border-left: 4px solid #f39c12;
  border-left: 4px solid var(--vmpx-warning);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #f39c12;
  color: var(--vmpx-warning);
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-entrega-error {
  background-color: rgba(231, 76, 60, 0.15);
  border: 2px solid #e74c3c;
  border: 2px solid var(--vmpx-danger);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e74c3c;
  color: var(--vmpx-danger);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-entrega-stock-section {
  margin-bottom: 24px;
}

.vmpx-entrega-stock-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vmpx-entrega-stock-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border: 2px solid var(--vmpx-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: rgba(255, 255, 255, 0.03);
}

.vmpx-entrega-stock-item:hover {
  border-color: #d4af37;
  border-color: var(--vmpx-gold);
  background-color: rgba(212, 175, 55, 0.1);
}

.vmpx-entrega-stock-item input[type="radio"] {
  margin-top: 2px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #d4af37;
  accent-color: var(--vmpx-gold);
}

.vmpx-entrega-stock-info {
  flex: 1 1;
}

.vmpx-entrega-stock-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.vmpx-entrega-stock-email {
  font-size: 15px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-entrega-stock-tipo {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-entrega-stock-tipo.tipo-completa {
  background-color: rgba(52, 152, 219, 0.2);
  color: #3498db;
  color: var(--vmpx-info);
  border: 1px solid #3498db;
  border: 1px solid var(--vmpx-info);
}

.vmpx-entrega-stock-tipo.tipo-compartido {
  background-color: rgba(243, 156, 18, 0.2);
  color: #f39c12;
  color: var(--vmpx-warning);
  border: 1px solid #f39c12;
  border: 1px solid var(--vmpx-warning);
}

.vmpx-entrega-stock-detalles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vmpx-entrega-stock-espacios {
  font-size: 13px;
  color: #27ae60;
  color: var(--vmpx-success);
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-entrega-stock-url {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  font-family: 'Courier New', monospace;
}

.vmpx-entrega-preview-section {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.02) 100%);
  padding: 20px;
  border-radius: 12px;
  border: 2px solid rgba(212, 175, 55, 0.3);
  margin-bottom: 24px;
}

.vmpx-entrega-preview-info {
  margin-bottom: 16px;
}

.vmpx-entrega-preview-text {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  margin: 0 0 12px 0;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-entrega-preview-cuenta {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 12px;
  border-radius: 8px;
}

.vmpx-entrega-preview-email {
  font-size: 15px;
  font-weight: 700;
  color: #d4af37;
  color: var(--vmpx-gold);
  font-family: 'Courier New', monospace;
}

.vmpx-entrega-preview-espacios {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.vmpx-entrega-preview-espacio {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.vmpx-entrega-preview-numero {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vmpx-gold), var(--vmpx-gold-light));
  color: #0a0a0a;
  color: var(--vmpx-bg-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-entrega-preview-detalle {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vmpx-entrega-preview-perfil {
  font-size: 14px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-entrega-preview-pin {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  font-family: 'Courier New', monospace;
}

.vmpx-entrega-preview-fechas {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 14px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.vmpx-entrega-preview-fecha {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vmpx-entrega-preview-fecha-label {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-entrega-preview-fecha-valor {
  font-size: 14px;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* MODAL DE MENSAJE */
/* ============================================ */
.vmpx-mensaje-icono-container {
  margin-bottom: 24px;
  text-align: center;
}

.vmpx-mensaje-icono-exito {
  color: #27ae60;
  color: var(--vmpx-success);
}

.vmpx-mensaje-icono-error {
  color: #e74c3c;
  color: var(--vmpx-danger);
}

.vmpx-mensaje-icono-confirmar {
  color: #f39c12;
  color: var(--vmpx-warning);
}

.vmpx-mensaje-titulo {
  font-size: 24px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  margin: 0 0 16px 0;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-mensaje-texto {
  font-size: 15px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  line-height: 1.6;
  margin: 0 0 28px 0;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-mensaje-botones {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.vmpx-mensaje-btn-cancelar,
.vmpx-mensaje-btn-confirmar,
.vmpx-mensaje-btn-aceptar {
  padding: 14px 32px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-mensaje-btn-cancelar {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  color: var(--vmpx-danger);
  border: 1px solid #e74c3c;
  border: 1px solid var(--vmpx-danger);
}

.vmpx-mensaje-btn-cancelar:hover {
  background: #e74c3c;
  background: var(--vmpx-danger);
  color: white;
}

.vmpx-mensaje-btn-confirmar,
.vmpx-mensaje-btn-aceptar {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vmpx-gold), var(--vmpx-gold-light));
  color: #0a0a0a;
  color: var(--vmpx-bg-primary);
}

.vmpx-mensaje-btn-confirmar:hover,
.vmpx-mensaje-btn-aceptar:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

/* ============================================ */
/* LOADING */
/* ============================================ */
.vmpx-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--vmpx-bg-primary);
  gap: 20px;
}

.vmpx-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.1);
  border-top: 5px solid #d4af37;
  border-top: 5px solid var(--vmpx-gold);
  border-radius: 50%;
  animation: vmpx-spin 1s linear infinite;
}

.vmpx-spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #d4af37;
  border-top: 2px solid var(--vmpx-gold);
  border-radius: 50%;
  animation: vmpx-spin 0.8s linear infinite;
}

@keyframes vmpx-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.vmpx-loading-text {
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  font-size: 16px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

/* ============================================ */
/* SCROLLBAR */
/* ============================================ */
.vmpx-modal-content::-webkit-scrollbar,
.vmpx-entrega-stock-lista::-webkit-scrollbar {
  width: 8px;
}

.vmpx-modal-content::-webkit-scrollbar-track,
.vmpx-entrega-stock-lista::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.vmpx-modal-content::-webkit-scrollbar-thumb,
.vmpx-entrega-stock-lista::-webkit-scrollbar-thumb {
  background: #d4af37;
  background: var(--vmpx-gold);
  border-radius: 10px;
}

.vmpx-modal-content::-webkit-scrollbar-thumb:hover,
.vmpx-entrega-stock-lista::-webkit-scrollbar-thumb:hover {
  background: #f0d574;
  background: var(--vmpx-gold-light);
}

/* ============================================ */
/* STOCK ITEMS */
/* ============================================ */
.vmpx-stock-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px;
}

.vmpx-stock-item {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vmpx-border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

.vmpx-stock-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: #d4af37;
  border-color: var(--vmpx-gold);
  transform: translateX(4px);
}

.vmpx-stock-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vmpx-stock-nombre {
  font-size: 16px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1.3;
}

.vmpx-stock-email {
  font-size: 14px;
  color: #d4af37;
  color: var(--vmpx-gold);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

.vmpx-stock-espacios {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vmpx-btn-seleccionar {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  background: linear-gradient(135deg, var(--vmpx-success), #2ecc71);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.vmpx-btn-seleccionar:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(39, 174, 96, 0.5);
}

.vmpx-btn-seleccionar:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.vmpx-btn-entregar-stock {
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
  background: linear-gradient(135deg, var(--vmpx-purple), #8e44ad);
  color: white;
  border: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(155, 89, 182, 0.3);
}

.vmpx-btn-entregar-stock:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(155, 89, 182, 0.5);
}

.vmpx-btn-entregar-stock:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================ */
/* FORMULARIOS */
/* ============================================ */
.vmpx-modal-select {
  width: 100%;
  padding: 12px 16px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--vmpx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vmpx-border);
  border-radius: 8px;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  font-size: 15px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.vmpx-modal-select:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--vmpx-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.vmpx-modal-select option {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--vmpx-bg-card);
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  padding: 8px;
}

.vmpx-form-entrega {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vmpx-border);
  border-radius: 12px;
  padding: 24px;
  margin-top: 20px;
}

.vmpx-form-label {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  font-weight: 500;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-form-input {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vmpx-border);
  border-radius: 8px;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  font-size: 15px;
  font-family: 'Rajdhani', sans-serif;
  transition: all 0.3s ease;
}

.vmpx-form-input:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--vmpx-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
  background: rgba(255, 255, 255, 0.08);
}

.vmpx-btn-enviar-entrega {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vmpx-gold), var(--vmpx-gold-light));
  color: #0a0a0a;
  color: var(--vmpx-bg-primary);
  border: none;
  padding: 12px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  margin-top: 12px;
}

.vmpx-btn-enviar-entrega:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
}

/* ============================================ */
/* ALERTAS */
/* ============================================ */
.vmpx-alerta-exito {
  background: rgba(39, 174, 96, 0.1);
  border: 2px solid #27ae60;
  border: 2px solid var(--vmpx-success);
  border-left: 5px solid #27ae60;
  border-left: 5px solid var(--vmpx-success);
  color: #27ae60;
  color: var(--vmpx-success);
  padding: 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  margin-top: 20px;
  animation: vmpx-fadeIn 0.4s ease-out;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-modal-confirmacion {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vmpx-border);
  border-radius: 12px;
}

.vmpx-modal-texto {
  font-size: 15px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  line-height: 1.6;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-modal-acciones {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.vmpx-btn-confirmar {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  background: linear-gradient(135deg, var(--vmpx-success), #2ecc71);
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-btn-confirmar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(39, 174, 96, 0.4);
}

.vmpx-btn-cancelar-modal {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  color: var(--vmpx-danger);
  border: 1px solid #e74c3c;
  border: 1px solid var(--vmpx-danger);
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-btn-cancelar-modal:hover {
  background: #e74c3c;
  background: var(--vmpx-danger);
  color: #fff;
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

/* ============================================ */
/* ANIMACIONES */
/* ============================================ */
@keyframes vmpx-fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vmpx-slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes vmpx-successPop {
  0% { transform: scale(0.9); opacity: 0; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

.vmpx-pedido-card {
  animation: vmpx-fadeIn 0.3s ease-out;
}

.vmpx-stock-item {
  animation: vmpx-slideIn 0.3s ease-out;
}

.vmpx-stock-item:nth-child(1) { animation-delay: 0s; }
.vmpx-stock-item:nth-child(2) { animation-delay: 0.05s; }
.vmpx-stock-item:nth-child(3) { animation-delay: 0.1s; }
.vmpx-stock-item:nth-child(4) { animation-delay: 0.15s; }
.vmpx-stock-item:nth-child(5) { animation-delay: 0.2s; }

.vmpx-alerta-exito {
  animation: vmpx-successPop 0.5s ease-out;
}

.vmpx-btn-entregar-stock.procesando {
  position: relative;
  pointer-events: none;
}

.vmpx-btn-entregar-stock.procesando::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: vmpx-spin 0.8s linear infinite;
  margin-left: 8px;
}

/* ============================================ */
/* BADGES ADICIONALES */
/* ============================================ */
.vmpx-stock-espacios-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background-color: rgba(39, 174, 96, 0.15);
  color: #27ae60;
  color: var(--vmpx-success);
  border: 1px solid rgba(39, 174, 96, 0.3);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  margin-top: 4px;
}

.vmpx-modal-section.destacada {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.02) 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 12px;
  padding: 16px;
}

.vmpx-modal-section.destacada .vmpx-modal-section-title {
  color: #d4af37;
  color: var(--vmpx-gold);
}

.vmpx-modal-section .vmpx-empty-text {
  text-align: center;
  padding: 40px 20px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  font-size: 15px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border: 1px dashed var(--vmpx-border);
}

.vmpx-modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
}

.vmpx-modal-loading .vmpx-spinner {
  width: 40px;
  height: 40px;
  border-width: 4px;
}

.vmpx-modal-loading-text {
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  font-size: 15px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

.vmpx-stock-item:hover .vmpx-stock-nombre {
  color: #d4af37;
  color: var(--vmpx-gold);
}

.vmpx-stock-item:hover .vmpx-stock-email {
  color: #f0d574;
  color: var(--vmpx-gold-light);
}

.vmpx-modal-body > * {
  transition: all 0.3s ease;
}

/* ============================================ */
/* UTILITIES */
/* ============================================ */
.vmpx-text-center {
  text-align: center;
}

.vmpx-mt-2 {
  margin-top: 16px;
}

.vmpx-mb-2 {
  margin-bottom: 16px;
}

/* ============================================ */
/* RESPONSIVE - TABLETS */
/* ============================================ */
@media (max-width: 1024px) {
  .vmpx-pedidos-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  .vmpx-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* ============================================ */
/* RESPONSIVE - MOBILE */
/* ============================================ */
@media (max-width: 768px) {
  .vmpx-header-content {
    flex-wrap: wrap;
    gap: 12px;
  }

  .vmpx-header-center {
    order: -1;
    width: 100%;
    justify-content: flex-start;
  }

  .vmpx-logo {
    font-size: 18px;
  }

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

  .vmpx-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vmpx-filter-buttons {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
  }

  .vmpx-filter-button {
    white-space: nowrap;
  }

  .vmpx-pedidos-grid {
    grid-template-columns: 1fr;
  }

  .vmpx-pedido-content {
    flex-direction: column;
  }

  .vmpx-pedido-imagen {
    width: 100%;
    height: 200px;
  }

  .vmpx-pedido-actions {
    flex-direction: column;
  }

  .vmpx-modal-content,
  .vmpx-modal-entrega-content {
    max-width: 95%;
    margin: 20px;
  }

  .vmpx-modal-info-grid,
  .vmpx-entrega-info-grid {
    grid-template-columns: 1fr;
  }

  .vmpx-stock-item {
    flex-direction: column;
    align-items: stretch;
  }

  .vmpx-btn-seleccionar {
    width: 100%;
  }

  .vmpx-stock-lista {
    max-height: 300px;
  }

  .vmpx-modal-select {
    font-size: 14px;
  }

  .vmpx-entrega-duracion-opciones {
    flex-direction: column;
  }

  .vmpx-entrega-preview-fechas {
    flex-direction: column;
  }
}

/* ============================================ */
/* PRINT STYLES */
/* ============================================ */
@media print {
  .vmpx-header,
  .vmpx-filters-section,
  .vmpx-pedido-actions,
  .vmpx-pedido-acciones-estado {
    display: none !important;
  }

  .vmpx-pedido-card {
    page-break-inside: avoid;
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #000;
  }
}










/* ============================================ */
/* 🆕 BADGE DE RENOVACIÓN EN TARJETAS */
/* ============================================ */
.vmpx-renovacion-badge {
  position: absolute;
  top: 15px;
  left: 8px; /* antes era 20px: ahora más a la izquierda */
  /* elimina 'right' para que no se estire */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #d4af37, #f0d989);
  color: #1a1a1a;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
  animation: vmpx-pulse-gold 2s infinite;
  z-index: 2;
}


@keyframes vmpx-pulse-gold {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
  }
  50% {
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.6);
  }
}

/* ============================================ */
/* 🆕 INFO DE RENOVACIÓN EN TARJETAS */
/* ============================================ */
.vmpx-renovacion-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: rgba(212, 175, 55, 0.1);
  border-left: 3px solid var(--cmc-gold);
  border-radius: 6px;
  margin-bottom: 12px;
}

.vmpx-renovacion-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cmc-text-secondary);
}

.vmpx-renovacion-item svg {
  color: var(--cmc-gold);
  flex-shrink: 0;
}

/* ============================================ */
/* 🆕 ESTADÍSTICA DE RENOVACIONES */
/* ============================================ */
.vmpx-stat-renovacion {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(240, 217, 137, 0.1));
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.vmpx-stat-renovacion .vmpx-stat-icon {
  color: var(--cmc-gold);
}

/* ============================================ */
/* 🆕 FILTRO DE RENOVACIONES */
/* ============================================ */
.vmpx-filter-renovacion {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--cmc-gold);
}

.vmpx-filter-renovacion:hover {
  background: rgba(212, 175, 55, 0.2);
}

.vmpx-filter-renovacion.vmpx-filter-active {
  background: var(--cmc-gold);
  color: #1a1a1a;
  border-color: var(--cmc-gold);
}

/* ============================================ */
/* 🆕 BADGE MAYORISTA INLINE */
/* ============================================ */
.vmpx-badge-mayorista-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: linear-gradient(135deg, var(--cmc-gold), var(--cmc-gold-light));
  color: #1a1a1a;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
}

.vmpx-detalle-mayorista {
  color: var(--cmc-gold) !important;
  font-weight: 600;
}

/* ============================================ */
/* 🆕 DESGLOSE DE PRECIO EN TARJETA */
/* ============================================ */
.vmpx-precio-desglose {
  display: block;
  font-size: 11px;
  color: var(--cmc-text-tertiary);
  margin-top: 4px;
  font-weight: 400;
}

/* ============================================ */
/* 🆕 MODAL RENOVACIÓN BADGE */
/* ============================================ */
.vmpx-modal-renovacion-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(135deg, var(--cmc-gold), var(--cmc-gold-light));
  color: #1a1a1a;
  border-radius: 8px;
  font-weight: 700;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================ */
/* 🆕 SECCIÓN DE RENOVACIÓN ACTUAL */
/* ============================================ */
.vmpx-renovacion-actual {
  padding: 16px;
  background: rgba(212, 175, 55, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 8px;
  margin-bottom: 20px;
}

/* ============================================ */
/* 🆕 TIPO DE RENOVACIÓN */
/* ============================================ */
.vmpx-tipo-renovacion-section {
  margin-bottom: 24px;
}

.vmpx-renovacion-opcion {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 2px solid var(--cmc-border);
  border-radius: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vmpx-renovacion-opcion:hover {
  border-color: var(--cmc-gold);
  background: rgba(212, 175, 55, 0.05);
}

.vmpx-renovacion-opcion input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--cmc-gold);
}

.vmpx-renovacion-opcion input[type="radio"]:checked + .vmpx-renovacion-opcion-content {
  color: var(--cmc-gold);
}

.vmpx-renovacion-opcion-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1;
}

.vmpx-renovacion-opcion-content svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.vmpx-renovacion-opcion-content div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vmpx-renovacion-opcion-content strong {
  font-size: 14px;
  color: var(--cmc-text-primary);
}

.vmpx-renovacion-opcion-content small {
  font-size: 12px;
  color: var(--cmc-text-secondary);
  font-weight: 400;
}

/* ============================================ */
/* 🆕 DURACIÓN: TOGGLE MESES/DÍAS */
/* ============================================ */
.vmpx-entrega-duracion-section {
  margin-bottom: 24px;
}

.vmpx-duracion-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.vmpx-toggle-btn {
  flex: 1 1;
  padding: 10px 16px;
  border: 2px solid var(--cmc-border);
  background: var(--cmc-bg-secondary);
  color: var(--cmc-text-secondary);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.vmpx-toggle-btn:hover {
  border-color: var(--cmc-gold);
  background: rgba(212, 175, 55, 0.1);
}

.vmpx-toggle-btn.active {
  background: var(--cmc-gold);
  color: #1a1a1a;
  border-color: var(--cmc-gold);
}

/* ============================================ */
/* 🆕 OPCIONES DE DURACIÓN (MESES/DÍAS) */
/* ============================================ */
.vmpx-duracion-meses,
.vmpx-duracion-dias {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vmpx-duracion-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.vmpx-duracion-opcion {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 2px solid var(--cmc-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  font-weight: 600;
  background: var(--cmc-bg-secondary);
}

.vmpx-duracion-opcion:hover {
  border-color: var(--cmc-gold);
  background: rgba(212, 175, 55, 0.05);
}

.vmpx-duracion-opcion input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.vmpx-duracion-opcion input[type="radio"]:checked + span,
.vmpx-duracion-opcion input[type="radio"]:checked ~ span {
  color: var(--cmc-gold);
}

.vmpx-duracion-opcion:has(input[type="radio"]:checked) {
  border-color: var(--cmc-gold);
  background: rgba(212, 175, 55, 0.15);
  color: var(--cmc-gold);
}

.vmpx-duracion-custom {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vmpx-duracion-custom label {
  font-size: 13px;
  color: var(--cmc-text-secondary);
  font-weight: 600;
  min-width: 100px;
}

.vmpx-duracion-custom input {
  flex: 1 1;
  padding: 10px 14px;
  border: 2px solid var(--cmc-border);
  border-radius: 8px;
  background: var(--cmc-bg-secondary);
  color: var(--cmc-text-primary);
  font-size: 14px;
}

.vmpx-duracion-custom input:focus {
  outline: none;
  border-color: var(--cmc-gold);
}

/* ============================================ */
/* 🆕 PREVIEW DE FECHA */
/* ============================================ */
.vmpx-fecha-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(212, 175, 55, 0.1);
  border-left: 3px solid var(--cmc-gold);
  border-radius: 6px;
  font-size: 13px;
  color: var(--cmc-text-primary);
  font-weight: 600;
  margin-top: 12px;
}

.vmpx-fecha-preview svg {
  color: var(--cmc-gold);
  flex-shrink: 0;
}

/* ============================================ */
/* 🆕 NOTIFICACIONES (en lugar de alert) */
/* ============================================ */
.vmpx-notificacion {
  position: fixed;
  top: 80px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  animation: vmpx-slide-in 0.3s ease;
  max-width: 400px;
}

@keyframes vmpx-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.vmpx-notificacion-exito {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

.vmpx-notificacion-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.vmpx-notificacion-icono {
  flex-shrink: 0;
}

.vmpx-notificacion-contenido h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 700;
}

.vmpx-notificacion-contenido p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

/* ============================================ */
/* 🆕 SPINNER PEQUEÑO (para botones) */
/* ============================================ */
.vmpx-spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: vmpx-spin 0.6s linear infinite;
  display: inline-block;
}

@keyframes vmpx-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================ */
/* 📱 RESPONSIVE - MOBILE */
/* ============================================ */
@media (max-width: 768px) {
  .vmpx-renovacion-badge {
    font-size: 10px;
    padding: 5px 10px;
    gap: 4px;
  }

  .vmpx-renovacion-info {
    padding: 8px;
  }

  .vmpx-renovacion-item {
    font-size: 12px;
  }

  .vmpx-duracion-toggle {
    flex-direction: column;
  }

  .vmpx-duracion-opciones {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  }

  .vmpx-duracion-opcion {
    padding: 10px;
    font-size: 12px;
  }

  .vmpx-duracion-custom {
    flex-direction: column;
    align-items: stretch;
  }

  .vmpx-duracion-custom label {
    min-width: auto;
  }

  .vmpx-notificacion {
    right: 10px;
    left: 10px;
    max-width: none;
  }

  .vmpx-renovacion-opcion-content strong {
    font-size: 13px;
  }

  .vmpx-renovacion-opcion-content small {
    font-size: 11px;
  }
}



/* ============================================ */
/* 🆕 ESPACIOS GRID (SELECTOR DE PERFILES) */
/* ============================================ */
.vmpx-espacios-section {
  margin-top: 20px;
  margin-bottom: 24px;
}

.vmpx-espacios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-top: 12px;
}

.vmpx-espacio-btn {
  background-color: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border: 2px solid var(--vmpx-border);
  border-radius: 12px;
  padding: 16px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-espacio-btn:hover:not(:disabled) {
  border-color: #d4af37;
  border-color: var(--vmpx-gold);
  background-color: rgba(212, 175, 55, 0.1);
  transform: translateY(-2px);
}

.vmpx-espacio-btn.seleccionado {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
  border-color: #d4af37;
  border-color: var(--vmpx-gold);
  border-width: 3px;
}

.vmpx-espacio-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.vmpx-espacio-numero {
  font-size: 16px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
}

.vmpx-espacio-email {
  font-size: 11px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  text-align: center;
  word-break: break-all;
}

.vmpx-espacio-btn.seleccionado .vmpx-espacio-numero {
  color: #d4af37;
  color: var(--vmpx-gold);
}

.vmpx-espacio-btn svg {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #d4af37;
  color: var(--vmpx-gold);
}

/* ============================================ */
/* 🆕 INSTRUCCIONES TEXTAREA */
/* ============================================ */
.vmpx-instrucciones-section {
  margin-top: 20px;
}

.vmpx-instrucciones-section textarea {
  width: 100%;
  min-height: 100px;
  padding: 14px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border: 2px solid var(--vmpx-border);
  border-radius: 10px;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
  resize: vertical;
  transition: all 0.3s ease;
}

.vmpx-instrucciones-section textarea:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--vmpx-gold);
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.vmpx-instrucciones-section textarea::placeholder {
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  opacity: 0.7;
}

/* ============================================ */
/* 🆕 NO STOCK MESSAGE */
/* ============================================ */
.vmpx-no-stock {
  text-align: center;
  padding: 40px 20px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  font-size: 15px;
  font-family: 'Rajdhani', sans-serif;
  background-color: rgba(231, 76, 60, 0.1);
  border: 2px dashed #e74c3c;
  border: 2px dashed var(--vmpx-danger);
  border-radius: 12px;
}

/* ============================================ */
/* 🆕 FILTROS BAR (actualización) */
/* ============================================ */
.vmpx-filters-bar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.vmpx-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.vmpx-search-box svg {
  position: absolute;
  left: 16px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  pointer-events: none;
}

.vmpx-search-input {
  width: 100%;
  padding: 12px 12px 12px 48px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--vmpx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vmpx-border);
  border-radius: 8px;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  font-size: 15px;
  font-family: 'Rajdhani', sans-serif;
  transition: all 0.3s ease;
}

.vmpx-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.vmpx-filter-btn {
  background-color: rgba(255, 255, 255, 0.05);
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vmpx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vmpx-filter-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #d4af37;
  border-color: var(--vmpx-gold);
}

.vmpx-filter-active {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vmpx-gold), var(--vmpx-gold-light));
  color: #0a0a0a;
  color: var(--vmpx-bg-primary);
  border-color: #d4af37;
  border-color: var(--vmpx-gold);
  font-weight: 700;
}

/* ============================================ */
/* 🆕 PEDIDO CARD UPDATES */
/* ============================================ */
.vmpx-pedido-card {
  position: relative; /* Para el badge de renovación */
}

.vmpx-pedido-numero {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  font-size: 13px;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-pedido-estado {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-estado-pendiente {
  background-color: rgba(243, 156, 18, 0.2);
  color: #f39c12;
  color: var(--vmpx-warning);
  border: 1px solid #f39c12;
  border: 1px solid var(--vmpx-warning);
}

.vmpx-estado-proceso {
  background-color: rgba(52, 152, 219, 0.2);
  color: #3498db;
  color: var(--vmpx-info);
  border: 1px solid #3498db;
  border: 1px solid var(--vmpx-info);
}

.vmpx-estado-entregado {
  background-color: rgba(39, 174, 96, 0.2);
  color: #27ae60;
  color: var(--vmpx-success);
  border: 1px solid #27ae60;
  border: 1px solid var(--vmpx-success);
}

.vmpx-estado-cancelado {
  background-color: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  color: var(--vmpx-danger);
  border: 1px solid #e74c3c;
  border: 1px solid var(--vmpx-danger);
}

.vmpx-pedido-imagen {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}

.vmpx-pedido-imagen img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.vmpx-pedido-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vmpx-pedido-producto {
  font-size: 18px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  margin: 0;
  line-height: 1.3;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-pedido-codigo {
  font-size: 12px;
  color: #d4af37;
  color: var(--vmpx-gold);
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-pedido-detalles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vmpx-detalle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-pedido-precio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  color: #d4af37;
  color: var(--vmpx-gold);
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-pedido-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid var(--vmpx-border);
}

.vmpx-btn-secundario {
  flex: 1 1;
  min-width: 120px;
  background-color: rgba(255, 255, 255, 0.05);
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vmpx-border);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.vmpx-btn-secundario:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #d4af37;
  border-color: var(--vmpx-gold);
}

.vmpx-btn-rechazar {
  flex: 1 1;
  min-width: 120px;
  background-color: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  color: var(--vmpx-danger);
  border: 1px solid #e74c3c;
  border: 1px solid var(--vmpx-danger);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.vmpx-btn-rechazar:hover:not(:disabled) {
  background-color: #e74c3c;
  background-color: var(--vmpx-danger);
  color: white;
}

.vmpx-btn-rechazar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================ */
/* 🆕 EMPTY STATE UPDATE */
/* ============================================ */
.vmpx-empty-state {
  text-align: center;
  padding: 80px 20px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--vmpx-bg-card);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vmpx-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.vmpx-empty-state svg {
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  opacity: 0.5;
}

.vmpx-empty-state h3 {
  font-size: 24px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--vmpx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.vmpx-empty-state p {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--vmpx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  max-width: 500px;
}

/* ============================================ */
/* 🆕 RESPONSIVE UPDATES */
/* ============================================ */
@media (max-width: 768px) {
  .vmpx-espacios-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .vmpx-espacio-btn {
    padding: 12px 8px;
  }

  .vmpx-espacio-numero {
    font-size: 14px;
  }

  .vmpx-espacio-email {
    font-size: 10px;
  }

  .vmpx-filter-buttons {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
  }

  .vmpx-filter-btn {
    white-space: nowrap;
  }
}



/* src/pages/vendedor/ChatPedido.css */
/* PREFIJO: vchat- (Vendedor Chat) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --vchat-bg-primary: #0a0a0a;
  --vchat-bg-secondary: rgba(10, 10, 10, 0.95);
  --vchat-bg-card: rgba(20, 20, 20, 0.95);
  --vchat-gold: #d4af37;
  --vchat-gold-light: #f0d574;
  --vchat-text-primary: #e9ecef;
  --vchat-text-secondary: #b7bcc4;
  --vchat-border: rgba(255, 255, 255, 0.12);
  --vchat-success: #27ae60;
  --vchat-danger: #e74c3c;
  --vchat-info: #3498db;
  --vchat-warning: #f39c12;
  --vchat-purple: #6366f1;
  --vchat-admin: #ef4444;
}

/* ============================================ */
/* RESET & BASE */
/* ============================================ */
.vchat-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #0a0a0a 0%, #0f0f0f 100%);
  background: linear-gradient(135deg, var(--vchat-bg-primary) 0%, #0f0f0f 100%);
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.vchat-header {
  background: linear-gradient(135deg, rgba(20, 20, 20, 0.98), rgba(10, 10, 10, 0.95));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--vchat-border);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  animation: vchat-slideDown 0.5s ease-out;
}

.vchat-header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.vchat-back-button-header {
  background: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--vchat-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vchat-border);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vchat-back-button-header:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(-4px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.vchat-header-center {
  flex: 1 1;
  display: flex;
  justify-content: center;
}

.vchat-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vchat-header-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vchat-gold), var(--vchat-gold-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  color: var(--vchat-bg-primary);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.vchat-header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vchat-header-title {
  font-size: 20px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--vchat-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.vchat-mayorista-badge {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vchat-gold), var(--vchat-gold-light));
  color: #0a0a0a;
  color: var(--vchat-bg-primary);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.vchat-header-subtitle {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--vchat-text-secondary);
  margin: 0;
}

.vchat-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vchat-admin-badge {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  background: linear-gradient(135deg, var(--vchat-admin), #dc2626);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.vchat-pedido-button {
  background: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--vchat-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vchat-border);
  width: 44px;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vchat-pedido-button:hover {
  background: rgba(212, 175, 55, 0.2);
  border-color: #d4af37;
  border-color: var(--vchat-gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

/* ============================================ */
/* INFO BAR */
/* ============================================ */
.vchat-pedido-info-bar {
  background: rgba(20, 20, 20, 0.95);
  background: var(--vchat-bg-card);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--vchat-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.vchat-pedido-info-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.vchat-pedido-info-imagen {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid #d4af37;
  border: 2px solid var(--vchat-gold);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

.vchat-pedido-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #e9ecef;
  color: var(--vchat-text-primary);
}

.vchat-pedido-info-label {
  color: #b7bcc4;
  color: var(--vchat-text-secondary);
  font-weight: 500;
}

.vchat-pedido-info-value {
  font-weight: 600;
  color: #e9ecef;
  color: var(--vchat-text-primary);
}

.vchat-pedido-info-value-price {
  font-weight: 700;
  color: #d4af37;
  color: var(--vchat-gold);
  font-family: 'Orbitron', monospace;
  font-size: 16px;
}

.vchat-pedido-info-divider {
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.12);
  background: var(--vchat-border);
}

.vchat-pedido-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: white;
}

.vchat-badge-pendiente {
  background: #f39c12;
  background: var(--vchat-warning);
}

.vchat-badge-proceso {
  background: #3498db;
  background: var(--vchat-info);
}

.vchat-badge-entregado {
  background: #27ae60;
  background: var(--vchat-success);
}

.vchat-badge-completado {
  background: #27ae60;
  background: var(--vchat-success);
}

.vchat-badge-cancelado {
  background: #e74c3c;
  background: var(--vchat-danger);
}

.vchat-badge-default {
  background: #6b7280;
}

/* ============================================ */
/* CHAT CONTAINER */
/* ============================================ */
.vchat-chat-container {
  flex: 1 1;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.2);
  padding: 20px;
}

.vchat-mensajes-lista {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* ============================================ */
/* EMPTY STATE */
/* ============================================ */
.vchat-empty-chat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  text-align: center;
  color: #b7bcc4;
  color: var(--vchat-text-secondary);
}

.vchat-empty-icon {
  color: #d4af37;
  color: var(--vchat-gold);
  margin-bottom: 20px;
  opacity: 0.5;
}

.vchat-empty-title {
  font-size: 24px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--vchat-text-primary);
  margin: 0 0 12px 0;
}

.vchat-empty-text {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--vchat-text-secondary);
  margin: 0;
  max-width: 400px;
  line-height: 1.6;
}

/* ============================================ */
/* MENSAJES */
/* ============================================ */
.vchat-mensaje-wrapper {
  display: flex;
  margin: 15px 0;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 8px;
  animation: vchat-fadeIn 0.3s ease-out;
}

.vchat-mensaje-wrapper.vchat-mensaje-mio {
  justify-content: flex-end;
}

.vchat-mensaje-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.vchat-avatar-admin {
  background: #ef4444;
  background: var(--vchat-admin);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

.vchat-avatar-cliente {
  background: #27ae60;
  background: var(--vchat-success);
  box-shadow: 0 0 15px rgba(39, 174, 96, 0.4);
}

.vchat-avatar-vendedor {
  background: #6366f1;
  background: var(--vchat-purple);
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
}

.vchat-mensaje-content {
  max-width: 70%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.vchat-mensaje-content.vchat-mensaje-content-mio {
  align-items: flex-end;
}

.vchat-mensaje-sender {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--vchat-text-secondary);
  margin-bottom: 4px;
  font-weight: 600;
}

.vchat-mensaje-sender.vchat-sender-admin {
  color: #ef4444;
  color: var(--vchat-admin);
}

.vchat-mensaje-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  word-break: break-word;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  animation: vchat-scaleIn 0.3s ease-out;
}

.vchat-bubble-mio {
  background: linear-gradient(135deg, #6366f1, #5558e3);
  background: linear-gradient(135deg, var(--vchat-purple), #5558e3);
  color: white;
  border-radius: 18px 18px 4px 18px;
}

.vchat-bubble-admin {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  background: linear-gradient(135deg, var(--vchat-admin), #dc2626);
  color: white;
  border-radius: 18px 18px 18px 4px;
}

.vchat-bubble-otro {
  background: #374151;
  color: white;
  border-radius: 18px 18px 18px 4px;
}

.vchat-mensaje-texto {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: white;
}

.vchat-mensaje-time {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  text-align: right;
}

/* ============================================ */
/* INPUT CONTAINER */
/* ============================================ */
.vchat-input-container {
  background: rgba(20, 20, 20, 0.95);
  background: var(--vchat-bg-card);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid var(--vchat-border);
  padding: 20px 24px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.vchat-input-form {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
  align-items: center;
}

.vchat-input-field {
  flex: 1 1;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vchat-border);
  border-radius: 12px;
  color: #e9ecef;
  color: var(--vchat-text-primary);
  font-size: 15px;
  font-family: 'Rajdhani', sans-serif;
  transition: all 0.3s ease;
}

.vchat-input-field:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--vchat-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.vchat-input-field:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vchat-input-field::placeholder {
  color: #b7bcc4;
  color: var(--vchat-text-secondary);
}

.vchat-send-button {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #6366f1, #5558e3);
  background: linear-gradient(135deg, var(--vchat-purple), #5558e3);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.vchat-send-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6);
}

.vchat-send-button:disabled {
  background: #4b5563;
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}

.vchat-send-button.vchat-send-button-admin {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  background: linear-gradient(135deg, var(--vchat-admin), #dc2626);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.vchat-send-button.vchat-send-button-admin:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6);
}

.vchat-send-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top: 3px solid white;
  border-radius: 50%;
  animation: vchat-spin 0.8s linear infinite;
}

/* ============================================ */
/* MODAL */
/* ============================================ */
.vchat-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
  animation: vchat-fadeIn 0.3s ease-out;
}

.vchat-modal-content {
  background: rgba(20, 20, 20, 0.95);
  background: var(--vchat-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vchat-border);
  border-radius: 20px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  animation: vchat-scaleIn 0.3s ease-out;
}

.vchat-modal-header {
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--vchat-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: rgba(20, 20, 20, 0.95);
  background: var(--vchat-bg-card);
  z-index: 10;
}

.vchat-modal-title {
  font-size: 24px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--vchat-text-primary);
  margin: 0;
}

.vchat-modal-close {
  background: none;
  border: none;
  color: #b7bcc4;
  color: var(--vchat-text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.vchat-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--vchat-text-primary);
}

.vchat-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vchat-modal-imagen-container {
  width: 100%;
  max-height: 300px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid #d4af37;
  border: 2px solid var(--vchat-gold);
  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.3);
}

.vchat-modal-imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vchat-modal-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--vchat-border);
  border-radius: 12px;
  padding: 20px;
}

.vchat-modal-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--vchat-text-primary);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d4af37;
  color: var(--vchat-gold);
}

.vchat-modal-info-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vchat-modal-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.vchat-modal-info-item:last-child {
  border-bottom: none;
}

.vchat-modal-label {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--vchat-text-secondary);
  font-weight: 500;
}

.vchat-modal-label-bold {
  font-size: 16px;
  color: #e9ecef;
  color: var(--vchat-text-primary);
  font-weight: 700;
}

.vchat-modal-value {
  font-size: 15px;
  color: #e9ecef;
  color: var(--vchat-text-primary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vchat-modal-value-small {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--vchat-text-secondary);
  font-family: 'Courier New', monospace;
}

.vchat-modal-value-bold {
  font-size: 20px;
  font-weight: 900;
  color: #d4af37;
  color: var(--vchat-gold);
  font-family: 'Orbitron', monospace;
}

.vchat-modal-value-discount {
  font-size: 15px;
  color: #27ae60;
  color: var(--vchat-success);
  font-weight: 700;
}

.vchat-modal-mayorista-badge {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vchat-gold), var(--vchat-gold-light));
  color: #0a0a0a;
  color: var(--vchat-bg-primary);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
}

.vchat-modal-estado {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  color: white;
  justify-content: center;
}

.vchat-modal-id {
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border: 1px dashed var(--vchat-border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.vchat-modal-id-label {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--vchat-text-secondary);
  font-weight: 500;
}

.vchat-modal-id-value {
  font-size: 14px;
  color: #d4af37;
  color: var(--vchat-gold);
  font-family: 'Courier New', monospace;
  font-weight: 600;
}

.vchat-modal-footer {
  padding: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid var(--vchat-border);
  display: flex;
  justify-content: flex-end;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: rgba(20, 20, 20, 0.95);
  background: var(--vchat-bg-card);
}

.vchat-modal-button-cerrar {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vchat-gold), var(--vchat-gold-light));
  color: #0a0a0a;
  color: var(--vchat-bg-primary);
  border: none;
  padding: 12px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.vchat-modal-button-cerrar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
}

/* ============================================ */
/* LOADING */
/* ============================================ */
.vchat-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 20px;
}

.vchat-spinner {
  width: 60px;
  height: 60px;
  border: 6px solid rgba(255, 255, 255, 0.1);
  border-top: 6px solid #d4af37;
  border-top: 6px solid var(--vchat-gold);
  border-radius: 50%;
  animation: vchat-spin 1s linear infinite;
}

.vchat-loading-text {
  font-size: 18px;
  color: #b7bcc4;
  color: var(--vchat-text-secondary);
  font-weight: 600;
}

/* ============================================ */
/* ERROR */
/* ============================================ */
.vchat-error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;
  text-align: center;
}

.vchat-error-icon {
  font-size: 80px;
  margin-bottom: 24px;
}

.vchat-error-title {
  font-size: 28px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--vchat-text-primary);
  margin: 0 0 12px 0;
}

.vchat-error-text {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--vchat-text-secondary);
  margin: 0 0 24px 0;
}

.vchat-back-button {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--vchat-gold), var(--vchat-gold-light));
  color: #0a0a0a;
  color: var(--vchat-bg-primary);
  border: none;
  padding: 14px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.vchat-back-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
}

/* ============================================ */
/* SCROLLBAR */
/* ============================================ */
.vchat-chat-container::-webkit-scrollbar,
.vchat-modal-content::-webkit-scrollbar {
  width: 8px;
}

.vchat-chat-container::-webkit-scrollbar-track,
.vchat-modal-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.vchat-chat-container::-webkit-scrollbar-thumb,
.vchat-modal-content::-webkit-scrollbar-thumb {
  background: #d4af37;
  background: var(--vchat-gold);
  border-radius: 10px;
}

.vchat-chat-container::-webkit-scrollbar-thumb:hover,
.vchat-modal-content::-webkit-scrollbar-thumb:hover {
  background: #f0d574;
  background: var(--vchat-gold-light);
}

/* ============================================ */
/* ANIMATIONS */
/* ============================================ */
@keyframes vchat-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

@keyframes vchat-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================ */
/* RESPONSIVE - TABLETS */
/* ============================================ */
@media (max-width: 1024px) {
  .vchat-pedido-info-content {
    gap: 12px;
  }

  .vchat-mensaje-content {
    max-width: 80%;
  }
}

/* ============================================ */
/* RESPONSIVE - MOBILE */
/* ============================================ */
@media (max-width: 768px) {
  .vchat-header-content {
    flex-wrap: wrap;
    gap: 12px;
  }

  .vchat-header-title {
    font-size: 16px;
  }

  .vchat-pedido-info-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .vchat-pedido-info-divider {
    display: none;
  }

  .vchat-mensaje-content {
    max-width: 85%;
  }

  .vchat-input-form {
    gap: 8px;
  }

  .vchat-input-field {
    padding: 12px 16px;
    font-size: 14px;
  }

  .vchat-send-button {
    width: 44px;
    height: 44px;
  }

  .vchat-modal-content {
    max-width: 100%;
    max-height: 95vh;
  }

  .vchat-modal-body {
    padding: 16px;
  }
}

/* src/pages/admin/Dashboard.css */
/* PREFIJO: adx- (Admin Dashboard eXtended) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --adx-bg-primary: #0a0a0a;
  --adx-bg-secondary: rgba(10, 10, 10, 0.95);
  --adx-bg-card: rgba(20, 20, 20, 0.95);
  --adx-gold: #d4af37;
  --adx-gold-light: #f0d574;
  --adx-text-primary: #e9ecef;
  --adx-text-secondary: #b7bcc4;
  --adx-border: rgba(255, 255, 255, 0.12);
  --adx-success: #27ae60;
  --adx-warning: #f39c12;
  --adx-danger: #e74c3c;
  --adx-info: #3498db;
  --adx-purple: #9b59b6;
}

/* ============================================ */
/* RESET & BASE */
/* ============================================ */
.adx-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--adx-bg-primary);
  font-family: 'Rajdhani', sans-serif;
}

.adx-container * {
  box-sizing: border-box;
}

/* ============================================ */
/* LOADING */
/* ============================================ */
.adx-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--adx-bg-primary);
  gap: 20px;
}

.adx-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.1);
  border-top: 5px solid #d4af37;
  border-top: 5px solid var(--adx-gold);
  border-radius: 50%;
  animation: adx-spin 1s linear infinite;
}

@keyframes adx-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.adx-loading-text {
  color: #b7bcc4;
  color: var(--adx-text-secondary);
  font-size: 16px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.adx-header {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--adx-bg-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--adx-border);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.adx-header-content {
  max-width: 1800px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.adx-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.adx-logo-image {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid #d4af37;
  border: 2px solid var(--adx-gold);
  transition: transform 0.3s ease;
}

.adx-logo-image:hover {
  transform: scale(1.05);
}

.adx-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adx-logo-text {
  font-size: 20px;
  font-weight: 900;
  font-family: 'Orbitron', monospace;
  letter-spacing: 2px;
  margin: 0;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--adx-gold), var(--adx-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.adx-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background-color: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  color: var(--adx-danger);
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: -webkit-fit-content;
  width: fit-content;
}

.adx-header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.adx-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.adx-user-name {
  font-size: 15px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--adx-text-primary);
  font-family: 'Rajdhani', sans-serif;
}

.adx-user-role {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--adx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
}

.adx-logout-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--adx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--adx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.adx-logout-button:hover {
  background-color: rgba(231, 76, 60, 0.15);
  border-color: #e74c3c;
  border-color: var(--adx-danger);
  color: #e74c3c;
  color: var(--adx-danger);
  transform: translateY(-2px);
}

/* ============================================ */
/* MAIN */
/* ============================================ */
.adx-main {
  padding: 40px 24px;
}

.adx-main-content {
  max-width: 1800px;
  margin: 0 auto;
}

/* ============================================ */
/* BIENVENIDA */
/* ============================================ */
.adx-welcome-section {
  margin-bottom: 40px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.adx-page-title {
  font-size: 36px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--adx-text-primary);
  margin: 0 0 12px 0;
  font-family: 'Orbitron', monospace;
  display: flex;
  align-items: center;
  gap: 16px;
}

.adx-welcome-text {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--adx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.adx-welcome-text strong {
  color: #d4af37;
  color: var(--adx-gold);
  font-weight: 700;
}

/* ============================================ */
/* SECCIONES */
/* ============================================ */
.adx-section {
  margin-bottom: 48px;
}

.adx-section-title {
  font-size: 22px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--adx-text-primary);
  margin: 0 0 24px 0;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ============================================ */
/* ESTADÍSTICAS GRID */
/* ============================================ */
.adx-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.adx-stat-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--adx-bg-card);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--adx-border);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.adx-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #d4af37, #f0d574);
  background: linear-gradient(90deg, var(--adx-gold), var(--adx-gold-light));
}

.adx-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  border-color: #d4af37;
  border-color: var(--adx-gold);
}

.adx-stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--adx-gold), var(--adx-gold-light));
}

.adx-stat-primary .adx-stat-icon {
  background: linear-gradient(135deg, #3498db, #5dade2);
  background: linear-gradient(135deg, var(--adx-info), #5dade2);
}

.adx-stat-vendedores .adx-stat-icon {
  background: linear-gradient(135deg, #9b59b6, #ae78d4);
  background: linear-gradient(135deg, var(--adx-purple), #ae78d4);
}

.adx-stat-premium .adx-stat-icon {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--adx-gold), var(--adx-gold-light));
}

.adx-stat-clientes .adx-stat-icon {
  background: linear-gradient(135deg, #1abc9c, #48c9b0);
}

.adx-stat-productos .adx-stat-icon {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.adx-stat-pendientes .adx-stat-icon {
  background: linear-gradient(135deg, #f39c12, #f8b739);
  background: linear-gradient(135deg, var(--adx-warning), #f8b739);
}

.adx-stat-aprobados .adx-stat-icon {
  background: linear-gradient(135deg, #27ae60, #52be80);
  background: linear-gradient(135deg, var(--adx-success), #52be80);
}

.adx-stat-rechazados .adx-stat-icon {
  background: linear-gradient(135deg, #e74c3c, #ec7063);
  background: linear-gradient(135deg, var(--adx-danger), #ec7063);
}

.adx-stat-pedidos .adx-stat-icon {
  background: linear-gradient(135deg, #3498db, #5dade2);
  background: linear-gradient(135deg, var(--adx-info), #5dade2);
}

.adx-stat-pedidos-pendientes .adx-stat-icon {
  background: linear-gradient(135deg, #f39c12, #f8b739);
  background: linear-gradient(135deg, var(--adx-warning), #f8b739);
}

.adx-stat-pedidos-aprobados .adx-stat-icon {
  background: linear-gradient(135deg, #3498db, #5dade2);
  background: linear-gradient(135deg, var(--adx-info), #5dade2);
}

.adx-stat-pedidos-entregados .adx-stat-icon {
  background: linear-gradient(135deg, #27ae60, #52be80);
  background: linear-gradient(135deg, var(--adx-success), #52be80);
}

.adx-stat-content {
  flex: 1 1;
  text-align: right;
}

.adx-stat-value {
  font-size: 32px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--adx-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1;
}

.adx-stat-label {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--adx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

/* ============================================ */
/* ACCIONES RÁPIDAS */
/* ============================================ */
.adx-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.adx-action-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--adx-bg-card);
  border-radius: 14px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--adx-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.adx-action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #d4af37, #f0d574);
  background: linear-gradient(90deg, var(--adx-gold), var(--adx-gold-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.adx-action-card:hover::before {
  transform: scaleX(1);
}

.adx-action-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
  border-color: #d4af37;
  border-color: var(--adx-gold);
}

.adx-action-highlight {
  border: 2px solid #f39c12;
  border: 2px solid var(--adx-warning);
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.1) 0%, rgba(243, 156, 18, 0.05) 100%);
}

.adx-action-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: linear-gradient(135deg, #3498db, #5dade2);
  background: linear-gradient(135deg, var(--adx-info), #5dade2);
  transition: transform 0.3s ease;
}

.adx-action-card:hover .adx-action-icon {
  transform: scale(1.1) rotate(5deg);
}

.adx-icon-crear {
  background: linear-gradient(135deg, #27ae60, #52be80);
  background: linear-gradient(135deg, var(--adx-success), #52be80);
}

.adx-icon-vendedores {
  background: linear-gradient(135deg, #9b59b6, #ae78d4);
  background: linear-gradient(135deg, var(--adx-purple), #ae78d4);
}

.adx-icon-mayoristas {
  background: linear-gradient(135deg, #1abc9c, #48c9b0);
}

.adx-icon-aprobar {
  background: linear-gradient(135deg, #f39c12, #f8b739);
  background: linear-gradient(135deg, var(--adx-warning), #f8b739);
}

.adx-icon-productos {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.adx-icon-chats {
  background: linear-gradient(135deg, #3498db, #5dade2);
  background: linear-gradient(135deg, var(--adx-info), #5dade2);
}

.adx-icon-pedidos {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--adx-gold), var(--adx-gold-light));
}

.adx-icon-categorias {
  background: linear-gradient(135deg, #e74c3c, #ec7063);
}

.adx-icon-asignar {
  background: linear-gradient(135deg, #f39c12, #f8b739);
}

.adx-icon-creditos {
  background: linear-gradient(135deg, #27ae60, #52be80);
}

.adx-icon-billeteras {
  background: linear-gradient(135deg, #3498db, #5dade2);
}

.adx-icon-transacciones {
  background: linear-gradient(135deg, #9b59b6, #ae78d4);
}

.adx-icon-estadisticas {
  background: linear-gradient(135deg, #d4af37, #f0d574);
}

.adx-icon-publicacion {
  background: linear-gradient(135deg, #1abc9c, #48c9b0);
}

.adx-icon-config {
  background: linear-gradient(135deg, #7f8c8d, #95a5a6);
}

.adx-action-title {
  font-size: 16px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--adx-text-primary);
  margin: 0 0 8px 0;
  font-family: 'Rajdhani', sans-serif;
}

.adx-action-desc {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--adx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.adx-action-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #e74c3c, #ec7063);
  background: linear-gradient(135deg, var(--adx-danger), #ec7063);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
  animation: adx-pulse-badge 2s ease-in-out infinite;
}

@keyframes adx-pulse-badge {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.6);
  }
}

/* ============================================ */
/* ACTIVIDAD RECIENTE */
/* ============================================ */
.adx-activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adx-activity-item {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--adx-bg-card);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--adx-border);
  transition: all 0.3s ease;
  cursor: pointer;
}

.adx-activity-item:hover {
  transform: translateX(8px);
  border-color: #d4af37;
  border-color: var(--adx-gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

.adx-activity-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--adx-gold), var(--adx-gold-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  color: var(--adx-bg-primary);
  flex-shrink: 0;
}

.adx-activity-content {
  flex: 1 1;
  min-width: 0;
}

.adx-activity-text {
  font-size: 14px;
  color: #e9ecef;
  color: var(--adx-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adx-activity-time {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--adx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* RESPONSIVE */
/* ============================================ */
@media (max-width: 1024px) {
  .adx-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .adx-actions-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 768px) {
  .adx-header-content {
    flex-wrap: wrap;
  }

  .adx-user-info {
    display: none;
  }

  .adx-page-title {
    font-size: 28px;
  }

  .adx-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .adx-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .adx-main {
    padding: 24px 16px;
  }

  .adx-welcome-section {
    padding: 20px;
  }

  .adx-page-title {
    font-size: 24px;
  }

  .adx-stats-grid {
    grid-template-columns: 1fr;
  }

  .adx-actions-grid {
    grid-template-columns: 1fr;
  }

  .adx-logo-text {
    font-size: 16px;
  }
}
/* src/pages/admin/ProductosVendedor.css */
/* PREFIJO: pvx- (Productos Vendedor eXtended) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --pvx-bg-primary: #0a0a0a;
  --pvx-bg-secondary: rgba(10, 10, 10, 0.95);
  --pvx-bg-card: rgba(20, 20, 20, 0.95);
  --pvx-text-primary: #e9ecef;
  --pvx-text-secondary: #b7bcc4;
  --pvx-border: rgba(255, 255, 255, 0.12);
  --pvx-success: #27ae60;
  --pvx-warning: #f39c12;
  --pvx-danger: #e74c3c;
  --pvx-info: #3498db;
  --pvx-gold: #d4af37;
}

/* ============================================ */
/* BASE & LAYOUT */
/* ============================================ */
.pvx-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--pvx-bg-primary);
  color: #e9ecef;
  color: var(--pvx-text-primary);
  font-family: 'Rajdhani', sans-serif;
  padding: 24px;
}

.pvx-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.pvx-header button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--pvx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--pvx-border);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pvx-header button:hover {
  background-color: #d4af37;
  background-color: var(--pvx-gold);
  color: #0a0a0a;
  color: var(--pvx-bg-primary);
  border-color: #d4af37;
  border-color: var(--pvx-gold);
}

.pvx-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

/* ============================================ */
/* ESTADÍSTICAS */
/* ============================================ */
.pvx-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.pvx-stats span {
  font-size: 14px;
  font-weight: 500;
  color: #b7bcc4;
  color: var(--pvx-text-secondary);
}

/* ============================================ */
/* FILTROS */
/* ============================================ */
.pvx-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
}

.pvx-filters button {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--pvx-bg-secondary);
  color: #e9ecef;
  color: var(--pvx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--pvx-border);
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pvx-filters button:hover {
  background-color: #3498db;
  background-color: var(--pvx-info);
  border-color: #3498db;
  border-color: var(--pvx-info);
  color: #0a0a0a;
  color: var(--pvx-bg-primary);
}

.pvx-filters .active {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--pvx-gold), #f0d574);
  border-color: #d4af37;
  border-color: var(--pvx-gold);
  color: #0a0a0a;
  color: var(--pvx-bg-primary);
}

/* ============================================ */
/* GRID DE PRODUCTOS */
/* ============================================ */
.pvx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

/* ============================================ */
/* TARJETA DE PRODUCTO */
/* ============================================ */
.pvx-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--pvx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--pvx-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.pvx-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  border-color: #d4af37;
  border-color: var(--pvx-gold);
}

/* Badges */
.pvx-card-badges {
  display: flex;
  gap: 8px;
  padding: 12px;
}

.pvx-badge {
  background-color: #3498db;
  background-color: var(--pvx-info);
  color: #fff;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.pvx-badge-off {
  background-color: #e74c3c;
  background-color: var(--pvx-danger);
  color: #fff;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

/* Imagen */
.pvx-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

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

/* Contenido */
.pvx-card h3 {
  margin: 16px 12px 8px;
  font-size: 16px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--pvx-text-primary);
}

.pvx-card p {
  margin: 4px 12px;
  font-size: 14px;
  color: #b7bcc4;
  color: var(--pvx-text-secondary);
}

.pvx-card p strong {
  color: #e9ecef;
  color: var(--pvx-text-primary);
  font-weight: 700;
}

.pvx-card del {
  color: #b7bcc4;
  color: var(--pvx-text-secondary);
  margin-right: 8px;
}

/* Stock info */
.pvx-card .pvx-stock {
  margin: 8px 12px;
  font-size: 13px;
  font-weight: 600;
}

.pvx-stock-yes {
  color: #27ae60;
  color: var(--pvx-success);
}

.pvx-stock-no {
  color: #e74c3c;
  color: var(--pvx-danger);
}

/* ID */
.pvx-card .pvx-producto-id {
  margin: 4px 12px;
  font-size: 12px;
  color: #b7bcc4;
  color: var(--pvx-text-secondary);
}

/* Botón eliminar */
.pvx-card button {
  margin: 12px;
  padding: 8px 0;
  background-color: #e74c3c;
  background-color: var(--pvx-danger);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pvx-card button:hover {
  background-color: #c0392b;
}

/* ============================================ */
/* RESPONSIVE */
/* ============================================ */
@media (max-width: 768px) {
  .pvx-stats {
    flex-direction: column;
    gap: 12px;
  }

  .pvx-filters {
    flex-wrap: wrap;
  }

  .pvx-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .pvx-grid {
    grid-template-columns: 1fr;
  }

  .pvx-header h1 {
    font-size: 20px;
  }
}

/* ============================================ */
/* 🎨 CATEGORÍAS ADMIN - COMPLETO ESTILO PC */
/* ============================================ */

/* VARIABLES */
:root {
  --acatx-bg-primary: #0a0a0a;
  --acatx-bg-secondary: rgba(10, 10, 10, 0.95);
  --acatx-bg-card: rgba(20, 20, 20, 0.95);
  --acatx-text-primary: #e9ecef;
  --acatx-text-secondary: #b7bcc4;
  --acatx-border: rgba(255, 255, 255, 0.12);
  --acatx-success: #27ae60;
  --acatx-warning: #f39c12;
  --acatx-danger: #e74c3c;
  --acatx-info: #3498db;
  --acatx-gold: #d4af37;
  --acatx-arrow: #f0d574;
}

/* CONTENEDOR PRINCIPAL */
.acatx-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--acatx-bg-primary);
  color: #e9ecef;
  color: var(--acatx-text-primary);
  font-family: 'Rajdhani', sans-serif;
  padding: 24px;
}

.acatx-container * {
  box-sizing: border-box;
}

/* HEADER */
.acatx-header {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--acatx-bg-secondary);
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--acatx-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.acatx-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.acatx-back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255,255,255,0.1);
  color: #e9ecef;
  color: var(--acatx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--acatx-border);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}

.acatx-back-button:hover {
  background-color: #d4af37;
  background-color: var(--acatx-gold);
  color: #0a0a0a;
  color: var(--acatx-bg-primary);
  border-color: #d4af37;
  border-color: var(--acatx-gold);
}

.acatx-logo {
  font-size: 20px;
  font-weight: 900;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--acatx-gold), #f0d574);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* MAIN CONTENT */
.acatx-main {
  padding: 32px 0;
}

.acatx-main-content {
  max-width: 1800px;
  margin: 0 auto;
}

/* TITLE SECTION */
.acatx-title-section {
  margin-bottom: 32px;
}

.acatx-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 700;
}

.acatx-subtitle {
  color: #b7bcc4;
  color: var(--acatx-text-secondary);
  margin-top: 4px;
}

/* GRID LAYOUT */
.acatx-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
}

@media (max-width: 1024px) {
  .acatx-content-grid {
    grid-template-columns: 1fr;
  }
}

/* CARD BASE */
.acatx-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--acatx-bg-card);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--acatx-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  padding: 24px;
}

.acatx-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  margin-bottom: 16px;
  color: #e9ecef;
  color: var(--acatx-text-primary);
}

/* FORM SECTION */
.acatx-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.acatx-input-group,
.acatx-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acatx-label {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.acatx-required {
  color: #e74c3c;
  color: var(--acatx-danger);
}

.acatx-input,
.acatx-select,
.acatx-textarea {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--acatx-bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--acatx-border);
  border-radius: 8px;
  padding: 8px 12px;
  color: #e9ecef;
  color: var(--acatx-text-primary);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.3s ease;
}

.acatx-input:focus,
.acatx-select:focus,
.acatx-textarea:focus {
  border-color: #d4af37;
  border-color: var(--acatx-gold);
}

.acatx-select:disabled,
.acatx-input:disabled,
.acatx-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.acatx-hint {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--acatx-text-secondary);
  margin-top: -4px;
}

.acatx-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.acatx-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* 🆕 PREVIEW DE ICONOS */
.acatx-preview-icono {
  margin-top: 8px;
  padding: 12px;
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--acatx-bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--acatx-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.acatx-preview-img-small {
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
  border-radius: 6px;
}

.acatx-preview-img-large {
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
  border-radius: 8px;
}

/* FORM BUTTONS */
.acatx-button-group {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
}

.acatx-submit-button,
.acatx-cancel-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.acatx-submit-button {
  background-color: #3498db;
  background-color: var(--acatx-info);
  color: #0a0a0a;
  color: var(--acatx-bg-primary);
}

.acatx-submit-button:hover:not(:disabled) {
  background-color: #2e86c1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

.acatx-submit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.acatx-cancel-button {
  background-color: #e74c3c;
  background-color: var(--acatx-danger);
  color: #fff;
}

.acatx-cancel-button:hover:not(:disabled) {
  background-color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

.acatx-btn-spinner {
  width: 16px;
  height: 16px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top: 3px solid #fff;
  border-radius: 50%;
  animation: acatx-spin 1s linear infinite;
}

@keyframes acatx-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* LIST SECTION */
.acatx-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.acatx-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(212, 175, 55, 0.2);
  border-top: 4px solid #d4af37;
  border-top: 4px solid var(--acatx-gold);
  border-radius: 50%;
  animation: acatx-spin 1s linear infinite;
}

.acatx-loading-text {
  margin-top: 16px;
  color: #b7bcc4;
  color: var(--acatx-text-secondary);
  font-size: 14px;
}

.acatx-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #b7bcc4;
  color: var(--acatx-text-secondary);
}

.acatx-empty-state svg {
  opacity: 0.3;
}

.acatx-empty-text {
  margin-top: 16px;
  font-size: 14px;
}

.acatx-categorias-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 600px;
  overflow-y: auto;
  padding-right: 8px;
}

/* Scrollbar para la lista */
.acatx-categorias-lista::-webkit-scrollbar {
  width: 6px;
}

.acatx-categorias-lista::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.acatx-categorias-lista::-webkit-scrollbar-thumb {
  background: #d4af37;
  background: var(--acatx-gold);
  border-radius: 3px;
}

.acatx-categorias-lista::-webkit-scrollbar-thumb:hover {
  background: #f0d574;
}

/* CATEGORÍA ITEM */
.acatx-categoria-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--acatx-bg-secondary);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--acatx-border);
  transition: all 0.3s ease;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.acatx-categoria-item:hover {
  background-color: rgba(212, 175, 55, 0.1);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
  transform: translateY(-4px);
}

.acatx-categoria-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1;
  min-width: 0;
}

.acatx-categoria-icon {
  font-size: 28px;
  -webkit-user-select: none;
          user-select: none;
  flex-shrink: 0;
  position: relative;
}

.acatx-categoria-icon-img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

.acatx-categoria-icon-emoji {
  display: block;
}

.acatx-categoria-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  flex: 1 1;
}

.acatx-categoria-nombre {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.acatx-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
}

.acatx-badge-principal {
  background-color: #3498db;
  background-color: var(--acatx-info);
  color: #0a0a0a;
  color: var(--acatx-bg-primary);
}

.acatx-badge-sub {
  background-color: #d4af37;
  background-color: var(--acatx-gold);
  color: #0a0a0a;
  color: var(--acatx-bg-primary);
}

.acatx-categoria-padre,
.acatx-categoria-desc {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--acatx-text-secondary);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 🆕 ICONOS INFO */
.acatx-categoria-iconos-info {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.acatx-icono-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background-color: rgba(52, 152, 219, 0.15);
  color: #3498db;
  color: var(--acatx-info);
  border: 1px solid rgba(52, 152, 219, 0.3);
}

.acatx-icono-badge-large {
  background-color: rgba(212, 175, 55, 0.15);
  color: #d4af37;
  color: var(--acatx-gold);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.acatx-categoria-estado {
  font-size: 22px;
  -webkit-user-select: none;
          user-select: none;
  flex-shrink: 0;
}

.acatx-estado-activo {
  color: #27ae60;
  color: var(--acatx-success);
  filter: drop-shadow(0 0 6px #27ae60);
  filter: drop-shadow(0 0 6px var(--acatx-success));
}

.acatx-estado-inactivo {
  color: #e74c3c;
  color: var(--acatx-danger);
  filter: drop-shadow(0 0 6px #e74c3c);
  filter: drop-shadow(0 0 6px var(--acatx-danger));
}

/* ITEM ACTIONS */
.acatx-categoria-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.acatx-orden-button,
.acatx-action-button {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--acatx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--acatx-border);
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  color: #e9ecef;
  color: var(--acatx-text-primary);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
          user-select: none;
}

.acatx-orden-button:disabled,
.acatx-action-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.acatx-orden-button:hover:not(:disabled) {
  background-color: #f0d574;
  background-color: var(--acatx-arrow);
  color: #0a0a0a;
  color: var(--acatx-bg-primary);
  transform: scale(1.1);
}

.acatx-action-button:hover:not(:disabled) {
  transform: scale(1.1);
}

.acatx-action-editar:hover:not(:disabled) {
  background-color: #d4af37;
  background-color: var(--acatx-gold);
  color: #0a0a0a;
  color: var(--acatx-bg-primary);
}

.acatx-action-eliminar:hover:not(:disabled) {
  background-color: #e74c3c;
  background-color: var(--acatx-danger);
  color: #fff;
}

/* NOTIFICACIÓN */
.acatx-notificacion {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000;
  min-width: 320px;
  max-width: 500px;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  animation: slideInRight 0.3s ease;
}

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

.acatx-notificacion-success {
  background-color: rgba(39, 174, 96, 0.15);
  border: 1px solid #27ae60;
  border: 1px solid var(--acatx-success);
  color: #27ae60;
  color: var(--acatx-success);
}

.acatx-notificacion-error {
  background-color: rgba(231, 76, 60, 0.15);
  border: 1px solid #e74c3c;
  border: 1px solid var(--acatx-danger);
  color: #e74c3c;
  color: var(--acatx-danger);
}

.acatx-notificacion-info {
  background-color: rgba(52, 152, 219, 0.15);
  border: 1px solid #3498db;
  border: 1px solid var(--acatx-info);
  color: #3498db;
  color: var(--acatx-info);
}

.acatx-notificacion-contenido {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1;
}

.acatx-notificacion-cerrar {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.acatx-notificacion-cerrar:hover {
  opacity: 1;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .acatx-container {
    padding: 16px;
  }

  .acatx-content-grid {
    grid-template-columns: 1fr;
  }

  .acatx-categoria-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .acatx-categoria-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* src/pages/admin/TodosLosProductos.css */
/* PREFIJO: atprx- (Admin Todos PRoductos eXtended) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --atprx-bg-primary: #0a0a0a;
  --atprx-bg-secondary: rgba(10, 10, 10, 0.95);
  --atprx-bg-card: rgba(20, 20, 20, 0.95);
  --atprx-gold: #d4af37;
  --atprx-gold-light: #f0d574;
  --atprx-text-primary: #e9ecef;
  --atprx-text-secondary: #b7bcc4;
  --atprx-border: rgba(255, 255, 255, 0.12);
  --atprx-success: #27ae60;
  --atprx-warning: #f39c12;
  --atprx-danger: #e74c3c;
  --atprx-info: #3498db;
  --atprx-purple: #9b59b6;
}

/* ============================================ */
/* RESET & BASE */
/* ============================================ */
.atprx-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--atprx-bg-primary);
  font-family: 'Rajdhani', sans-serif;
}

.atprx-container * {
  box-sizing: border-box;
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.atprx-header {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--atprx-bg-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--atprx-border);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.atprx-header-content {
  max-width: 1800px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.atprx-back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--atprx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atprx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.atprx-back-button:hover {
  background-color: rgba(212, 175, 55, 0.15);
  border-color: #d4af37;
  border-color: var(--atprx-gold);
  color: #d4af37;
  color: var(--atprx-gold);
  transform: translateY(-2px);
}

.atprx-header-center {
  flex: 1 1;
  display: flex;
  justify-content: center;
}

.atprx-logo {
  font-size: 20px;
  font-weight: 900;
  font-family: 'Orbitron', monospace;
  letter-spacing: 2px;
  margin: 0;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--atprx-gold), var(--atprx-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================ */
/* MAIN */
/* ============================================ */
.atprx-main {
  padding: 40px 24px;
}

.atprx-main-content {
  max-width: 1800px;
  margin: 0 auto;
}

/* ============================================ */
/* TÍTULO */
/* ============================================ */
.atprx-title-section {
  margin-bottom: 40px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.atprx-title {
  font-size: 36px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--atprx-text-primary);
  margin: 0 0 12px 0;
  font-family: 'Orbitron', monospace;
  display: flex;
  align-items: center;
  gap: 16px;
}

.atprx-subtitle {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--atprx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* ESTADÍSTICAS */
/* ============================================ */
.atprx-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.atprx-stat-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--atprx-bg-card);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atprx-border);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.atprx-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #d4af37, #f0d574);
  background: linear-gradient(90deg, var(--atprx-gold), var(--atprx-gold-light));
}

.atprx-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  border-color: #d4af37;
  border-color: var(--atprx-gold);
}

.atprx-stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
}

.atprx-stat-icon-total {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--atprx-gold), var(--atprx-gold-light));
}

.atprx-stat-icon-aprobado {
  background: linear-gradient(135deg, #27ae60, #52be80);
  background: linear-gradient(135deg, var(--atprx-success), #52be80);
}

.atprx-stat-icon-pendiente {
  background: linear-gradient(135deg, #f39c12, #f8b739);
  background: linear-gradient(135deg, var(--atprx-warning), #f8b739);
}

.atprx-stat-icon-rechazado {
  background: linear-gradient(135deg, #e74c3c, #ec7063);
  background: linear-gradient(135deg, var(--atprx-danger), #ec7063);
}

.atprx-stat-icon-sin-stock {
  background: linear-gradient(135deg, #9b59b6, #ae78d4);
  background: linear-gradient(135deg, var(--atprx-purple), #ae78d4);
}

.atprx-stat-content {
  flex: 1 1;
  text-align: right;
}

.atprx-stat-number {
  font-size: 32px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--atprx-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1;
}

.atprx-stat-label {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--atprx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

/* ============================================ */
/* FILTROS */
/* ============================================ */
.atprx-filters-section {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.atprx-search-box {
  position: relative;
  width: 100%;
}

.atprx-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #b7bcc4;
  color: var(--atprx-text-secondary);
}

.atprx-search-input {
  width: 100%;
  padding: 14px 16px 14px 48px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--atprx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atprx-border);
  border-radius: 12px;
  color: #e9ecef;
  color: var(--atprx-text-primary);
  font-size: 15px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  transition: all 0.3s ease;
}

.atprx-search-input:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--atprx-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.atprx-search-input::placeholder {
  color: #b7bcc4;
  color: var(--atprx-text-secondary);
}

.atprx-filter-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.atprx-filter-label {
  font-size: 14px;
  font-weight: 600;
  color: #e9ecef;
  color: var(--atprx-text-primary);
  font-family: 'Rajdhani', sans-serif;
}

.atprx-filter-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.atprx-filter-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--atprx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atprx-border);
  border-radius: 10px;
  color: #e9ecef;
  color: var(--atprx-text-primary);
  font-size: 14px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
}

.atprx-filter-button:hover {
  background-color: rgba(212, 175, 55, 0.1);
  border-color: #d4af37;
  border-color: var(--atprx-gold);
  transform: translateY(-2px);
}

.atprx-filter-active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.1) 100%);
  border-color: #d4af37;
  border-color: var(--atprx-gold);
  color: #d4af37;
  color: var(--atprx-gold);
}

.atprx-select {
  padding: 12px 16px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--atprx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atprx-border);
  border-radius: 10px;
  color: #e9ecef;
  color: var(--atprx-text-primary);
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 200px;
}

.atprx-select:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--atprx-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.atprx-select option {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--atprx-bg-card);
  color: #e9ecef;
  color: var(--atprx-text-primary);
}

/* ============================================ */
/* LOADING */
/* ============================================ */
.atprx-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 20px;
}

.atprx-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.1);
  border-top: 5px solid #d4af37;
  border-top: 5px solid var(--atprx-gold);
  border-radius: 50%;
  animation: atprx-spin 1s linear infinite;
}

@keyframes atprx-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.atprx-loading-text {
  color: #b7bcc4;
  color: var(--atprx-text-secondary);
  font-size: 16px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

/* ============================================ */
/* EMPTY STATE */
/* ============================================ */
.atprx-empty-state {
  padding: 80px 20px;
  text-align: center;
}

.atprx-empty-icon {
  margin: 0 auto 24px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b7bcc4;
  color: var(--atprx-text-secondary);
  opacity: 0.5;
}

.atprx-empty-title {
  font-size: 24px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--atprx-text-primary);
  margin: 0 0 12px 0;
  font-family: 'Rajdhani', sans-serif;
}

.atprx-empty-text {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--atprx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* GRID DE PRODUCTOS */
/* ============================================ */
.atprx-productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

/* ============================================ */
/* TARJETA DE PRODUCTO */
/* ============================================ */
.atprx-producto-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--atprx-bg-card);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atprx-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.atprx-producto-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
  border-color: #d4af37;
  border-color: var(--atprx-gold);
}

/* BADGES */
.atprx-producto-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}

.atprx-producto-estado {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.atprx-estado-aprobado {
  background-color: rgba(39, 174, 96, 0.15);
  color: #27ae60;
  color: var(--atprx-success);
  border: 1px solid rgba(39, 174, 96, 0.3);
}

.atprx-estado-pendiente {
  background-color: rgba(243, 156, 18, 0.15);
  color: #f39c12;
  color: var(--atprx-warning);
  border: 1px solid rgba(243, 156, 18, 0.3);
}

.atprx-estado-rechazado {
  background-color: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  color: var(--atprx-danger);
  border: 1px solid rgba(231, 76, 60, 0.3);
}

.atprx-producto-oferta {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #e74c3c, #ec7063);
  background: linear-gradient(135deg, var(--atprx-danger), #ec7063);
  color: white;
  border-radius: 15px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
}

.atprx-producto-sin-stock {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background-color: rgba(155, 89, 182, 0.15);
  color: #9b59b6;
  color: var(--atprx-purple);
  border: 1px solid rgba(155, 89, 182, 0.3);
  border-radius: 15px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
}

/* IMAGEN */
.atprx-producto-imagen-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.atprx-producto-imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.atprx-producto-card:hover .atprx-producto-imagen {
  transform: scale(1.1);
}

.atprx-imagen-no-stock {
  opacity: 0.6;
  filter: grayscale(50%);
}

/* CONTENIDO */
.atprx-producto-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.atprx-producto-nombre {
  font-size: 18px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--atprx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1.3;
}

.atprx-producto-detalles {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--atprx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.atprx-producto-vendedor {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #b7bcc4;
  color: var(--atprx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

.atprx-producto-categoria {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #d4af37;
  color: var(--atprx-gold);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
}

.atprx-producto-precio {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.atprx-precio-old {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--atprx-text-secondary);
  text-decoration: line-through;
  font-family: 'Rajdhani', sans-serif;
}

.atprx-precio-final {
  font-size: 22px;
  font-weight: 900;
  color: #d4af37;
  color: var(--atprx-gold);
  font-family: 'Rajdhani', sans-serif;
}

.atprx-producto-stock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.atprx-stock-si {
  color: #27ae60;
  color: var(--atprx-success);
}

.atprx-stock-no {
  color: #e74c3c;
  color: var(--atprx-danger);
}

.atprx-producto-fecha {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--atprx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
}

/* ACCIONES */
.atprx-producto-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid var(--atprx-border);
}

.atprx-producto-actions button {
  flex: 1 1;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.atprx-btn-aprobar {
  background: linear-gradient(135deg, #27ae60, #52be80);
  background: linear-gradient(135deg, var(--atprx-success), #52be80);
  color: white;
  border: none;
}

.atprx-btn-aprobar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
}

.atprx-btn-rechazar {
  background-color: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
  color: var(--atprx-danger);
  border: 1px solid rgba(231, 76, 60, 0.3);
}

.atprx-btn-rechazar:hover {
  background-color: rgba(231, 76, 60, 0.2);
  transform: translateY(-2px);
}

.atprx-btn-vendedor {
  background-color: rgba(52, 152, 219, 0.1);
  color: #3498db;
  color: var(--atprx-info);
  border: 1px solid rgba(52, 152, 219, 0.3);
}

.atprx-btn-vendedor:hover {
  background-color: rgba(52, 152, 219, 0.2);
  transform: translateY(-2px);
}

.atprx-btn-eliminar {
  background-color: rgba(155, 89, 182, 0.1);
  color: #9b59b6;
  color: var(--atprx-purple);
  border: 1px solid rgba(155, 89, 182, 0.3);
}

.atprx-btn-eliminar:hover {
  background-color: rgba(155, 89, 182, 0.2);
  transform: translateY(-2px);
}

/* ============================================ */
/* RESUMEN */
/* ============================================ */
.atprx-resumen {
  padding: 16px;
  text-align: center;
  color: #b7bcc4;
  color: var(--atprx-text-secondary);
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

/* ============================================ */
/* NOTIFICACIÓN */
/* ============================================ */
.atprx-notificacion {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--atprx-bg-card);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atprx-border);
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 320px;
  animation: atprx-slide-in 0.3s ease;
}

@keyframes atprx-slide-in {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.atprx-notificacion-contenido {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #e9ecef;
  color: var(--atprx-text-primary);
  font-size: 14px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.atprx-notificacion-success {
  border-left: 4px solid #27ae60;
  border-left: 4px solid var(--atprx-success);
}

.atprx-notificacion-error {
  border-left: 4px solid #e74c3c;
  border-left: 4px solid var(--atprx-danger);
}

.atprx-notificacion-info {
  border-left: 4px solid #3498db;
  border-left: 4px solid var(--atprx-info);
}

.atprx-notificacion-cerrar {
  background: transparent;
  border: none;
  color: #b7bcc4;
  color: var(--atprx-text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.atprx-notificacion-cerrar:hover {
  color: #e9ecef;
  color: var(--atprx-text-primary);
  transform: scale(1.1);
}

/* src/pages/admin/TodosLosPedidos.css */
/* PREFIJO: atpx- (Admin Todos Pedidos eXtended) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --atpx-bg-primary: #0a0a0a;
  --atpx-bg-secondary: rgba(10, 10, 10, 0.95);
  --atpx-bg-card: rgba(20, 20, 20, 0.95);
  --atpx-gold: #d4af37;
  --atpx-gold-light: #f0d574;
  --atpx-text-primary: #e9ecef;
  --atpx-text-secondary: #b7bcc4;
  --atpx-border: rgba(255, 255, 255, 0.12);
  --atpx-success: #27ae60;
  --atpx-warning: #f39c12;
  --atpx-danger: #e74c3c;
  --atpx-info: #3498db;
  --atpx-purple: #9b59b6;
}

/* ============================================ */
/* RESET & BASE */
/* ============================================ */
.atpx-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--atpx-bg-primary);
  font-family: 'Rajdhani', sans-serif;
}

.atpx-container * {
  box-sizing: border-box;
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.atpx-header {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--atpx-bg-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--atpx-border);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.atpx-header-content {
  max-width: 1800px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.atpx-back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--atpx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atpx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.atpx-back-button:hover {
  background-color: rgba(212, 175, 55, 0.15);
  border-color: #d4af37;
  border-color: var(--atpx-gold);
  color: #d4af37;
  color: var(--atpx-gold);
  transform: translateY(-2px);
}

.atpx-header-center {
  flex: 1 1;
  display: flex;
  justify-content: center;
}

.atpx-logo {
  font-size: 20px;
  font-weight: 900;
  font-family: 'Orbitron', monospace;
  letter-spacing: 2px;
  margin: 0;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--atpx-gold), var(--atpx-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================ */
/* MAIN */
/* ============================================ */
.atpx-main {
  padding: 40px 24px;
}

.atpx-main-content {
  max-width: 1800px;
  margin: 0 auto;
}

/* ============================================ */
/* TÍTULO */
/* ============================================ */
.atpx-title-section {
  margin-bottom: 40px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.atpx-title {
  font-size: 36px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--atpx-text-primary);
  margin: 0 0 12px 0;
  font-family: 'Orbitron', monospace;
  display: flex;
  align-items: center;
  gap: 16px;
}

.atpx-subtitle {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--atpx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* ESTADÍSTICAS */
/* ============================================ */
.atpx-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.atpx-stat-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--atpx-bg-card);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atpx-border);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.atpx-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #d4af37, #f0d574);
  background: linear-gradient(90deg, var(--atpx-gold), var(--atpx-gold-light));
}

.atpx-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  border-color: #d4af37;
  border-color: var(--atpx-gold);
}

.atpx-stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
}

.atpx-stat-icon-total {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--atpx-gold), var(--atpx-gold-light));
}

.atpx-stat-icon-pendiente {
  background: linear-gradient(135deg, #f39c12, #f8b739);
  background: linear-gradient(135deg, var(--atpx-warning), #f8b739);
}

.atpx-stat-icon-proceso {
  background: linear-gradient(135deg, #3498db, #5dade2);
  background: linear-gradient(135deg, var(--atpx-info), #5dade2);
}

.atpx-stat-icon-entregado {
  background: linear-gradient(135deg, #27ae60, #52be80);
  background: linear-gradient(135deg, var(--atpx-success), #52be80);
}

.atpx-stat-icon-cancelado {
  background: linear-gradient(135deg, #e74c3c, #ec7063);
  background: linear-gradient(135deg, var(--atpx-danger), #ec7063);
}

.atpx-stat-icon-ingresos {
  background: linear-gradient(135deg, #1abc9c, #48c9b0);
}

.atpx-stat-icon-por-cobrar {
  background: linear-gradient(135deg, #9b59b6, #ae78d4);
  background: linear-gradient(135deg, var(--atpx-purple), #ae78d4);
}

.atpx-stat-content {
  flex: 1 1;
  text-align: right;
}

.atpx-stat-number {
  font-size: 32px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--atpx-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1;
}

.atpx-stat-label {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--atpx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

/* ============================================ */
/* FILTROS */
/* ============================================ */
.atpx-filters-section {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.atpx-search-box {
  position: relative;
  width: 100%;
}

.atpx-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #b7bcc4;
  color: var(--atpx-text-secondary);
}

.atpx-search-input {
  width: 100%;
  padding: 14px 16px 14px 48px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--atpx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atpx-border);
  border-radius: 12px;
  color: #e9ecef;
  color: var(--atpx-text-primary);
  font-size: 15px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  transition: all 0.3s ease;
}

.atpx-search-input:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--atpx-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.atpx-search-input::placeholder {
  color: #b7bcc4;
  color: var(--atpx-text-secondary);
}

.atpx-filter-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.atpx-filter-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--atpx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atpx-border);
  border-radius: 10px;
  color: #e9ecef;
  color: var(--atpx-text-primary);
  font-size: 14px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
}

.atpx-filter-button:hover {
  background-color: rgba(212, 175, 55, 0.1);
  border-color: #d4af37;
  border-color: var(--atpx-gold);
  transform: translateY(-2px);
}

.atpx-filter-active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.1) 100%);
  border-color: #d4af37;
  border-color: var(--atpx-gold);
  color: #d4af37;
  color: var(--atpx-gold);
}

.atpx-filter-count {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

/* ============================================ */
/* LOADING */
/* ============================================ */
.atpx-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 20px;
}

.atpx-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.1);
  border-top: 5px solid #d4af37;
  border-top: 5px solid var(--atpx-gold);
  border-radius: 50%;
  animation: atpx-spin 1s linear infinite;
}

@keyframes atpx-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.atpx-loading-text {
  color: #b7bcc4;
  color: var(--atpx-text-secondary);
  font-size: 16px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

/* ============================================ */
/* EMPTY STATE */
/* ============================================ */
.atpx-empty-state {
  padding: 80px 20px;
  text-align: center;
}

.atpx-empty-icon {
  margin: 0 auto 24px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b7bcc4;
  color: var(--atpx-text-secondary);
  opacity: 0.5;
}

.atpx-empty-title {
  font-size: 24px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--atpx-text-primary);
  margin: 0 0 12px 0;
  font-family: 'Rajdhani', sans-serif;
}

.atpx-empty-text {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--atpx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* GRID DE PEDIDOS */
/* ============================================ */
.atpx-pedidos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

/* ============================================ */
/* TARJETA DE PEDIDO */
/* ============================================ */
.atpx-pedido-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--atpx-bg-card);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atpx-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.atpx-pedido-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
  border-color: #d4af37;
  border-color: var(--atpx-gold);
}

/* HEADER DEL PEDIDO */
.atpx-pedido-header {
  padding: 16px 20px;
  background-color: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--atpx-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.atpx-pedido-id-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.atpx-pedido-id {
  font-size: 13px;
  font-weight: 700;
  color: #d4af37;
  color: var(--atpx-gold);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.atpx-pedido-fecha {
  font-size: 11px;
  color: #b7bcc4;
  color: var(--atpx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 4px;
}

.atpx-estado-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.atpx-estado-pendiente {
  background-color: rgba(243, 156, 18, 0.15);
  color: #f39c12;
  color: var(--atpx-warning);
  border: 1px solid rgba(243, 156, 18, 0.3);
}

.atpx-estado-en-proceso {
  background-color: rgba(52, 152, 219, 0.15);
  color: #3498db;
  color: var(--atpx-info);
  border: 1px solid rgba(52, 152, 219, 0.3);
}

.atpx-estado-entregado,
.atpx-estado-completado {
  background-color: rgba(39, 174, 96, 0.15);
  color: #27ae60;
  color: var(--atpx-success);
  border: 1px solid rgba(39, 174, 96, 0.3);
}

.atpx-estado-cancelado {
  background-color: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  color: var(--atpx-danger);
  border: 1px solid rgba(231, 76, 60, 0.3);
}

/* BODY DEL PEDIDO */
.atpx-pedido-body {
  padding: 20px;
  display: flex;
  gap: 16px;
  flex: 1 1;
}

.atpx-pedido-imagen-container {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border: 2px solid var(--atpx-border);
}

.atpx-pedido-imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.atpx-pedido-card:hover .atpx-pedido-imagen {
  transform: scale(1.1);
}

.atpx-pedido-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.atpx-pedido-nombre {
  font-size: 16px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--atpx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1.3;
}

.atpx-pedido-vendedor,
.atpx-pedido-cliente {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--atpx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
}

.atpx-pedido-precio-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.atpx-precio-original {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--atpx-text-secondary);
  text-decoration: line-through;
  font-family: 'Rajdhani', sans-serif;
}

.atpx-precio-final {
  font-size: 20px;
  font-weight: 900;
  color: #d4af37;
  color: var(--atpx-gold);
  font-family: 'Rajdhani', sans-serif;
}

.atpx-descuento {
  padding: 4px 8px;
  background: linear-gradient(135deg, #e74c3c, #ec7063);
  background: linear-gradient(135deg, var(--atpx-danger), #ec7063);
  color: white;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
}

/* FOOTER DEL PEDIDO */
.atpx-pedido-footer {
  padding: 16px 20px;
  background-color: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid var(--atpx-border);
}

.atpx-pedido-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.atpx-pedido-actions button {
  flex: 1 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.atpx-btn-aprobar {
  background: linear-gradient(135deg, #3498db, #5dade2);
  background: linear-gradient(135deg, var(--atpx-info), #5dade2);
  color: white;
  border: none;
}

.atpx-btn-aprobar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}

.atpx-btn-entregar {
  background: linear-gradient(135deg, #27ae60, #52be80);
  background: linear-gradient(135deg, var(--atpx-success), #52be80);
  color: white;
  border: none;
}

.atpx-btn-entregar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
}

.atpx-btn-cancelar {
  background-color: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
  color: var(--atpx-danger);
  border: 1px solid rgba(231, 76, 60, 0.3);
}

.atpx-btn-cancelar:hover {
  background-color: rgba(231, 76, 60, 0.2);
  transform: translateY(-2px);
}

.atpx-btn-disabled {
  background-color: rgba(255, 255, 255, 0.05);
  color: #b7bcc4;
  color: var(--atpx-text-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ============================================ */
/* RESUMEN */
/* ============================================ */
.atpx-resumen {
  padding: 16px;
  text-align: center;
  color: #b7bcc4;
  color: var(--atpx-text-secondary);
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

/* ============================================ */
/* NOTIFICACIÓN */
/* ============================================ */
.atpx-notificacion {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--atpx-bg-card);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atpx-border);
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 320px;
  animation: atpx-slide-in 0.3s ease;
}

@keyframes atpx-slide-in {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.atpx-notificacion-contenido {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #e9ecef;
  color: var(--atpx-text-primary);
  font-size: 14px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.atpx-notificacion-success {
  border-left: 4px solid #27ae60;
  border-left: 4px solid var(--atpx-success);
}

.atpx-notificacion-error {
  border-left: 4px solid #e74c3c;
  border-left: 4px solid var(--atpx-danger);
}

.atpx-notificacion-info {
  border-left: 4px solid #3498db;
  border-left: 4px solid var(--atpx-info);
}

.atpx-notificacion-cerrar {
  background: transparent;
  border: none;
  color: #b7bcc4;
  color: var(--atpx-text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.atpx-notificacion-cerrar:hover {
  color: #e9ecef;
  color: var(--atpx-text-primary);
  transform: scale(1.1);
}

/* src/pages/admin/MonitorearChats.css */
/* PREFIJO: amcx- (Admin Monitorear Chats eXtended) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --amcx-bg-primary: #0a0a0a;
  --amcx-bg-secondary: rgba(10, 10, 10, 0.95);
  --amcx-bg-card: rgba(20, 20, 20, 0.95);
  --amcx-gold: #d4af37;
  --amcx-gold-light: #f0d574;
  --amcx-text-primary: #e9ecef;
  --amcx-text-secondary: #b7bcc4;
  --amcx-border: rgba(255, 255, 255, 0.12);
  --amcx-success: #27ae60;
  --amcx-warning: #f39c12;
  --amcx-danger: #e74c3c;
  --amcx-info: #3498db;
}

/* ============================================ */
/* RESET & BASE */
/* ============================================ */
.amcx-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--amcx-bg-primary);
  font-family: 'Rajdhani', sans-serif;
}

.amcx-container * {
  box-sizing: border-box;
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.amcx-header {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--amcx-bg-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--amcx-border);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.amcx-header-content {
  max-width: 1800px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.amcx-back-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--amcx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--amcx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.amcx-back-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateX(-2px);
}

.amcx-header-center {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1;
  justify-content: center;
}

.amcx-logo {
  font-size: 20px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--amcx-text-primary);
  margin: 0;
  font-family: 'Orbitron', monospace;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--amcx-gold), var(--amcx-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.amcx-header-stats {
  display: flex;
  gap: 16px;
}

.amcx-stat-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--amcx-border);
}

.amcx-stat-mini-value {
  font-size: 20px;
  font-weight: 700;
  color: #d4af37;
  color: var(--amcx-gold);
  font-family: 'Rajdhani', sans-serif;
}

.amcx-stat-mini-label {
  font-size: 11px;
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* MAIN */
/* ============================================ */
.amcx-main {
  padding: 40px 24px;
}

.amcx-main-content {
  max-width: 1800px;
  margin: 0 auto;
}

/* ============================================ */
/* TITLE SECTION */
/* ============================================ */
.amcx-title-section {
  margin-bottom: 32px;
}

.amcx-title {
  font-size: 32px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--amcx-text-primary);
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Rajdhani', sans-serif;
}

.amcx-subtitle {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* ESTADÍSTICAS */
/* ============================================ */
.amcx-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.amcx-stat-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--amcx-bg-card);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--amcx-border);
  transition: all 0.3s ease;
}

.amcx-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
}

.amcx-stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.amcx-stat-icon-total {
  background-color: #d4af37;
  background-color: var(--amcx-gold);
}

.amcx-stat-icon-activos {
  background-color: #3498db;
  background-color: var(--amcx-info);
}

.amcx-stat-icon-mensajes {
  background-color: #27ae60;
  background-color: var(--amcx-success);
}

.amcx-stat-icon-pendientes {
  background-color: #f39c12;
  background-color: var(--amcx-warning);
}

.amcx-stat-info {
  flex: 1 1;
}

.amcx-stat-label {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
}

.amcx-stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #e9ecef;
  color: var(--amcx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* LOADING */
/* ============================================ */
.amcx-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--amcx-bg-primary);
  gap: 20px;
}

.amcx-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.1);
  border-top: 5px solid #d4af37;
  border-top: 5px solid var(--amcx-gold);
  border-radius: 50%;
  animation: amcx-spin 1s linear infinite;
}

@keyframes amcx-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.amcx-loading-text {
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
  font-size: 16px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

/* ============================================ */
/* CHAT LAYOUT */
/* ============================================ */
.amcx-chat-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-gap: 24px;
  gap: 24px;
  height: calc(100vh - 400px);
  min-height: 600px;
}

/* ============================================ */
/* LISTA DE CHATS */
/* ============================================ */
.amcx-chats-list {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--amcx-bg-card);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--amcx-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.amcx-chats-list-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--amcx-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.amcx-chats-list-title {
  font-size: 18px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--amcx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.amcx-search-box {
  position: relative;
}

.amcx-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
}

.amcx-search-input {
  width: 100%;
  padding: 10px 10px 10px 40px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--amcx-border);
  border-radius: 8px;
  color: #e9ecef;
  color: var(--amcx-text-primary);
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
  transition: all 0.3s ease;
}

.amcx-search-input:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--amcx-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.amcx-search-input::placeholder {
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
}

.amcx-filter-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.amcx-filter-button {
  background-color: rgba(255, 255, 255, 0.05);
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--amcx-border);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.amcx-filter-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.amcx-filter-active {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--amcx-gold), var(--amcx-gold-light));
  color: #0a0a0a;
  color: var(--amcx-bg-primary);
  border-color: #d4af37;
  border-color: var(--amcx-gold);
  font-weight: 600;
}

.amcx-chats-items {
  flex: 1 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.amcx-chat-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--amcx-border);
  cursor: pointer;
  transition: all 0.3s ease;
}

.amcx-chat-item:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: #d4af37;
  border-color: var(--amcx-gold);
}

.amcx-chat-item-selected {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
  border-color: #d4af37;
  border-color: var(--amcx-gold);
}

.amcx-chat-item-imagen {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--amcx-border);
}

.amcx-chat-imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.amcx-chat-item-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.amcx-chat-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.amcx-chat-item-title {
  font-size: 14px;
  font-weight: 600;
  color: #e9ecef;
  color: var(--amcx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.amcx-chat-item-time {
  font-size: 11px;
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
  flex-shrink: 0;
}

.amcx-chat-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
}

.amcx-chat-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.amcx-chat-meta-divider {
  color: rgba(255, 255, 255, 0.12);
  color: var(--amcx-border);
}

.amcx-chat-item-ultimo-mensaje {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amcx-chat-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.amcx-chat-item-estado {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.amcx-chat-item-mensajes {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
}

.amcx-empty-chats {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
}

.amcx-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: #e9ecef;
  color: var(--amcx-text-primary);
  margin: 16px 0 8px 0;
  font-family: 'Rajdhani', sans-serif;
}

.amcx-empty-text {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* PANEL DE MENSAJES */
/* ============================================ */
.amcx-messages-panel {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--amcx-bg-card);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--amcx-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.amcx-no-selection {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  text-align: center;
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
}

.amcx-no-selection-title {
  font-size: 24px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--amcx-text-primary);
  margin: 20px 0 12px 0;
  font-family: 'Rajdhani', sans-serif;
}

.amcx-no-selection-text {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.amcx-chat-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--amcx-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background-color: rgba(255, 255, 255, 0.02);
  flex-wrap: wrap; /* 🆕 Permite wrap en pantallas pequeñas */
}

.amcx-chat-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1;
  min-width: 0;
}

.amcx-chat-header-imagen {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--amcx-border);
  flex-shrink: 0;
}

.amcx-chat-header-title {
  font-size: 18px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--amcx-text-primary);
  margin: 0 0 6px 0;
  font-family: 'Rajdhani', sans-serif;
}

.amcx-chat-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
  flex-wrap: wrap;
}

.amcx-chat-header-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 🆕 ACCIONES DEL HEADER (WhatsApp + Estado) */
.amcx-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0; /* Evita que se comprima */
}

.amcx-chat-header-estado {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
  flex-shrink: 0;
  white-space: nowrap; /* Evita que el texto se rompa */
}

/* 🆕 BOTÓN WHATSAPP */
.amcx-btn-whatsapp {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
  white-space: nowrap; /* Evita que el texto se rompa */
}

.amcx-btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

.amcx-btn-whatsapp svg {
  flex-shrink: 0;
}

/* Responsive para header actions */
@media (max-width: 768px) {
  .amcx-chat-header-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .amcx-btn-whatsapp {
    flex: 1 1;
    justify-content: center;
  }
}

.amcx-messages-container {
  flex: 1 1;
  overflow-y: auto;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.2);
}

.amcx-no-messages {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
}

.amcx-no-messages-text {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
  margin: 12px 0 0 0;
  font-family: 'Rajdhani', sans-serif;
}

.amcx-messages-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.amcx-mensaje-wrapper {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.amcx-mensaje-vendedor {
  justify-content: flex-start;
}

.amcx-mensaje-cliente {
  justify-content: flex-start;
}

.amcx-mensaje-admin {
  justify-content: flex-start;
}

.amcx-mensaje-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #3498db;
  background-color: var(--amcx-info);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.amcx-avatar-admin {
  background-color: #e74c3c;
  background-color: var(--amcx-danger);
}

.amcx-mensaje-content {
  max-width: 70%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.amcx-mensaje-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.amcx-mensaje-sender {
  font-size: 12px;
  font-weight: 600;
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
}

.amcx-mensaje-time {
  font-size: 11px;
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
}

.amcx-mensaje-bubble {
  background-color: rgba(255, 255, 255, 0.08);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--amcx-border);
}

.amcx-mensaje-texto {
  font-size: 14px;
  color: #e9ecef;
  color: var(--amcx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1.5;
  word-wrap: break-word;
}

.amcx-chat-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid var(--amcx-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background-color: rgba(255, 255, 255, 0.02);
  flex-wrap: wrap;
}

.amcx-chat-footer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
}

.amcx-footer-label {
  font-weight: 500;
}

.amcx-footer-value {
  font-weight: 600;
  color: #e9ecef;
  color: var(--amcx-text-primary);
}

.amcx-footer-btn-detalles {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--amcx-gold), var(--amcx-gold-light));
  color: #0a0a0a;
  color: var(--amcx-bg-primary);
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
}

.amcx-footer-btn-detalles:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

/* ============================================ */
/* SCROLLBAR */
/* ============================================ */
.amcx-chats-items::-webkit-scrollbar,
.amcx-messages-container::-webkit-scrollbar {
  width: 8px;
}

.amcx-chats-items::-webkit-scrollbar-track,
.amcx-messages-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.amcx-chats-items::-webkit-scrollbar-thumb,
.amcx-messages-container::-webkit-scrollbar-thumb {
  background: #d4af37;
  background: var(--amcx-gold);
  border-radius: 10px;
}

.amcx-chats-items::-webkit-scrollbar-thumb:hover,
.amcx-messages-container::-webkit-scrollbar-thumb:hover {
  background: #f0d574;
  background: var(--amcx-gold-light);
}

/* ============================================ */
/* RESPONSIVE */
/* ============================================ */
@media (max-width: 1400px) {
  .amcx-chat-layout {
    grid-template-columns: 350px 1fr;
  }
}

@media (max-width: 1024px) {
  .amcx-chat-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .amcx-chats-list {
    max-height: 400px;
  }

  .amcx-messages-panel {
    min-height: 500px;
  }

  .amcx-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .amcx-header-content {
    flex-wrap: wrap;
  }

  .amcx-header-stats {
    width: 100%;
    justify-content: center;
  }

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

  .amcx-stats-grid {
    grid-template-columns: 1fr;
  }

  .amcx-filter-buttons {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}
/* ============================================ */
/* ADMIN INPUT SECTION */
/* ============================================ */
.amcx-footer-info-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--amcx-border);
  margin-bottom: 16px;
  width: 100%;
}

.amcx-admin-input-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.amcx-admin-badge-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.15), rgba(231, 76, 60, 0.05));
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #e74c3c;
  color: var(--amcx-danger);
  font-family: 'Rajdhani', sans-serif;
  width: -webkit-fit-content;
  width: fit-content;
}

.amcx-input-form {
  display: flex;
  gap: 12px;
  align-items: center;
}

.amcx-input-field {
  flex: 1 1;
  padding: 12px 16px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--amcx-border);
  border-radius: 10px;
  color: #e9ecef;
  color: var(--amcx-text-primary);
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
  transition: all 0.3s ease;
}

.amcx-input-field:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--amcx-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
  background-color: rgba(255, 255, 255, 0.08);
}

.amcx-input-field:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.amcx-input-field::placeholder {
  color: #b7bcc4;
  color: var(--amcx-text-secondary);
}

.amcx-send-button {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--amcx-gold), var(--amcx-gold-light));
  color: #0a0a0a;
  color: var(--amcx-bg-primary);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.amcx-send-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.amcx-send-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.amcx-send-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(10, 10, 10, 0.2);
  border-top: 3px solid #0a0a0a;
  border-top: 3px solid var(--amcx-bg-primary);
  border-radius: 50%;
  animation: amcx-spin 0.8s linear infinite;
}

/* ============================================ */
/* RESPONSIVE - ADMIN INPUT */
/* ============================================ */
@media (max-width: 768px) {
  .amcx-footer-info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .amcx-input-form {
    flex-direction: row;
  }

  .amcx-input-field {
    font-size: 16px; /* Evita zoom en iOS */
  }
}

/* ============================================ */
/* MENSAJES ESPECIALES - CREDENCIALES (ADMIN) */
/* ============================================ */
.amcx-mensaje-bubble.amcx-mensaje-credenciales {
  padding: 20px;
  max-width: 500px;
  line-height: 1.8;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.amcx-mensaje-vendedor .amcx-mensaje-bubble.amcx-mensaje-credenciales {
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
  border-color: #d4af37;
  border-color: var(--amcx-gold);
}

.amcx-mensaje-admin .amcx-mensaje-bubble.amcx-mensaje-credenciales {
  background: linear-gradient(135deg, #7c2d12 0%, #991b1b 100%);
  border-color: #fbbf24;
}

/* ============================================ */
/* FORMATO DE TEXTO EN MENSAJES (ADMIN) */
/* ============================================ */
.amcx-mensaje-texto {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.amcx-mensaje-texto strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin: 12px 0 8px 0;
  color: #f0d574;
  color: var(--amcx-gold-light);
  letter-spacing: 0.5px;
}

.amcx-mensaje-vendedor .amcx-mensaje-texto strong:first-child,
.amcx-mensaje-admin .amcx-mensaje-texto strong:first-child {
  font-size: 18px;
  color: #fbbf24;
  text-align: center;
  margin-top: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* ============================================ */
/* SECCIONES Y LISTAS */
/* ============================================ */
.amcx-mensaje-seccion-titulo {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #d4af37;
  color: var(--amcx-gold);
  margin: 16px 0 8px 0;
  padding: 8px 12px;
  background-color: rgba(212, 175, 55, 0.15);
  border-left: 3px solid #d4af37;
  border-left: 3px solid var(--amcx-gold);
  border-radius: 4px;
}

.amcx-mensaje-lista {
  margin: 12px 0;
  padding-left: 0;
  list-style: none;
}

.amcx-mensaje-lista-item {
  padding: 8px 12px;
  margin: 6px 0;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border-left: 3px solid rgba(255, 255, 255, 0.3);
  font-size: 14px;
  line-height: 1.6;
}

/* ============================================ */
/* DATOS DESTACADOS */
/* ============================================ */
.amcx-mensaje-dato-importante {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #fbbf24;
  margin: 4px 0;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

/* ============================================ */
/* ADVERTENCIAS */
/* ============================================ */
.amcx-mensaje-advertencia {
  display: block;
  margin-top: 16px;
  padding: 12px 16px;
  background-color: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-left: 4px solid #e74c3c;
  border-left: 4px solid var(--amcx-danger);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.7;
}

/* ============================================ */
/* CREDENCIALES ITEM */
/* ============================================ */
.amcx-credencial-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 6px 0;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  font-size: 14px;
}

.amcx-credencial-label {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  min-width: 80px;
}

.amcx-credencial-valor {
  color: #f0d574;
  color: var(--amcx-gold-light);
  font-weight: 700;
  font-family: 'Courier New', monospace;
}

/* ============================================ */
/* INSTRUCCIONES NUMERADAS */
/* ============================================ */
.amcx-instruccion-item {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  margin: 8px 0;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  align-items: flex-start;
}

.amcx-instruccion-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--amcx-gold), var(--amcx-gold-light));
  color: #0a0a0a;
  color: var(--amcx-bg-primary);
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.amcx-instruccion-texto {
  flex: 1 1;
  padding-top: 4px;
  line-height: 1.6;
}

/* ============================================ */
/* GARANTÍA Y EXPIRACIÓN */
/* ============================================ */
.amcx-mensaje-garantia {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 16px;
  background-color: rgba(39, 174, 96, 0.15);
  border: 1px solid rgba(39, 174, 96, 0.3);
  border-left: 4px solid #27ae60;
  border-left: 4px solid var(--amcx-success);
  border-radius: 8px;
}

.amcx-mensaje-expiracion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-top: 12px;
  background-color: rgba(251, 191, 36, 0.2);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 8px;
  font-weight: 700;
  color: #fbbf24;
}

/* ============================================ */
/* ENLACES */
/* ============================================ */
.amcx-mensaje-link {
  color: #60a5fa;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.3s ease;
}

.amcx-mensaje-link:hover {
  color: #93c5fd;
}

/* ============================================ */
/* SEPARADORES */
/* ============================================ */
.amcx-mensaje-separador {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  margin: 16px 0;
}

/* ============================================ */
/* ESPACIADO */
/* ============================================ */
.amcx-mensaje-bubble p {
  margin: 8px 0;
}

.amcx-mensaje-bubble p:first-child {
  margin-top: 0;
}

.amcx-mensaje-bubble p:last-child {
  margin-bottom: 0;
}

/* ============================================ */
/* ANIMACIÓN */
/* ============================================ */
@keyframes amcx-pulso-suave {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
  }
}

.amcx-mensaje-bubble.amcx-mensaje-credenciales {
  animation: amcx-pulso-suave 3s ease-in-out infinite;
}

/* ============================================ */
/* EMOJIS GRANDES */
/* ============================================ */
.amcx-emoji-grande {
  font-size: 24px;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

/* ============================================ */
/* BOTÓN WHATSAPP */
/* ============================================ */
.amcx-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.amcx-btn-whatsapp {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.amcx-btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

.amcx-btn-whatsapp svg {
  flex-shrink: 0;
}


/* ============================================ */
/* BOTÓN WHATSAPP EN FOOTER */
/* ============================================ */
.amcx-footer-btn-whatsapp {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
  white-space: nowrap;
}

.amcx-footer-btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

.amcx-footer-btn-whatsapp svg {
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .amcx-footer-info-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .amcx-footer-btn-whatsapp {
    width: 100%;
    justify-content: center;
  }
}
.amcx-footer-btn-whatsapp {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.amcx-footer-btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

/* src/pages/admin/GestionarMayoristas.css */
/* PREFIJO: agmx- (Admin Gestionar Mayoristas eXtended) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --agmx-bg-primary: #0a0a0a;
  --agmx-bg-secondary: rgba(10, 10, 10, 0.95);
  --agmx-bg-card: rgba(20, 20, 20, 0.95);
  --agmx-text-primary: #e9ecef;
  --agmx-text-secondary: #b7bcc4;
  --agmx-border: rgba(255, 255, 255, 0.12);
  --agmx-success: #27ae60;
  --agmx-warning: #f39c12;
  --agmx-danger: #e74c3c;
  --agmx-info: #3498db;
  --agmx-gold: #d4af37;
}

/* ============================================ */
/* BASE & CONTAINER */
/* ============================================ */
.agmx-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--agmx-bg-primary);
  color: #e9ecef;
  color: var(--agmx-text-primary);
  font-family: 'Rajdhani', sans-serif;
  padding: 24px;
}

.agmx-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
}

.agmx-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255,255,255,0.1);
  border-top: 5px solid #d4af37;
  border-top: 5px solid var(--agmx-gold);
  border-radius: 50%;
  animation: agmx-spin 1s linear infinite;
}

@keyframes agmx-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.agmx-loading-text {
  color: #b7bcc4;
  color: var(--agmx-text-secondary);
  font-size: 16px;
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.agmx-header {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--agmx-bg-secondary);
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--agmx-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.agmx-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.agmx-back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255,255,255,0.1);
  color: #e9ecef;
  color: var(--agmx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--agmx-border);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}

.agmx-back-button:hover {
  background-color: #d4af37;
  background-color: var(--agmx-gold);
  color: #0a0a0a;
  color: var(--agmx-bg-primary);
  border-color: #d4af37;
  border-color: var(--agmx-gold);
}

.agmx-logo {
  font-size: 20px;
  font-weight: 900;
  background: linear-gradient(135deg, #d4af37, var(--agmx-gold-light));
  background: linear-gradient(135deg, var(--agmx-gold), var(--agmx-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================ */
/* MAIN CONTENT */
/* ============================================ */
.agmx-main {
  padding: 32px 0;
}

.agmx-main-content {
  max-width: 1800px;
  margin: 0 auto;
}

/* ============================================ */
/* TITLE SECTION */
/* ============================================ */
.agmx-title-section {
  margin-bottom: 32px;
}

.agmx-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 700;
}

.agmx-subtitle {
  color: #b7bcc4;
  color: var(--agmx-text-secondary);
  margin-top: 4px;
}

/* ============================================ */
/* INFO BANNER */
/* ============================================ */
.agmx-info-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--agmx-bg-card);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--agmx-border);
  margin-bottom: 32px;
}

.agmx-info-icon {
  color: #3498db;
  color: var(--agmx-info);
}

.agmx-info-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.agmx-info-text {
  color: #b7bcc4;
  color: var(--agmx-text-secondary);
  margin: 4px 0 0;
  font-size: 14px;
}

.agmx-info-text strong {
  color: #d4af37;
  color: var(--agmx-gold);
}

/* ============================================ */
/* STATS GRID */
/* ============================================ */
.agmx-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 32px;
}

.agmx-stat-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--agmx-bg-card);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--agmx-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.agmx-stat-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff;
}

.agmx-stat-icon-total { background: #3498db; background: var(--agmx-info); }
.agmx-stat-icon-normal { background: #27ae60; background: var(--agmx-success); }
.agmx-stat-icon-mayorista { background: #f39c12; background: var(--agmx-warning); }

.agmx-stat-content {
  flex: 1 1;
}

.agmx-stat-number {
  font-size: 24px;
  font-weight: 900;
  margin: 0;
}

.agmx-stat-label {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--agmx-text-secondary);
  margin: 4px 0 0;
}

/* ============================================ */
/* FILTERS */
/* ============================================ */
.agmx-filters-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.agmx-search-box {
  position: relative;
}

.agmx-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #b7bcc4;
  color: var(--agmx-text-secondary);
}

.agmx-search-input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--agmx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--agmx-border);
  border-radius: 8px;
  color: #e9ecef;
  color: var(--agmx-text-primary);
  font-size: 14px;
}

.agmx-filter-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.agmx-filter-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--agmx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--agmx-border);
  border-radius: 12px;
  color: #e9ecef;
  color: var(--agmx-text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.agmx-filter-button:hover {
  background-color: #3498db;
  background-color: var(--agmx-info);
  border-color: #3498db;
  border-color: var(--agmx-info);
  color: #0a0a0a;
  color: var(--agmx-bg-primary);
}

.agmx-filter-active {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--agmx-gold), #f0d574);
  border-color: #d4af37;
  border-color: var(--agmx-gold);
  color: #0a0a0a;
  color: var(--agmx-bg-primary);
}

/* ============================================ */
/* EMPTY STATE */
/* ============================================ */
.agmx-empty-state {
  text-align: center;
  padding: 60px 20px;
}

.agmx-empty-icon {
  color: #b7bcc4;
  color: var(--agmx-text-secondary);
  opacity: 0.6;
}

.agmx-empty-title {
  font-size: 20px;
  margin: 16px 0 8px;
}

.agmx-empty-text {
  color: #b7bcc4;
  color: var(--agmx-text-secondary);
  font-size: 14px;
}

/* ============================================ */
/* CLIENTE CARD */
/* ============================================ */
.agmx-clientes-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.agmx-cliente-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--agmx-bg-card);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--agmx-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.agmx-cliente-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agmx-cliente-avatar {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--agmx-bg-secondary);
  padding: 12px;
  border-radius: 50%;
  color: #3498db;
  color: var(--agmx-info);
}

.agmx-cliente-info p {
  margin: 2px 0;
  font-size: 14px;
}

.agmx-cliente-nombre {
  font-weight: 700;
  color: #e9ecef;
  color: var(--agmx-text-primary);
}

.agmx-cliente-email,
.agmx-cliente-fecha {
  color: #b7bcc4;
  color: var(--agmx-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

/* ============================================ */
/* CLIENTE ACTIONS */
/* ============================================ */
.agmx-cliente-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agmx-tipo-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

.agmx-tipo-normal {
  background-color: rgba(39,174,96,0.15);
  color: #27ae60;
  color: var(--agmx-success);
  border: 1px solid rgba(39,174,96,0.3);
}

.agmx-tipo-mayorista {
  background-color: rgba(243,156,18,0.15);
  color: #f39c12;
  color: var(--agmx-warning);
  border: 1px solid rgba(243,156,18,0.3);
}

.agmx-btn-cambiar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.agmx-btn-a-mayorista {
  background-color: #3498db;
  background-color: var(--agmx-info);
  color: #0a0a0a;
  color: var(--agmx-bg-primary);
}

.agmx-btn-a-mayorista:hover {
  background-color: #2e86c1;
}

.agmx-btn-a-normal {
  background-color: #27ae60;
  background-color: var(--agmx-success);
  color: #0a0a0a;
  color: var(--agmx-bg-primary);
}

.agmx-btn-a-normal:hover {
  background-color: #229954;
}

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

/* ============================================ */
/* NOTIFICACIÓN */
/* ============================================ */
.agmx-notificacion {
  position: fixed;
  top: 24px;
  right: 24px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--agmx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--agmx-border);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1000;
}

.agmx-notificacion-success {
  border-left: 4px solid #27ae60;
  border-left: 4px solid var(--agmx-success);
}

.agmx-notificacion-error {
  border-left: 4px solid #e74c3c;
  border-left: 4px solid var(--agmx-danger);
}

.agmx-notificacion-info {
  border-left: 4px solid #3498db;
  border-left: 4px solid var(--agmx-info);
}

.agmx-notificacion-contenido {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.agmx-notificacion-cerrar {
  background: transparent;
  border: none;
  color: #b7bcc4;
  color: var(--agmx-text-secondary);
  cursor: pointer;
  transition: color 0.2s ease;
}

.agmx-notificacion-cerrar:hover {
  color: #e9ecef;
  color: var(--agmx-text-primary);
}

/* src/pages/admin/AsignarCreditosPublicacion.css */
/* PREFIJO: aacpx- (Admin Asignar Créditos eXtended) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --aacpx-bg-primary: #0a0a0a;
  --aacpx-bg-secondary: rgba(10, 10, 10, 0.95);
  --aacpx-bg-card: rgba(20, 20, 20, 0.95);
  --aacpx-text-primary: #e9ecef;
  --aacpx-text-secondary: #b7bcc4;
  --aacpx-border: rgba(255, 255, 255, 0.12);
  --aacpx-success: #27ae60;
  --aacpx-warning: #f39c12;
  --aacpx-danger: #e74c3c;
  --aacpx-info: #3498db;
  --aacpx-gold: #d4af37;
}

/* ============================================ */
/* RESET & BASE */
/* ============================================ */
.aacpx-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--aacpx-bg-primary);
  color: #e9ecef;
  color: var(--aacpx-text-primary);
  font-family: 'Rajdhani', sans-serif;
  padding: 24px;
  box-sizing: border-box;
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.aacpx-header {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--aacpx-bg-secondary);
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--aacpx-border);
  display: flex;
  align-items: center;
  gap: 16px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.aacpx-back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255,255,255,0.1);
  color: #e9ecef;
  color: var(--aacpx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--aacpx-border);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.aacpx-back-button:hover {
  background-color: #d4af37;
  background-color: var(--aacpx-gold);
  color: #0a0a0a;
  color: var(--aacpx-bg-primary);
  border-color: #d4af37;
  border-color: var(--aacpx-gold);
}

.aacpx-header-title {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 700;
}

/* ============================================ */
/* INFO BANNER */
/* ============================================ */
.aacpx-info-banner {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--aacpx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--aacpx-border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  margin: 24px 0;
}

.aacpx-info-banner-icon {
  color: #3498db;
  color: var(--aacpx-info);
}

.aacpx-info-banner-content p {
  margin: 4px 0;
  font-size: 14px;
  color: #b7bcc4;
  color: var(--aacpx-text-secondary);
}

.aacpx-info-banner-title {
  color: #e9ecef;
  color: var(--aacpx-text-primary);
  font-weight: 600;
}

/* ============================================ */
/* LAYOUT GRID */
/* ============================================ */
.aacpx-content-grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-gap: 24px;
  gap: 24px;
}

@media (max-width: 1024px) {
  .aacpx-content-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================ */
/* LEFT PANEL */
/* ============================================ */
.aacpx-left-panel .aacpx-search-box {
  position: relative;
  margin-bottom: 16px;
}

.aacpx-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #b7bcc4;
  color: var(--aacpx-text-secondary);
}

.aacpx-search-input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--aacpx-bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--aacpx-border);
  border-radius: 8px;
  color: #e9ecef;
  color: var(--aacpx-text-primary);
}

/* VENDEDOR CARD */
.aacpx-vendedores-lista {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aacpx-vendedor-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--aacpx-bg-secondary);
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--aacpx-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.aacpx-vendedor-card:hover {
  background-color: #3498db;
  background-color: var(--aacpx-info);
}

.aacpx-vendedor-active {
  background-color: #d4af37;
  background-color: var(--aacpx-gold);
  border-color: #d4af37;
  border-color: var(--aacpx-gold);
}

.aacpx-vendedor-avatar {
  background-color: #0a0a0a;
  background-color: var(--aacpx-bg-primary);
  padding: 8px;
  border-radius: 50%;
  color: #b7bcc4;
  color: var(--aacpx-text-secondary);
}

.aacpx-vendedor-info p {
  margin: 2px 0;
  font-size: 14px;
}

.aacpx-check-icon {
  margin-left: auto;
  color: #27ae60;
  color: var(--aacpx-success);
}

/* ============================================ */
/* RIGHT PANEL */
/* ============================================ */
.aacpx-right-panel {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--aacpx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--aacpx-border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aacpx-placeholder {
  text-align: center;
  color: #b7bcc4;
  color: var(--aacpx-text-secondary);
}

.aacpx-placeholder-icon {
  color: #b7bcc4;
  color: var(--aacpx-text-secondary);
  margin-bottom: 12px;
}

.aacpx-form-header {
  margin-bottom: 16px;
}

.aacpx-form-title {
  font-size: 20px;
  font-weight: 700;
}

/* SELECTED VENDEDOR INFO */
.aacpx-vendedor-selected {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.aacpx-vendedor-selected-avatar {
  background-color: #0a0a0a;
  background-color: var(--aacpx-bg-primary);
  padding: 8px;
  border-radius: 50%;
  color: #b7bcc4;
  color: var(--aacpx-text-secondary);
}

/* CREDITOS ACTUALES */
.aacpx-creditos-actuales {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.aacpx-creditos-label {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--aacpx-text-secondary);
}

.aacpx-creditos-value {
  font-size: 16px;
  font-weight: 700;
}

/* FORM GROUP */
.aacpx-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aacpx-label {
  font-size: 14px;
  font-weight: 600;
}

.aacpx-input {
  padding: 8px 12px;
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--aacpx-bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--aacpx-border);
  border-radius: 8px;
  color: #e9ecef;
  color: var(--aacpx-text-primary);
  font-size: 14px;
}

/* RESUMEN */
.aacpx-resumen {
  background-color: #0a0a0a;
  background-color: var(--aacpx-bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--aacpx-border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aacpx-resumen-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.aacpx-resumen-value-green {
  color: #27ae60;
  color: var(--aacpx-success);
}

.aacpx-resumen-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid var(--aacpx-border);
  margin: 8px 0;
}

/* FORM ACTIONS */
.aacpx-form-actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
}

.aacpx-btn-cancel,
.aacpx-btn-asignar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.aacpx-btn-cancel {
  background-color: #e74c3c;
  background-color: var(--aacpx-danger);
  color: #fff;
}

.aacpx-btn-cancel:hover {
  background-color: #c0392b;
}

.aacpx-btn-asignar {
  background-color: #27ae60;
  background-color: var(--aacpx-success);
  color: #0a0a0a;
  color: var(--aacpx-bg-primary);
}

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

.aacpx-btn-spinner {
  width: 16px;
  height: 16px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top: 3px solid #fff;
  border-radius: 50%;
  animation: acp-spin 1s linear infinite;
}

@keyframes acp-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================ */
/* INFO BOX */
/* ============================================ */
.aacpx-info-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--aacpx-bg-secondary);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--aacpx-border);
}

.aacpx-info-text {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--aacpx-text-secondary);
}

/* ============================================ */
/* NOTIFICACIÓN */
/* ============================================ */
.aacpx-notificacion {
  position: fixed;
  top: 24px;
  right: 24px;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--aacpx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--aacpx-border);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  z-index: 1000;
}

.aacpx-notificacion-success { border-left: 4px solid #27ae60; border-left: 4px solid var(--aacpx-success); }
.aacpx-notificacion-error   { border-left: 4px solid #e74c3c; border-left: 4px solid var(--aacpx-danger); }
.aacpx-notificacion-info    { border-left: 4px solid #3498db; border-left: 4px solid var(--aacpx-info); }

.aacpx-notificacion-contenido {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1;
}

.aacpx-notificacion-cerrar {
  background: transparent;
  border: none;
  color: #b7bcc4;
  color: var(--aacpx-text-secondary);
  cursor: pointer;
  transition: color 0.2s ease;
}

.aacpx-notificacion-cerrar:hover {
  color: #e9ecef;
  color: var(--aacpx-text-primary);
}
/* Variables de color */
:root {
  --bg: #121212;
  --card: #1f1f1f;
  --border: #2a2a2a;
  --text: #e0e0e0;
  --subtext: #a0a0a0;
  --primary: #d4af37;
  --hover: #f0d574;
  --success: #27ae60;
  --error: #e74c3c;
}

/* Base */
body {
  background: #121212;
  background: var(--bg);
  color: #e0e0e0;
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  margin: 0;
}

/* Contenedor principal */
.acatx-container {
  padding: 32px;
}

/* Tarjetas */
.acatx-card {
  background: #1f1f1f;
  background: var(--card);
  border: 1px solid #2a2a2a;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  transition: transform .2s, box-shadow .2s;
}

.acatx-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.8);
}

/* Botones */
.acatx-back-button,
.acatx-submit-button,
.acatx-cancel-button,
.acatx-orden-button,
.acatx-action-button {
  background: #1f1f1f;
  background: var(--card);
  border: 1px solid #2a2a2a;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: #e0e0e0;
  color: var(--text);
  padding: 10px 16px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.acatx-back-button:hover,
.acatx-submit-button:hover,
.acatx-cancel-button:hover,
.acatx-orden-button:hover:not(:disabled),
.acatx-action-button:hover:not(:disabled) {
  background: #f0d574;
  background: var(--hover);
  border-color: #d4af37;
  border-color: var(--primary);
  color: #121212;
  color: var(--bg);
}

/* Iconos de orden */
.acatx-orden-button {
  font-size: 18px;
  color: #d4af37;
  color: var(--primary);
}

.acatx-orden-button:hover:not(:disabled) {
  color: #121212;
  color: var(--bg);
}

/* Estados activo/inactivo */
.acatx-estado-activo { color: #27ae60; color: var(--success); }
.acatx-estado-inactivo { color: #e74c3c; color: var(--error); }

/* Notificaciones */
.acatx-notificacion {
  background: #1f1f1f;
  background: var(--card);
  border-left: 4px solid #d4af37;
  border-left: 4px solid var(--primary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.7);
}

/* Inputs */
.acatx-input,
.acatx-select,
.acatx-textarea,
.aacpx-search-input {
  background: #121212;
  background: var(--bg);
  border: 1px solid #2a2a2a;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  color: #e0e0e0;
  color: var(--text);
  transition: border-color .2s;
}

.acatx-input:focus,
.acatx-select:focus,
.acatx-textarea:focus,
.aacpx-search-input:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--primary);
}

/* Lista de items */
.acatx-categoria-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  transition: background .2s;
}

.acatx-categoria-item:hover {
  background: #2a2a2a;
  background: var(--border);
}

/* Tipografía */
.acatx-title,
.acatx-card-title,
.aacpx-header-title {
  color: #d4af37;
  color: var(--primary);
  font-weight: 700;
}

.acatx-subtitle,
.aacpx-placeholder-text {
  color: #a0a0a0;
  color: var(--subtext);
  font-size: 14px;
}

/* ==================== GESTIÓN DE RETIROS - ADMIN ==================== */
:root {
  --grt-bg: #0d0d11;
  --grt-card: #1a1b22;
  --grt-border: rgba(255,255,255,0.08);
  --grt-white: #ecf0f1;
  --grt-gray: #b7bcc4;
  --grt-gold: #d4af37;
  --grt-blue: #4dd2ff;
  --grt-purple: #7c5cff;
  --grt-green: #27ae60;
  --grt-red: #e50914;
  --grt-orange: #f39c12;
}

/* CONTENEDOR */
.gestion-retiros-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #101015 0%, #13141c 100%);
  color: #ecf0f1;
  color: var(--grt-white);
  font-family: 'Rajdhani', Arial, sans-serif;
}

/* HEADER */
.gestion-retiros-header {
  background: #1a1b22;
  background: var(--grt-card);
  border-bottom: 2px solid rgba(255,255,255,0.08);
  border-bottom: 2px solid var(--grt-border);
  box-shadow: 0 4px 25px rgba(0,0,0,0.5);
  padding: 24px 40px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}
.gestion-retiros-header-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
}
.gestion-retiros-back-button {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.08);
  border: 2px solid var(--grt-border);
  color: #ecf0f1;
  color: var(--grt-white);
  font-weight: 700;
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.gestion-retiros-back-button:hover {
  border-color: #d4af37;
  border-color: var(--grt-gold);
  color: #d4af37;
  color: var(--grt-gold);
  box-shadow: 0 0 20px rgba(212,175,55,0.3);
}
.gestion-retiros-header-info {
  flex: 1 1;
}
.gestion-retiros-header-title {
  font-size: 32px;
  font-weight: 900;
  background: linear-gradient(135deg, #d4af37, #fffac2);
  background: linear-gradient(135deg, var(--grt-gold), #fffac2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 6px 0;
}
.gestion-retiros-header-subtitle {
  color: #b7bcc4;
  color: var(--grt-gray);
  font-size: 16px;
  margin: 0;
}

/* MAIN */
.gestion-retiros-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 44px 40px;
}

/* LOADING */
.gestion-retiros-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 20px;
}
.gestion-retiros-spinner {
  width: 52px;
  height: 52px;
  border: 5px solid rgba(255,255,255,0.12);
  border-top: 5px solid #d4af37;
  border-top: 5px solid var(--grt-gold);
  border-right: 5px solid #4dd2ff;
  border-right: 5px solid var(--grt-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.gestion-retiros-loading-text {
  font-size: 18px;
  font-weight: 700;
  color: #b7bcc4;
  color: var(--grt-gray);
}

/* ESTADÍSTICAS */
.gestion-retiros-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 40px;
  animation: fadeInUp 0.6s ease;
}
.gestion-retiros-stat-card {
  background: #1a1b22;
  background: var(--grt-card);
  border: 1px solid rgba(255,255,255,0.08);
  border: 1px solid var(--grt-border);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.gestion-retiros-stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212,175,55,0.05), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gestion-retiros-stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(212,175,55,0.25);
}
.gestion-retiros-stat-card:hover::before {
  opacity: 1;
}
.gestion-retiros-stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
}
.gestion-retiros-stat-pendiente .gestion-retiros-stat-icon {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  background: linear-gradient(135deg, var(--grt-orange), #e67e22);
  box-shadow: 0 0 20px rgba(243,156,18,0.4);
}
.gestion-retiros-stat-aprobado .gestion-retiros-stat-icon {
  background: linear-gradient(135deg, #27ae60, #229954);
  background: linear-gradient(135deg, var(--grt-green), #229954);
  box-shadow: 0 0 20px rgba(39,174,96,0.4);
}
.gestion-retiros-stat-rechazado .gestion-retiros-stat-icon {
  background: linear-gradient(135deg, #e50914, #c0392b);
  background: linear-gradient(135deg, var(--grt-red), #c0392b);
  box-shadow: 0 0 20px rgba(229,9,20,0.4);
}
.gestion-retiros-stat-total .gestion-retiros-stat-icon {
  background: linear-gradient(135deg, #4dd2ff, #7c5cff);
  background: linear-gradient(135deg, var(--grt-blue), var(--grt-purple));
  box-shadow: 0 0 20px rgba(77,210,255,0.4);
}
.gestion-retiros-stat-content {
  flex: 1 1;
}
.gestion-retiros-stat-label {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--grt-gray);
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.gestion-retiros-stat-value {
  font-size: 36px;
  font-weight: 900;
  margin: 0;
  color: #ecf0f1;
  color: var(--grt-white);
  line-height: 1;
}
.gestion-retiros-stat-subtext {
  font-size: 13px;
  color: #d4af37;
  color: var(--grt-gold);
  font-weight: 700;
  margin-top: 6px;
}

/* FILTROS */
.gestion-retiros-filtros {
  display: flex;
  gap: 14px;
  margin-bottom: 36px;
  flex-wrap: wrap;
  animation: fadeIn 0.8s ease;
}
.gestion-retiros-filtro-btn {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.08);
  border: 2px solid var(--grt-border);
  color: #ecf0f1;
  color: var(--grt-white);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.gestion-retiros-filtro-btn:hover,
.gestion-retiros-filtro-activo {
  background: linear-gradient(135deg, #d4af37, #fffac2);
  background: linear-gradient(135deg, var(--grt-gold), #fffac2);
  color: #111;
  border-color: #d4af37;
  border-color: var(--grt-gold);
  box-shadow: 0 0 20px rgba(212,175,55,0.4);
}

/* EMPTY STATE */
.gestion-retiros-empty-state {
  text-align: center;
  padding: 80px 20px;
  color: #b7bcc4;
  color: var(--grt-gray);
}
.gestion-retiros-empty-icon {
  font-size: 80px;
  opacity: 0.3;
  margin-bottom: 16px;
}
.gestion-retiros-empty-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px 0;
}
.gestion-retiros-empty-text {
  font-size: 16px;
  margin: 0;
}

/* LISTA DE SOLICITUDES */
.gestion-retiros-solicitudes-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeIn 1s ease;
}

/* CARD DE SOLICITUD */
.gestion-retiros-solicitud-card {
  background: #1a1b22;
  background: var(--grt-card);
  border: 2px solid rgba(255,255,255,0.08);
  border: 2px solid var(--grt-border);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  animation: slideInUp 0.5s ease;
}
.gestion-retiros-solicitud-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(212,175,55,0.2);
}
.gestion-retiros-solicitud-pendiente {
  border-left: 4px solid #f39c12;
  border-left: 4px solid var(--grt-orange);
}
.gestion-retiros-solicitud-aprobado {
  border-left: 4px solid #27ae60;
  border-left: 4px solid var(--grt-green);
}
.gestion-retiros-solicitud-rechazado {
  border-left: 4px solid #e50914;
  border-left: 4px solid var(--grt-red);
}

/* HEADER SOLICITUD */
.gestion-retiros-solicitud-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 24px;
  gap: 20px;
}
.gestion-retiros-solicitud-vendedor {
  flex: 1 1;
}
.gestion-retiros-vendedor-nombre {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px 0;
  color: #ecf0f1;
  color: var(--grt-white);
}
.gestion-retiros-vendedor-email {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--grt-gray);
  margin: 0;
}
.gestion-retiros-solicitud-badge {
  padding: 8px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
.gestion-retiros-solicitud-pendiente .gestion-retiros-solicitud-badge {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  background: linear-gradient(135deg, var(--grt-orange), #e67e22);
  color: white;
  box-shadow: 0 0 15px rgba(243,156,18,0.4);
}
.gestion-retiros-solicitud-aprobado .gestion-retiros-solicitud-badge {
  background: linear-gradient(135deg, #27ae60, #229954);
  background: linear-gradient(135deg, var(--grt-green), #229954);
  color: white;
  box-shadow: 0 0 15px rgba(39,174,96,0.4);
}
.gestion-retiros-solicitud-rechazado .gestion-retiros-solicitud-badge {
  background: linear-gradient(135deg, #e50914, #c0392b);
  background: linear-gradient(135deg, var(--grt-red), #c0392b);
  color: white;
  box-shadow: 0 0 15px rgba(229,9,20,0.4);
}

/* BODY SOLICITUD */
.gestion-retiros-solicitud-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.gestion-retiros-solicitud-monto-card {
  background: rgba(212,175,55,0.1);
  border: 2px solid #d4af37;
  border: 2px solid var(--grt-gold);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}
.gestion-retiros-monto-label {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--grt-gray);
  font-weight: 700;
  margin: 0 0 8px 0;
  text-transform: uppercase;
}
.gestion-retiros-monto-value {
  font-size: 40px;
  font-weight: 900;
  color: #d4af37;
  color: var(--grt-gold);
  margin: 0;
  text-shadow: 0 0 20px rgba(212,175,55,0.5);
}

/* INFO GRID */
.gestion-retiros-solicitud-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  gap: 16px;
}
.gestion-retiros-info-item {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border: 1px solid var(--grt-border);
}
.gestion-retiros-info-label {
  font-weight: 700;
  color: #b7bcc4;
  color: var(--grt-gray);
}
.gestion-retiros-info-value {
  font-weight: 700;
  color: #ecf0f1;
  color: var(--grt-white);
}

/* MENSAJES */
.gestion-retiros-mensaje-vendedor {
  background: rgba(77,210,255,0.1);
  border: 1px solid #4dd2ff;
  border: 1px solid var(--grt-blue);
  border-radius: 12px;
  padding: 16px;
}
.gestion-retiros-mensaje-label {
  font-size: 13px;
  font-weight: 700;
  color: #4dd2ff;
  color: var(--grt-blue);
  margin: 0 0 8px 0;
  text-transform: uppercase;
}
.gestion-retiros-mensaje-texto {
  font-size: 15px;
  color: #ecf0f1;
  color: var(--grt-white);
  margin: 0;
  line-height: 1.6;
}

/* RESPUESTA ADMIN */
.gestion-retiros-respuesta-admin {
  border-radius: 12px;
  padding: 16px;
  border: 1px solid;
}
.gestion-retiros-respuesta-aprobado {
  background: rgba(39,174,96,0.1);
  border-color: #27ae60;
  border-color: var(--grt-green);
}
.gestion-retiros-respuesta-rechazo {
  background: rgba(229,9,20,0.1);
  border-color: #e50914;
  border-color: var(--grt-red);
}
.gestion-retiros-respuesta-label {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 8px 0;
  text-transform: uppercase;
}
.gestion-retiros-respuesta-aprobado .gestion-retiros-respuesta-label {
  color: #27ae60;
  color: var(--grt-green);
}
.gestion-retiros-respuesta-rechazo .gestion-retiros-respuesta-label {
  color: #e50914;
  color: var(--grt-red);
}
.gestion-retiros-respuesta-texto {
  font-size: 15px;
  color: #ecf0f1;
  color: var(--grt-white);
  margin: 0 0 8px 0;
  line-height: 1.6;
}
.gestion-retiros-respuesta-autor {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--grt-gray);
  margin: 0;
  font-style: italic;
}

/* ACCIONES */
.gestion-retiros-solicitud-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.gestion-retiros-btn-detalle,
.gestion-retiros-btn-aprobar,
.gestion-retiros-btn-rechazar {
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}
.gestion-retiros-btn-detalle {
  background: linear-gradient(135deg, #4dd2ff, #7c5cff);
  background: linear-gradient(135deg, var(--grt-blue), var(--grt-purple));
  color: white;
  box-shadow: 0 4px 15px rgba(77,210,255,0.3);
}
.gestion-retiros-btn-detalle:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(77,210,255,0.5);
}
.gestion-retiros-btn-aprobar {
  background: linear-gradient(135deg, #27ae60, #229954);
  background: linear-gradient(135deg, var(--grt-green), #229954);
  color: white;
  box-shadow: 0 4px 15px rgba(39,174,96,0.3);
}
.gestion-retiros-btn-aprobar:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(39,174,96,0.5);
}
.gestion-retiros-btn-rechazar {
  background: linear-gradient(135deg, #e50914, #c0392b);
  background: linear-gradient(135deg, var(--grt-red), #c0392b);
  color: white;
  box-shadow: 0 4px 15px rgba(229,9,20,0.3);
}
.gestion-retiros-btn-rechazar:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(229,9,20,0.5);
}

/* MODALES */
.gestion-retiros-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}
.gestion-retiros-modal {
  background: #1a1b22;
  background: var(--grt-card);
  border-radius: 20px;
  max-width: 560px;
  width: 100%;
  border: 2px solid rgba(255,255,255,0.08);
  border: 2px solid var(--grt-border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: slideUp 0.4s ease;
  max-height: 85vh;
  overflow-y: auto;
}
.gestion-retiros-modal-header {
  padding: 24px 28px;
  border-bottom: 2px solid rgba(255,255,255,0.08);
  border-bottom: 2px solid var(--grt-border);
}
.gestion-retiros-modal-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  color: #d4af37;
  color: var(--grt-gold);
}
.gestion-retiros-modal-content {
  padding: 28px;
}
.gestion-retiros-modal-info-box {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border: 1px solid var(--grt-border);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
}
.gestion-retiros-modal-info-box p {
  margin: 8px 0;
  font-size: 15px;
}
.gestion-retiros-form-group {
  margin-bottom: 20px;
}
.gestion-retiros-label {
  display: block;
  font-weight: 700;
  margin-bottom: 10px;
  color: #ecf0f1;
  color: var(--grt-white);
  font-size: 15px;
}
.gestion-retiros-textarea {
  width: 100%;
  padding: 14px;
  border: 2px solid rgba(255,255,255,0.08);
  border: 2px solid var(--grt-border);
  border-radius: 12px;
  background: rgba(0,0,0,0.3);
  color: #ecf0f1;
  color: var(--grt-white);
  font-family: inherit;
  font-size: 15px;
  resize: vertical;
  outline: none;
  transition: border-color 0.3s ease;
}
.gestion-retiros-textarea:focus {
  border-color: #d4af37;
  border-color: var(--grt-gold);
}
.gestion-retiros-modal-warning {
  background: rgba(243,156,18,0.1);
  border: 1px solid #f39c12;
  border: 1px solid var(--grt-orange);
  border-radius: 10px;
  padding: 14px;
  margin-top: 16px;
}
.gestion-retiros-modal-warning p {
  margin: 0;
  color: #f39c12;
  color: var(--grt-orange);
  font-weight: 700;
  font-size: 14px;
}
.gestion-retiros-modal-actions {
  display: flex;
  gap: 12px;
  padding: 20px 28px;
  border-top: 2px solid rgba(255,255,255,0.08);
  border-top: 2px solid var(--grt-border);
  justify-content: flex-end;
}
.gestion-retiros-btn-cancelar,
.gestion-retiros-btn-confirmar-aprobar,
.gestion-retiros-btn-confirmar-rechazar,
.gestion-retiros-btn-cerrar {
  padding: 12px 28px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}
.gestion-retiros-btn-cancelar {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.08);
  border: 2px solid var(--grt-border);
  color: #ecf0f1;
  color: var(--grt-white);
}
.gestion-retiros-btn-cancelar:hover {
  border-color: #d4af37;
  border-color: var(--grt-gold);
  color: #d4af37;
  color: var(--grt-gold);
}
.gestion-retiros-btn-confirmar-aprobar {
  background: linear-gradient(135deg, #27ae60, #229954);
  background: linear-gradient(135deg, var(--grt-green), #229954);
  color: white;
  box-shadow: 0 4px 15px rgba(39,174,96,0.3);
}
.gestion-retiros-btn-confirmar-aprobar:hover {
  box-shadow: 0 8px 25px rgba(39,174,96,0.5);
  transform: translateY(-2px);
}
.gestion-retiros-btn-confirmar-rechazar {
  background: linear-gradient(135deg, #e50914, #c0392b);
  background: linear-gradient(135deg, var(--grt-red), #c0392b);
  color: white;
  box-shadow: 0 4px 15px rgba(229,9,20,0.3);
}
.gestion-retiros-btn-confirmar-rechazar:hover {
  box-shadow: 0 8px 25px rgba(229,9,20,0.5);
  transform: translateY(-2px);
}
.gestion-retiros-btn-cerrar {
  background: linear-gradient(135deg, #d4af37, #fffac2);
  background: linear-gradient(135deg, var(--grt-gold), #fffac2);
  color: #111;
  box-shadow: 0 4px 15px rgba(212,175,55,0.3);
}
.gestion-retiros-btn-cerrar:hover {
  box-shadow: 0 8px 25px rgba(212,175,55,0.5);
  transform: translateY(-2px);
}

/* DETALLE */
.gestion-retiros-detalle-section {
  margin-bottom: 24px;
}
.gestion-retiros-detalle-subtitle {
  font-size: 16px;
  font-weight: 800;
  color: #d4af37;
  color: var(--grt-gold);
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.gestion-retiros-detalle-section p {
  margin: 8px 0;
  font-size: 15px;
}

/* MODAL RESULTADO */
.gestion-retiros-modal-resultado {
  text-align: center;
  max-width: 420px;
  padding: 44px 32px;
}

/* src/pages/admin/Transacciones.css */
/* PREFIJO: atrx- (Admin TRansacciones eXtended) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --atrx-bg-primary: #0a0a0a;
  --atrx-bg-secondary: rgba(10, 10, 10, 0.95);
  --atrx-bg-card: rgba(20, 20, 20, 0.95);
  --atrx-gold: #d4af37;
  --atrx-gold-light: #f0d574;
  --atrx-text-primary: #e9ecef;
  --atrx-text-secondary: #b7bcc4;
  --atrx-border: rgba(255, 255, 255, 0.12);
  --atrx-success: #27ae60;
  --atrx-warning: #f39c12;
  --atrx-danger: #e74c3c;
  --atrx-info: #3498db;
}

/* ============================================ */
/* RESET & BASE */
/* ============================================ */
.atrx-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--atrx-bg-primary);
  font-family: 'Rajdhani', sans-serif;
}

.atrx-container * {
  box-sizing: border-box;
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.atrx-header {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--atrx-bg-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--atrx-border);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.atrx-header-content {
  max-width: 1800px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.atrx-back-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--atrx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atrx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.atrx-back-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateX(-2px);
}

.atrx-header-info {
  flex: 1 1;
}

.atrx-header-title {
  font-size: 28px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--atrx-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Orbitron', monospace;
  display: flex;
  align-items: center;
  gap: 12px;
}

.atrx-header-subtitle {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--atrx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.atrx-export-button {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--atrx-gold), var(--atrx-gold-light));
  color: #0a0a0a;
  color: var(--atrx-bg-primary);
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.atrx-export-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

/* ============================================ */
/* MAIN */
/* ============================================ */
.atrx-main {
  padding: 40px 24px;
}

.atrx-main-content {
  max-width: 1800px;
  margin: 0 auto;
}

/* ============================================ */
/* LOADING */
/* ============================================ */
.atrx-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--atrx-bg-primary);
  gap: 20px;
}

.atrx-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.1);
  border-top: 5px solid #d4af37;
  border-top: 5px solid var(--atrx-gold);
  border-radius: 50%;
  animation: atrx-spin 1s linear infinite;
}

@keyframes atrx-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.atrx-loading-text {
  color: #b7bcc4;
  color: var(--atrx-text-secondary);
  font-size: 16px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

/* ============================================ */
/* NOTIFICACIÓN */
/* ============================================ */
.atrx-notificacion {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--atrx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atrx-border);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 320px;
  animation: atrx-slideInRight 0.3s ease-out;
}

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

.atrx-notificacion-success {
  border-left: 4px solid #27ae60;
  border-left: 4px solid var(--atrx-success);
}

.atrx-notificacion-error {
  border-left: 4px solid #e74c3c;
  border-left: 4px solid var(--atrx-danger);
}

.atrx-notificacion-info {
  border-left: 4px solid #3498db;
  border-left: 4px solid var(--atrx-info);
}

.atrx-notificacion-contenido {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #e9ecef;
  color: var(--atrx-text-primary);
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.atrx-notificacion-success .atrx-notificacion-contenido {
  color: #27ae60;
  color: var(--atrx-success);
}

.atrx-notificacion-error .atrx-notificacion-contenido {
  color: #e74c3c;
  color: var(--atrx-danger);
}

.atrx-notificacion-info .atrx-notificacion-contenido {
  color: #3498db;
  color: var(--atrx-info);
}

.atrx-notificacion-cerrar {
  background: none;
  border: none;
  color: #b7bcc4;
  color: var(--atrx-text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}

.atrx-notificacion-cerrar:hover {
  color: #e9ecef;
  color: var(--atrx-text-primary);
}

/* ============================================ */
/* ESTADÍSTICAS */
/* ============================================ */
.atrx-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 40px;
}

.atrx-stat-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--atrx-bg-card);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atrx-border);
  transition: all 0.3s ease;
}

.atrx-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

.atrx-stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  color: white;
}

.atrx-stat-icon-total {
  background: linear-gradient(135deg, #3498db, #5dade2);
  background: linear-gradient(135deg, var(--atrx-info), #5dade2);
}

.atrx-stat-icon-recarga {
  background: linear-gradient(135deg, #27ae60, #52be80);
  background: linear-gradient(135deg, var(--atrx-success), #52be80);
}

.atrx-stat-icon-compra {
  background: linear-gradient(135deg, #e74c3c, #ec7063);
  background: linear-gradient(135deg, var(--atrx-danger), #ec7063);
}

.atrx-stat-icon-venta {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--atrx-gold), var(--atrx-gold-light));
}

.atrx-stat-content {
  flex: 1 1;
}

.atrx-stat-label {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--atrx-text-secondary);
  margin: 0 0 6px 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

.atrx-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--atrx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1;
}

/* ============================================ */
/* FILTROS Y BÚSQUEDA */
/* ============================================ */
.atrx-filters-section {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--atrx-bg-card);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atrx-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.atrx-search-box {
  position: relative;
  width: 100%;
}

.atrx-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #b7bcc4;
  color: var(--atrx-text-secondary);
}

.atrx-search-input {
  width: 100%;
  padding: 12px 12px 12px 48px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atrx-border);
  border-radius: 10px;
  color: #e9ecef;
  color: var(--atrx-text-primary);
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
  transition: all 0.3s ease;
}

.atrx-search-input:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--atrx-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.atrx-search-input::placeholder {
  color: #b7bcc4;
  color: var(--atrx-text-secondary);
}

.atrx-date-filters {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.atrx-date-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.atrx-date-label {
  font-size: 13px;
  font-weight: 600;
  color: #e9ecef;
  color: var(--atrx-text-primary);
  font-family: 'Rajdhani', sans-serif;
}

.atrx-date-input {
  padding: 10px 14px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atrx-border);
  border-radius: 8px;
  color: #e9ecef;
  color: var(--atrx-text-primary);
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
  transition: all 0.3s ease;
}

.atrx-date-input:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--atrx-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.atrx-clear-dates {
  background-color: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  color: var(--atrx-danger);
  border: 1px solid rgba(231, 76, 60, 0.3);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
}

.atrx-clear-dates:hover {
  background-color: rgba(231, 76, 60, 0.25);
  border-color: #e74c3c;
  border-color: var(--atrx-danger);
}

.atrx-filter-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.atrx-filter-button {
  background-color: rgba(255, 255, 255, 0.05);
  color: #b7bcc4;
  color: var(--atrx-text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atrx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.atrx-filter-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #d4af37;
  border-color: var(--atrx-gold);
}

.atrx-filter-active {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--atrx-gold), var(--atrx-gold-light));
  color: #0a0a0a;
  color: var(--atrx-bg-primary);
  border-color: #d4af37;
  border-color: var(--atrx-gold);
  font-weight: 600;
}

/* ============================================ */
/* EMPTY STATE */
/* ============================================ */
.atrx-empty-state {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--atrx-bg-card);
  border-radius: 16px;
  padding: 80px 40px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atrx-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.atrx-empty-icon {
  color: #b7bcc4;
  color: var(--atrx-text-secondary);
  margin-bottom: 24px;
  opacity: 0.5;
}

.atrx-empty-title {
  font-size: 24px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--atrx-text-primary);
  margin: 0 0 12px 0;
  font-family: 'Rajdhani', sans-serif;
}

.atrx-empty-text {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--atrx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* TABLA */
/* ============================================ */
.atrx-tabla-container {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--atrx-bg-card);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atrx-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.atrx-tabla {
  width: 100%;
  border-collapse: collapse;
}

.atrx-tabla-head {
  background-color: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--atrx-border);
}

.atrx-tabla-th {
  padding: 16px 20px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--atrx-text-primary);
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.atrx-tabla-body {
  background-color: transparent;
}

.atrx-tabla-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--atrx-border);
  transition: all 0.3s ease;
}

.atrx-tabla-row:last-child {
  border-bottom: none;
}

.atrx-tabla-row:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.atrx-tabla-td {
  padding: 16px 20px;
  font-size: 14px;
  color: #e9ecef;
  color: var(--atrx-text-primary);
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* BADGES Y ELEMENTOS DE TABLA */
/* ============================================ */
.atrx-tipo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.atrx-tipo-recarga {
  background-color: rgba(39, 174, 96, 0.15);
  color: #27ae60;
  color: var(--atrx-success);
  border: 1px solid rgba(39, 174, 96, 0.3);
}

.atrx-tipo-compra {
  background-color: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
  color: var(--atrx-danger);
  border: 1px solid rgba(231, 76, 60, 0.3);
}

.atrx-tipo-venta {
  background-color: rgba(212, 175, 55, 0.15);
  color: #d4af37;
  color: var(--atrx-gold);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.atrx-tipo-reembolso {
  background-color: rgba(52, 152, 219, 0.15);
  color: #3498db;
  color: var(--atrx-info);
  border: 1px solid rgba(52, 152, 219, 0.3);
}

.atrx-tipo-devolucion {
  background-color: rgba(243, 156, 18, 0.15);
  color: #f39c12;
  color: var(--atrx-warning);
  border: 1px solid rgba(243, 156, 18, 0.3);
}

.atrx-tipo-default {
  background-color: rgba(127, 140, 141, 0.15);
  color: #7f8c8d;
  border: 1px solid rgba(127, 140, 141, 0.3);
}

.atrx-usuario-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.atrx-usuario-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--atrx-gold), var(--atrx-gold-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  color: var(--atrx-bg-primary);
  flex-shrink: 0;
}

.atrx-usuario-nombre {
  font-size: 14px;
  font-weight: 600;
  color: #e9ecef;
  color: var(--atrx-text-primary);
  margin: 0 0 2px 0;
  font-family: 'Rajdhani', sans-serif;
}

.atrx-usuario-email {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--atrx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.atrx-descripcion {
  font-size: 14px;
  color: #e9ecef;
  color: var(--atrx-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
}

.atrx-pedido-id {
  font-size: 11px;
  color: #b7bcc4;
  color: var(--atrx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 4px;
}

.atrx-fecha {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--atrx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
}

.atrx-monto {
  font-size: 16px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
}

.atrx-btn-ver {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--atrx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atrx-border);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.atrx-btn-ver:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: #d4af37;
  border-color: var(--atrx-gold);
  transform: translateY(-2px);
}

/* ============================================ */
/* MODALES */
/* ============================================ */
.atrx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: atrx-fadeIn 0.3s ease-out;
}

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

.atrx-modal-content {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--atrx-bg-card);
  border-radius: 16px;
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atrx-border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
  animation: atrx-slideUp 0.3s ease-out;
}

@keyframes atrx-slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.atrx-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--atrx-border);
}

.atrx-modal-title {
  font-size: 22px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--atrx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.atrx-modal-close {
  background: none;
  border: none;
  color: #b7bcc4;
  color: var(--atrx-text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.atrx-modal-close:hover {
  color: #e9ecef;
  color: var(--atrx-text-primary);
  transform: rotate(90deg);
}

.atrx-modal-body {
  padding: 24px;
}

.atrx-modal-tipo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.03);
  border-left: 4px solid;
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
}

.atrx-modal-section {
  margin-bottom: 24px;
}

.atrx-modal-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--atrx-text-primary);
  margin: 0 0 16px 0;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.atrx-modal-usuario {
  display: flex;
  gap: 16px;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atrx-border);
}

.atrx-modal-usuario-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--atrx-gold), var(--atrx-gold-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  color: var(--atrx-bg-primary);
  flex-shrink: 0;
}

.atrx-modal-usuario-nombre {
  font-size: 16px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--atrx-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
}

.atrx-modal-usuario-email {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--atrx-text-secondary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
}

.atrx-modal-usuario-rol {
  font-size: 12px;
  color: #d4af37;
  color: var(--atrx-gold);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
}

.atrx-modal-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

.atrx-modal-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.atrx-modal-info-label {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--atrx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.atrx-modal-info-value {
  font-size: 14px;
  color: #e9ecef;
  color: var(--atrx-text-primary);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

.atrx-modal-info-value-monto {
  font-size: 20px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
}

.atrx-modal-id {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atrx-border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.atrx-modal-id-label {
  font-size: 11px;
  color: #b7bcc4;
  color: var(--atrx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
}

.atrx-modal-id-code {
  font-size: 12px;
  color: #d4af37;
  color: var(--atrx-gold);
  font-family: 'Courier New', monospace;
  background-color: rgba(212, 175, 55, 0.1);
  padding: 8px;
  border-radius: 6px;
  word-break: break-all;
}

.atrx-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid var(--atrx-border);
}

.atrx-modal-btn-cerrar {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--atrx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--atrx-border);
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.atrx-modal-btn-cerrar:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: #d4af37;
  border-color: var(--atrx-gold);
}

/* ============================================ */
/* SCROLLBAR PERSONALIZADO */
/* ============================================ */
.atrx-tabla-container::-webkit-scrollbar,
.atrx-modal-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.atrx-tabla-container::-webkit-scrollbar-track,
.atrx-modal-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.atrx-tabla-container::-webkit-scrollbar-thumb,
.atrx-modal-content::-webkit-scrollbar-thumb {
  background: #d4af37;
  background: var(--atrx-gold);
  border-radius: 10px;
}

.atrx-tabla-container::-webkit-scrollbar-thumb:hover,
.atrx-modal-content::-webkit-scrollbar-thumb:hover {
  background: #f0d574;
  background: var(--atrx-gold-light);
}

/* src/pages/admin/Billeteras.css */
/* PREFIJO: abwx- (Admin Billeteras eXtended) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --abwx-bg-primary: #0a0a0a;
  --abwx-bg-secondary: rgba(10, 10, 10, 0.95);
  --abwx-bg-card: rgba(20, 20, 20, 0.95);
  --abwx-gold: #d4af37;
  --abwx-gold-light: #f0d574;
  --abwx-text-primary: #e9ecef;
  --abwx-text-secondary: #b7bcc4;
  --abwx-border: rgba(255, 255, 255, 0.12);
  --abwx-success: #27ae60;
  --abwx-warning: #f39c12;
  --abwx-danger: #e74c3c;
  --abwx-info: #3498db;
}

/* ============================================ */
/* RESET & BASE */
/* ============================================ */
.abwx-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--abwx-bg-primary);
  font-family: 'Rajdhani', sans-serif;
}

.abwx-container * {
  box-sizing: border-box;
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.abwx-header {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--abwx-bg-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--abwx-border);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.abwx-header-content {
  max-width: 1800px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.abwx-back-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--abwx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--abwx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.abwx-back-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateX(-2px);
}

.abwx-header-info {
  flex: 1 1;
}

.abwx-header-title {
  font-size: 28px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--abwx-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Orbitron', monospace;
  display: flex;
  align-items: center;
  gap: 12px;
}

.abwx-header-subtitle {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* MAIN */
/* ============================================ */
.abwx-main {
  padding: 40px 24px;
}

.abwx-main-content {
  max-width: 1800px;
  margin: 0 auto;
}

/* ============================================ */
/* LOADING */
/* ============================================ */
.abwx-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--abwx-bg-primary);
  gap: 20px;
}

.abwx-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.1);
  border-top: 5px solid #d4af37;
  border-top: 5px solid var(--abwx-gold);
  border-radius: 50%;
  animation: abwx-spin 1s linear infinite;
}

@keyframes abwx-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.abwx-loading-text {
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
  font-size: 16px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

/* ============================================ */
/* NOTIFICACIÓN */
/* ============================================ */
.abwx-notificacion {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--abwx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--abwx-border);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 320px;
  animation: abwx-slideInRight 0.3s ease-out;
}

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

.abwx-notificacion-success {
  border-left: 4px solid #27ae60;
  border-left: 4px solid var(--abwx-success);
}

.abwx-notificacion-error {
  border-left: 4px solid #e74c3c;
  border-left: 4px solid var(--abwx-danger);
}

.abwx-notificacion-info {
  border-left: 4px solid #3498db;
  border-left: 4px solid var(--abwx-info);
}

.abwx-notificacion-contenido {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #e9ecef;
  color: var(--abwx-text-primary);
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.abwx-notificacion-success .abwx-notificacion-contenido {
  color: #27ae60;
  color: var(--abwx-success);
}

.abwx-notificacion-error .abwx-notificacion-contenido {
  color: #e74c3c;
  color: var(--abwx-danger);
}

.abwx-notificacion-info .abwx-notificacion-contenido {
  color: #3498db;
  color: var(--abwx-info);
}

.abwx-notificacion-cerrar {
  background: none;
  border: none;
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}

.abwx-notificacion-cerrar:hover {
  color: #e9ecef;
  color: var(--abwx-text-primary);
}

/* ============================================ */
/* ESTADÍSTICAS */
/* ============================================ */
.abwx-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 40px;
}

.abwx-stat-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--abwx-bg-card);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--abwx-border);
  transition: all 0.3s ease;
}

.abwx-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

.abwx-stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  color: white;
}

.abwx-stat-icon-total {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--abwx-gold), var(--abwx-gold-light));
}

.abwx-stat-icon-clientes {
  background: linear-gradient(135deg, #3498db, #5dade2);
  background: linear-gradient(135deg, var(--abwx-info), #5dade2);
}

.abwx-stat-icon-vendedores {
  background: linear-gradient(135deg, #27ae60, #52be80);
  background: linear-gradient(135deg, var(--abwx-success), #52be80);
}

.abwx-stat-icon-usuarios {
  background: linear-gradient(135deg, #f39c12, #f8b739);
  background: linear-gradient(135deg, var(--abwx-warning), #f8b739);
}

.abwx-stat-content {
  flex: 1 1;
}

.abwx-stat-label {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
  margin: 0 0 6px 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

.abwx-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--abwx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1;
}

/* ============================================ */
/* FILTROS Y BÚSQUEDA */
/* ============================================ */
.abwx-filters-section {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--abwx-bg-card);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--abwx-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.abwx-search-box {
  position: relative;
  flex: 1 1;
  min-width: 300px;
}

.abwx-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
}

.abwx-search-input {
  width: 100%;
  padding: 12px 12px 12px 48px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--abwx-border);
  border-radius: 10px;
  color: #e9ecef;
  color: var(--abwx-text-primary);
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
  transition: all 0.3s ease;
}

.abwx-search-input:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--abwx-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.abwx-search-input::placeholder {
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
}

.abwx-filter-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.abwx-filter-button {
  background-color: rgba(255, 255, 255, 0.05);
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--abwx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.abwx-filter-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #d4af37;
  border-color: var(--abwx-gold);
}

.abwx-filter-active {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--abwx-gold), var(--abwx-gold-light));
  color: #0a0a0a;
  color: var(--abwx-bg-primary);
  border-color: #d4af37;
  border-color: var(--abwx-gold);
  font-weight: 600;
}

/* ============================================ */
/* EMPTY STATE */
/* ============================================ */
.abwx-empty-state {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--abwx-bg-card);
  border-radius: 16px;
  padding: 80px 40px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--abwx-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.abwx-empty-icon {
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
  margin-bottom: 24px;
  opacity: 0.5;
}

.abwx-empty-title {
  font-size: 24px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--abwx-text-primary);
  margin: 0 0 12px 0;
  font-family: 'Rajdhani', sans-serif;
}

.abwx-empty-text {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* GRID DE USUARIOS */
/* ============================================ */
.abwx-usuarios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.abwx-usuario-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--abwx-bg-card);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--abwx-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.abwx-usuario-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  border-color: #d4af37;
  border-color: var(--abwx-gold);
}

.abwx-usuario-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.abwx-usuario-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--abwx-gold), var(--abwx-gold-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  color: var(--abwx-bg-primary);
  flex-shrink: 0;
}

.abwx-usuario-info {
  flex: 1 1;
  min-width: 0;
}

.abwx-usuario-nombre {
  font-size: 18px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--abwx-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abwx-usuario-email {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
  margin: 0 0 8px 0;
  font-family: 'Rajdhani', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abwx-usuario-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.abwx-badge-cliente {
  background-color: rgba(52, 152, 219, 0.15);
  color: #3498db;
  color: var(--abwx-info);
  border: 1px solid rgba(52, 152, 219, 0.3);
}

.abwx-badge-vendedor {
  background-color: rgba(39, 174, 96, 0.15);
  color: #27ae60;
  color: var(--abwx-success);
  border: 1px solid rgba(39, 174, 96, 0.3);
}

.abwx-usuario-saldo {
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--abwx-border);
}

.abwx-saldo-label {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
  margin: 0 0 8px 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.abwx-saldo-valor {
  font-size: 32px;
  font-weight: 900;
  color: #d4af37;
  color: var(--abwx-gold);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1;
}

.abwx-saldo-movimientos {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.abwx-usuario-actions {
  display: flex;
  gap: 12px;
}

.abwx-btn-ver,
.abwx-btn-recargar {
  flex: 1 1;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
}

.abwx-btn-ver {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--abwx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--abwx-border);
}

.abwx-btn-ver:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: #d4af37;
  border-color: var(--abwx-gold);
}

.abwx-btn-recargar {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--abwx-gold), var(--abwx-gold-light));
  color: #0a0a0a;
  color: var(--abwx-bg-primary);
}

.abwx-btn-recargar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

/* ============================================ */
/* MODALES */
/* ============================================ */
.abwx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: abwx-fadeIn 0.3s ease-out;
}

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

.abwx-modal-content {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--abwx-bg-card);
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--abwx-border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
  animation: abwx-slideUp 0.3s ease-out;
}

.abwx-modal-wide {
  max-width: 800px;
}

@keyframes abwx-slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.abwx-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--abwx-border);
}

.abwx-modal-title {
  font-size: 22px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--abwx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.abwx-modal-close {
  background: none;
  border: none;
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.abwx-modal-close:hover {
  color: #e9ecef;
  color: var(--abwx-text-primary);
  transform: rotate(90deg);
}

.abwx-modal-body {
  padding: 24px;
}

.abwx-modal-usuario-info {
  display: flex;
  gap: 16px;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--abwx-border);
}

.abwx-modal-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--abwx-gold), var(--abwx-gold-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  color: var(--abwx-bg-primary);
  flex-shrink: 0;
}

.abwx-modal-usuario-nombre {
  font-size: 18px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--abwx-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
}

.abwx-modal-usuario-email {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
  margin: 0 0 8px 0;
  font-family: 'Rajdhani', sans-serif;
}

.abwx-modal-usuario-saldo {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.abwx-modal-usuario-saldo strong {
  color: #d4af37;
  color: var(--abwx-gold);
  font-weight: 700;
}

.abwx-form-group {
  margin-bottom: 24px;
}

.abwx-form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #e9ecef;
  color: var(--abwx-text-primary);
  margin-bottom: 8px;
  font-family: 'Rajdhani', sans-serif;
}

.abwx-form-input {
  width: 100%;
  padding: 12px 16px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--abwx-border);
  border-radius: 10px;
  color: #e9ecef;
  color: var(--abwx-text-primary);
  font-size: 16px;
  font-family: 'Rajdhani', sans-serif;
  transition: all 0.3s ease;
}

.abwx-form-input:focus {
  outline: none;
  border-color: #d4af37;
  border-color: var(--abwx-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.abwx-form-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.abwx-preview-recarga {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.abwx-preview-recarga p:first-child {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
  margin: 0 0 8px 0;
  font-family: 'Rajdhani', sans-serif;
}

.abwx-preview-valor {
  font-size: 28px;
  font-weight: 900;
  color: #d4af37;
  color: var(--abwx-gold);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.abwx-modal-footer {
  display: flex;
  gap: 12px;
  padding: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid var(--abwx-border);
}

.abwx-modal-btn-cancelar,
.abwx-modal-btn-confirmar,
.abwx-modal-btn-cerrar {
  flex: 1 1;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  border: none;
}

.abwx-modal-btn-cancelar {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--abwx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--abwx-border);
}

.abwx-modal-btn-cancelar:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.15);
}

.abwx-modal-btn-confirmar {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--abwx-gold), var(--abwx-gold-light));
  color: #0a0a0a;
  color: var(--abwx-bg-primary);
}

.abwx-modal-btn-confirmar:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.abwx-modal-btn-confirmar:disabled,
.abwx-modal-btn-cancelar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.abwx-modal-btn-cerrar {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--abwx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--abwx-border);
}

.abwx-modal-btn-cerrar:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.abwx-modal-empty {
  text-align: center;
  padding: 40px 20px;
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* LISTA DE MOVIMIENTOS */
/* ============================================ */
.abwx-movimientos-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.abwx-movimiento-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--abwx-border);
  transition: all 0.3s ease;
}

.abwx-movimiento-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: #d4af37;
  border-color: var(--abwx-gold);
}

.abwx-movimiento-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.abwx-movimiento-info {
  flex: 1 1;
  min-width: 0;
}

.abwx-movimiento-tipo {
  font-size: 15px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--abwx-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
}

.abwx-movimiento-descripcion {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abwx-movimiento-fecha {
  font-size: 12px;
  color: #b7bcc4;
  color: var(--abwx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.abwx-movimiento-monto {
  font-size: 18px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  flex-shrink: 0;
}

/* ============================================ */
/* SCROLLBAR PERSONALIZADO */
/* ============================================ */
.abwx-movimientos-lista::-webkit-scrollbar,
.abwx-modal-content::-webkit-scrollbar {
  width: 8px;
}

.abwx-movimientos-lista::-webkit-scrollbar-track,
.abwx-modal-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.abwx-movimientos-lista::-webkit-scrollbar-thumb,
.abwx-modal-content::-webkit-scrollbar-thumb {
  background: #d4af37;
  background: var(--abwx-gold);
  border-radius: 10px;
}

.abwx-movimientos-lista::-webkit-scrollbar-thumb:hover,
.abwx-modal-content::-webkit-scrollbar-thumb:hover {
  background: #f0d574;
  background: var(--abwx-gold-light);
}

/* src/pages/admin/Estadisticas.css */
/* PREFIJO: aestx- (Admin ESTadisticas eXtended) */

/* ============================================ */
/* IMPORTS */
/* ============================================ */

/* ============================================ */
/* VARIABLES */
/* ============================================ */
:root {
  --aestx-bg-primary: #0a0a0a;
  --aestx-bg-secondary: rgba(10, 10, 10, 0.95);
  --aestx-bg-card: rgba(20, 20, 20, 0.95);
  --aestx-gold: #d4af37;
  --aestx-gold-light: #f0d574;
  --aestx-text-primary: #e9ecef;
  --aestx-text-secondary: #b7bcc4;
  --aestx-border: rgba(255, 255, 255, 0.12);
  --aestx-success: #27ae60;
  --aestx-warning: #f39c12;
  --aestx-danger: #e74c3c;
  --aestx-info: #3498db;
}

/* ============================================ */
/* RESET & BASE */
/* ============================================ */
.aestx-container {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--aestx-bg-primary);
  font-family: 'Rajdhani', sans-serif;
}

.aestx-container * {
  box-sizing: border-box;
}

/* ============================================ */
/* HEADER */
/* ============================================ */
.aestx-header {
  background-color: rgba(10, 10, 10, 0.95);
  background-color: var(--aestx-bg-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid var(--aestx-border);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.aestx-header-content {
  max-width: 1800px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.aestx-back-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e9ecef;
  color: var(--aestx-text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--aestx-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.aestx-back-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateX(-2px);
}

.aestx-header-info {
  flex: 1 1;
}

.aestx-header-title {
  font-size: 28px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--aestx-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Orbitron', monospace;
  display: flex;
  align-items: center;
  gap: 12px;
}

.aestx-header-subtitle {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--aestx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.aestx-periodo-selector {
  display: flex;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--aestx-border);
}

.aestx-periodo-btn {
  background-color: transparent;
  color: #b7bcc4;
  color: var(--aestx-text-secondary);
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rajdhani', sans-serif;
}

.aestx-periodo-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.aestx-periodo-active {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--aestx-gold), var(--aestx-gold-light));
  color: #0a0a0a;
  color: var(--aestx-bg-primary);
  font-weight: 600;
}

/* ============================================ */
/* MAIN */
/* ============================================ */
.aestx-main {
  padding: 40px 24px;
}

.aestx-main-content {
  max-width: 1800px;
  margin: 0 auto;
}

/* ============================================ */
/* LOADING */
/* ============================================ */
.aestx-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #0a0a0a;
  background-color: var(--aestx-bg-primary);
  gap: 20px;
}

.aestx-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.1);
  border-top: 5px solid #d4af37;
  border-top: 5px solid var(--aestx-gold);
  border-radius: 50%;
  animation: aestx-spin 1s linear infinite;
}

@keyframes aestx-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.aestx-loading-text {
  color: #b7bcc4;
  color: var(--aestx-text-secondary);
  font-size: 16px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

/* ============================================ */
/* NOTIFICACIÓN */
/* ============================================ */
.aestx-notificacion {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000;
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--aestx-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--aestx-border);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 320px;
  animation: aestx-slideInRight 0.3s ease-out;
}

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

.aestx-notificacion-success {
  border-left: 4px solid #27ae60;
  border-left: 4px solid var(--aestx-success);
}

.aestx-notificacion-error {
  border-left: 4px solid #e74c3c;
  border-left: 4px solid var(--aestx-danger);
}

.aestx-notificacion-info {
  border-left: 4px solid #3498db;
  border-left: 4px solid var(--aestx-info);
}

.aestx-notificacion-contenido {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #e9ecef;
  color: var(--aestx-text-primary);
  font-family: 'Rajdhani', sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.aestx-notificacion-success .aestx-notificacion-contenido {
  color: #27ae60;
  color: var(--aestx-success);
}

.aestx-notificacion-error .aestx-notificacion-contenido {
  color: #e74c3c;
  color: var(--aestx-danger);
}

.aestx-notificacion-info .aestx-notificacion-contenido {
  color: #3498db;
  color: var(--aestx-info);
}

.aestx-notificacion-cerrar {
  background: none;
  border: none;
  color: #b7bcc4;
  color: var(--aestx-text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}

.aestx-notificacion-cerrar:hover {
  color: #e9ecef;
  color: var(--aestx-text-primary);
}

/* ============================================ */
/* SECCIONES */
/* ============================================ */
.aestx-section {
  margin-bottom: 48px;
}

.aestx-section-title {
  font-size: 22px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--aestx-text-primary);
  margin: 0 0 24px 0;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ============================================ */
/* MÉTRICAS PRINCIPALES */
/* ============================================ */
.aestx-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.aestx-metric-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--aestx-bg-card);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--aestx-border);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.aestx-metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #d4af37, #f0d574);
  background: linear-gradient(90deg, var(--aestx-gold), var(--aestx-gold-light));
}

.aestx-metric-primary::before {
  background: linear-gradient(90deg, #d4af37, #f0d574);
  background: linear-gradient(90deg, var(--aestx-gold), var(--aestx-gold-light));
}

.aestx-metric-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
}

.aestx-metric-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--aestx-gold), var(--aestx-gold-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  color: var(--aestx-bg-primary);
  flex-shrink: 0;
}

.aestx-icon-info {
  background: linear-gradient(135deg, #3498db, #5dade2);
  background: linear-gradient(135deg, var(--aestx-info), #5dade2);
}

.aestx-icon-success {
  background: linear-gradient(135deg, #27ae60, #52be80);
  background: linear-gradient(135deg, var(--aestx-success), #52be80);
}

.aestx-icon-wallet {
  background: linear-gradient(135deg, #f39c12, #f8b739);
  background: linear-gradient(135deg, var(--aestx-warning), #f8b739);
}

.aestx-metric-content {
  flex: 1 1;
}

.aestx-metric-label {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--aestx-text-secondary);
  margin: 0 0 8px 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.aestx-metric-value {
  font-size: 36px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--aestx-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1;
}

.aestx-metric-subtext {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--aestx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* ESTADÍSTICAS GRID */
/* ============================================ */
.aestx-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.aestx-stat-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--aestx-bg-card);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--aestx-border);
  transition: all 0.3s ease;
}

.aestx-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  border-color: #d4af37;
  border-color: var(--aestx-gold);
}

.aestx-stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
}

.aestx-stat-icon-total {
  background: linear-gradient(135deg, #3498db, #5dade2);
  background: linear-gradient(135deg, var(--aestx-info), #5dade2);
}

.aestx-stat-icon-pendiente {
  background: linear-gradient(135deg, #f39c12, #f8b739);
  background: linear-gradient(135deg, var(--aestx-warning), #f8b739);
}

.aestx-stat-icon-proceso {
  background: linear-gradient(135deg, #3498db, #5dade2);
  background: linear-gradient(135deg, var(--aestx-info), #5dade2);
}

.aestx-stat-icon-entregado {
  background: linear-gradient(135deg, #27ae60, #52be80);
  background: linear-gradient(135deg, var(--aestx-success), #52be80);
}

.aestx-stat-icon-completado {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--aestx-gold), var(--aestx-gold-light));
}

.aestx-stat-icon-cancelado {
  background: linear-gradient(135deg, #e74c3c, #ec7063);
  background: linear-gradient(135deg, var(--aestx-danger), #ec7063);
}

.aestx-stat-icon-clientes {
  background: linear-gradient(135deg, #3498db, #5dade2);
  background: linear-gradient(135deg, var(--aestx-info), #5dade2);
}

.aestx-stat-icon-vendedores {
  background: linear-gradient(135deg, #27ae60, #52be80);
  background: linear-gradient(135deg, var(--aestx-success), #52be80);
}

.aestx-stat-icon-productos {
  background: linear-gradient(135deg, #f39c12, #f8b739);
  background: linear-gradient(135deg, var(--aestx-warning), #f8b739);
}

.aestx-stat-icon-aprobados {
  background: linear-gradient(135deg, #d4af37, #f0d574);
  background: linear-gradient(135deg, var(--aestx-gold), var(--aestx-gold-light));
}

.aestx-stat-content {
  flex: 1 1;
  text-align: right;
}

.aestx-stat-value {
  font-size: 32px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--aestx-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1;
}

.aestx-stat-label {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--aestx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
}

/* ============================================ */
/* RANKINGS */
/* ============================================ */
.aestx-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aestx-ranking-item {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--aestx-bg-card);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--aestx-border);
  transition: all 0.3s ease;
}

.aestx-ranking-item:hover {
  transform: translateX(8px);
  border-color: #d4af37;
  border-color: var(--aestx-gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

.aestx-ranking-position {
  flex-shrink: 0;
}

.aestx-position-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 900;
  font-family: 'Orbitron', monospace;
  color: white;
}

.aestx-position-1 {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.aestx-position-2 {
  background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
  box-shadow: 0 4px 12px rgba(192, 192, 192, 0.4);
}

.aestx-position-3 {
  background: linear-gradient(135deg, #cd7f32, #d89a5a);
  box-shadow: 0 4px 12px rgba(205, 127, 50, 0.4);
}

.aestx-position-4,
.aestx-position-5 {
  background: linear-gradient(135deg, #3498db, #5dade2);
  background: linear-gradient(135deg, var(--aestx-info), #5dade2);
}

.aestx-ranking-info {
  flex: 1 1;
  min-width: 0;
}

.aestx-ranking-nombre {
  font-size: 16px;
  font-weight: 700;
  color: #e9ecef;
  color: var(--aestx-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Rajdhani', sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aestx-ranking-meta {
  font-size: 13px;
  color: #b7bcc4;
  color: var(--aestx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.aestx-ranking-valor {
  text-align: right;
  flex-shrink: 0;
}

.aestx-ranking-monto {
  font-size: 22px;
  font-weight: 900;
  color: #d4af37;
  color: var(--aestx-gold);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

.aestx-empty-ranking {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--aestx-bg-card);
  border-radius: 12px;
  padding: 60px 40px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--aestx-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.aestx-empty-ranking p {
  font-size: 16px;
  color: #b7bcc4;
  color: var(--aestx-text-secondary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
}

/* ============================================ */
/* RESUMEN FINANCIERO */
/* ============================================ */
.aestx-financial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.aestx-financial-card {
  background-color: rgba(20, 20, 20, 0.95);
  background-color: var(--aestx-bg-card);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border: 1px solid var(--aestx-border);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.aestx-financial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}

.aestx-financial-income::before {
  background: linear-gradient(90deg, #27ae60, #52be80);
  background: linear-gradient(90deg, var(--aestx-success), #52be80);
}

.aestx-financial-recargas::before {
  background: linear-gradient(90deg, #3498db, #5dade2);
  background: linear-gradient(90deg, var(--aestx-info), #5dade2);
}

.aestx-financial-reembolsos::before {
  background: linear-gradient(90deg, #f39c12, #f8b739);
  background: linear-gradient(90deg, var(--aestx-warning), #f8b739);
}

.aestx-financial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
}

.aestx-financial-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aestx-financial-income .aestx-financial-icon {
  color: #27ae60;
  color: var(--aestx-success);
}

.aestx-financial-recargas .aestx-financial-icon {
  color: #3498db;
  color: var(--aestx-info);
}

.aestx-financial-reembolsos .aestx-financial-icon {
  color: #f39c12;
  color: var(--aestx-warning);
}

.aestx-financial-label {
  font-size: 14px;
  color: #b7bcc4;
  color: var(--aestx-text-secondary);
  margin: 0 0 8px 0;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.aestx-financial-value {
  font-size: 28px;
  font-weight: 900;
  color: #e9ecef;
  color: var(--aestx-text-primary);
  margin: 0;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1;
}