/* ==========================================================
   JUGUETERIALRN - ESTILOS
   DISENO ACTIVO: Neon Galaxy JugueteriaLRN - morado/azul degradado,
   anillo cian neon, badges magenta, tokens aprobados 2026-08-06

   DISENOS DISPONIBLES (cambiar comentando/descomentando bloques):
   [0] neon-galaxy-jugueterialrn - morado/azul degradado, cian/magenta neon (ACTIVO)
   [1] comic-jugueteria      - crema/naranja/azul, sombra comic (anterior, comentado abajo)
   [2] juguetes-educativos   - blanco/colores primarios (anterior)
   [3] colorido-infantil     - Lego style (anterior)
   [4] cyberpunk             - neon cyan/magenta, 70vh hero, particles
   [5] gradient-futurista    - violet/cyan/red palette, pill categories
   [6] default               - original dark theme
   ========================================================== */

/* ===== Fuentes ===== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ===== Variables ===== */
/* TEMA-neon-galaxy-jugueterialrn (activo, tokens aprobados 2026-08-06) */
:root {
  /* Colores legado -- se mantienen para compatibilidad, sin tocar */
  --color-rojo: #E31E24;
  --color-azul: #0051A8;
  --color-amarillo: #FFB81C;
  --color-verde: #009639;
  --color-naranja: #FF6600;

  /* Fondo: degradado morado -> azul profundo con glow */
  --fondo-degradado-inicio: #2d0b6b;
  --fondo-degradado-fin: #0a1652;
  --fondo: #170a3d;          /* tono solido de referencia (mismo degradado aplicado en body) */
  --superficie: #1b0f47;     /* tarjetas */
  --superficie-2: #140a35;   /* fondos secundarios / inputs */
  --fondo-tarjeta: #1b0f47;
  --superficie-foto: #ffffff; /* las fotos de producto quedan sobre blanco para que se vean bien */

  /* Texto (blanco sobre fondo oscuro) */
  --texto-principal: #FFFFFF;
  --texto-secundario: rgba(255, 255, 255, 0.78);
  --texto-muted: rgba(255, 255, 255, 0.55);
  --texto-blanco: #FFFFFF;

  /* Bordes */
  --borde: rgba(0, 229, 255, 0.35);
  --borde-ancho: 2px;
  --borde-tarjeta-1: rgba(0, 229, 255, 0.35);
  --borde-tarjeta-2: rgba(0, 229, 255, 0.35);
  --borde-tarjeta-3: rgba(0, 229, 255, 0.35);
  --borde-tarjeta-4: rgba(0, 229, 255, 0.35);

  /* Acentos de marca */
  --acento: #00E5FF;         /* cian neon - CTA/botones/anillo del logo */
  --acento-2: #00E5FF;       /* cian neon - categoria/detalles/iconos */
  --magenta: #d6006f;        /* badges destacados ("Todo en juguetes", "Oferta") */
  --dorado: #FFD400;         /* precio mayor */
  --negro-categoria: #0a1652;

  /* Estados */
  --error: #FF4D6D;
  --exito: #00FFA3;
  --advertencia: #FFD400;

  /* Radio y sombras (glow neon en vez de sombra solida) */
  --radio: 16px;
  --radio-sm: 10px;
  --radio-lg: 18px;
  --sombra: 0 0 18px rgba(0, 229, 255, 0.25);
  --sombra-hover: 0 0 28px rgba(0, 229, 255, 0.45);
  --sombra-sm: 0 0 12px rgba(0, 229, 255, 0.2);
  --transicion: 0.15s ease;

  /* Fuentes */
  --font-heading: 'Baloo 2', 'Nunito', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Compat: variables historicas reusadas por reglas existentes */
  --acento-1: #00E5FF;
  --grad-1: #00E5FF;
  --grad-2: #d6006f;
  --superficie-1: #140a35;
  --btn-bg-1: #00E5FF;
  --btn-txt-1: #0a1652;
  --btn-bg-2: #00E5FF;
  --btn-txt-2: #0a1652;
  --btn-bg-3: #00E5FF;
  --btn-txt-3: #0a1652;
  --btn-bg-4: #00E5FF;
  --btn-txt-4: #0a1652;
}

/* TEMA-comic-jugueteria - version anterior, descomentar para volver */
/*
:root {
  --color-rojo: #E31E24;
  --color-azul: #0051A8;
  --color-amarillo: #FFB81C;
  --color-verde: #009639;
  --color-naranja: #FF6600;
  --fondo: #FBE9D0;
  --superficie: #FFFFFF;
  --superficie-2: #FFF3DE;
  --fondo-tarjeta: #FFFFFF;
  --superficie-foto: #FFFFFF;
  --texto-principal: #21202B;
  --texto-secundario: #4A4854;
  --texto-muted: #726F80;
  --texto-blanco: #FFFFFF;
  --borde: #21202B;
  --borde-ancho: 3px;
  --borde-tarjeta-1: #21202B;
  --borde-tarjeta-2: #21202B;
  --borde-tarjeta-3: #21202B;
  --borde-tarjeta-4: #21202B;
  --acento: #FF5A1F;
  --acento-2: #2FA8E0;
  --dorado: #FFB400;
  --negro-categoria: #1C1B22;
  --error: #D6392E;
  --exito: #2E9E5B;
  --advertencia: #FFB400;
  --radio: 16px;
  --radio-sm: 10px;
  --radio-lg: 18px;
  --sombra: 4px 4px 0 var(--texto-principal);
  --sombra-hover: 6px 6px 0 var(--texto-principal);
  --sombra-sm: 3px 3px 0 var(--texto-principal);
  --transicion: 0.15s ease;
  --font-heading: 'Baloo 2', 'Nunito', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --acento-1: #2FA8E0;
  --grad-1: #FF5A1F;
  --grad-2: #2FA8E0;
  --superficie-1: #FFF3DE;
  --btn-bg-1: #FF5A1F;
  --btn-txt-1: #FFFFFF;
  --btn-bg-2: #FF5A1F;
  --btn-txt-2: #FFFFFF;
  --btn-bg-3: #FF5A1F;
  --btn-txt-3: #FFFFFF;
  --btn-bg-4: #FF5A1F;
  --btn-txt-4: #FFFFFF;
}
*/

/* TEMA-cyberpunk - descomentar para activar */
/*
:root {
  --fondo: #1a0b2e;
  --superficie: #160b28;
  --superficie-2: #0d0520;
  --acento: #e91e63;
  --acento-2: #00ffff;
  --borde: #2a1a4a;
  --texto-principal: #ffffff;
  --texto-secundario: rgba(255, 255, 255, 0.8);
  --texto-muted: #6b5b8a;
  --error: #ef4444;
  --exito: #22c55e;
  --radio: 16px;
  --radio-sm: 10px;
  --sombra: 0 2px 16px rgba(0, 0, 0, 0.6);
  --transicion: 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  --grad-1: linear-gradient(135deg, #00ffff, #0080ff);
  --grad-2: linear-gradient(135deg, #ff00ff, #e91e63);
  --grad-card: linear-gradient(135deg, rgba(0, 255, 255, 0.08), rgba(255, 0, 255, 0.04));
  --neon-cyan: #00ffff;
  --neon-magenta: #ff00ff;
  --neon-pink: #e91e63;
  --font-heading: 'Orbitron', 'Nunito', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
*/

/* TEMA-gradient-futurista - descomentar para activar */
/*
:root {
  --fondo: #08080f;
  --superficie: #12121f;
  --superficie-2: #1a1a30;
  --acento: #f43f5e;
  --acento-2: #22d3ee;
  --borde: #2a2a45;
  --texto-principal: #e8e8f0;
  --texto-secundario: #8888aa;
  --texto-muted: #55557a;
  --error: #ef4444;
  --exito: #22c55e;
  --radio: 16px;
  --radio-sm: 10px;
  --sombra: 0 2px 16px rgba(0, 0, 0, 0.5);
  --transicion: 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  --grad-1: linear-gradient(135deg, #7c3aed, #f43f5e);
  --grad-2: linear-gradient(135deg, #22d3ee, #7c3aed);
  --grad-card: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(244, 63, 94, 0.05));
}
*/

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(600px 400px at 15% 0%, rgba(0, 229, 255, 0.16) 0%, transparent 60%),
    radial-gradient(700px 500px at 85% 20%, rgba(214, 0, 111, 0.14) 0%, transparent 60%),
    linear-gradient(160deg, var(--fondo-degradado-inicio) 0%, var(--fondo-degradado-fin) 100%);
  background-attachment: fixed;
  color: var(--texto-principal);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .h-like { font-family: var(--font-heading); font-weight: 700; }
main { flex: 1 1 auto; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: var(--acento); color: #0a1652; }

h1, h2, h3, .h-like { font-family: var(--font-heading); font-weight: 700; }

/* ===== Layout ===== */
.contenedor {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== Header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--superficie);
  border-bottom: var(--borde-ancho) solid var(--borde);
  padding: 16px 0;
}

/* Logo simplificado (index.html): emoji + nombre + tag de catalogo */
.header-logo-nuevo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-heading);
  text-decoration: none;
  white-space: nowrap;
}

.header-logo-nuevo .logo-emoji {
  font-size: 28px;
  line-height: 1;
}

.header-logo-nuevo .logo-texto {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  color: var(--texto-principal);
}

.header-logo-nuevo .logo-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-blanco);
  background: var(--negro-categoria);
  padding: 3px 8px;
  border-radius: 6px;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Logo/Título JUGUETERIALRN con letras alternadas */
.header-logo {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  text-align: center;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

/* Letras alternadas: Rojo, Azul, Amarillo, Rojo, Azul, Amarillo... */
.header-logo .letra-1 { color: var(--color-rojo); }
.header-logo .letra-2 { color: var(--color-azul); }
.header-logo .letra-3 { color: var(--color-amarillo); }
.header-logo .letra-4 { color: var(--color-rojo); }
.header-logo .letra-5 { color: var(--color-azul); }
.header-logo .letra-6 { color: var(--color-amarillo); }
.header-logo .letra-7 { color: var(--color-rojo); }
.header-logo .letra-8 { color: var(--color-azul); }
.header-logo .letra-9 { color: var(--color-amarillo); }
.header-logo .letra-10 { color: var(--color-rojo); }
.header-logo .letra-11 { color: var(--color-azul); }
.header-logo .letra-12 { color: var(--color-amarillo); }
.header-logo .letra-13 { color: var(--color-rojo); }
.header-logo .espacio { display: inline-block; width: 0.3em; }

.header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-nav a {
  font-size: 14px;
  color: var(--texto-secundario);
  transition: color var(--transicion);
  position: relative;
  padding: 8px 0;
}

.header-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--grad-1);
  transition: width var(--transicion);
  border-radius: 2px;
}

.header-nav a:hover,
.header-nav a.activo {
  color: var(--acento);
}

.header-nav a:hover::after,
.header-nav a.activo::after {
  width: 100%;
}

.header-nav .carrito-link {
  position: relative;
}

.header-busqueda {
  position: relative;
  flex: 1;
  max-width: 280px;
  margin: 0 24px;
}

.buscador-input {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 20px;
  padding: 7px 16px;
  color: #2C3E50;
  font-size: 13px;
  font-family: var(--font-body);
  transition: border-color 0.25s ease;
}

.buscador-input::placeholder {
  color: #999999;
}

.buscador-input:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.18);
}

.carrito-contador {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #FFD700;
  color: #2C3E50;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-menu-movil {
  display: none;
  background: none;
  border: 1px solid var(--borde);
  color: var(--texto-principal);
  padding: 6px 14px;
  border-radius: var(--radio-sm);
  font-size: 13px;
  font-weight: 600;
}

/* ===== Hero ===== */
/* Comic jugueteria: copy a la izquierda + foto rotativa a la derecha */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 40px;
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
  background: var(--fondo);
  border-bottom: var(--borde-ancho) solid var(--borde);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
}

.hero-copy .subtitulo-hero {
  text-align: left;
  margin: 0;
}

.hero-botones {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.hero-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: var(--radio-sm);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  border: var(--borde-ancho) solid var(--texto-principal);
}

.hero-btn-primario {
  background: var(--acento);
  color: var(--fondo);
  box-shadow: var(--sombra);
}

.hero-btn-secundario {
  background: var(--superficie);
  color: var(--texto-principal);
  box-shadow: var(--sombra);
}

.hero-btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--texto-principal);
}

/* Recuadro de foto rotativa */
.hero-foto-rotativa {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: var(--superficie-foto);
  border: var(--borde-ancho) solid var(--texto-principal);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-hover);
  overflow: hidden;
}

.hero-foto-rotativa img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-foto-rotativa img.activa {
  opacity: 1;
}

.hero-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}

.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--borde);
  opacity: 0.35;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hero-dot.activo {
  background: var(--acento);
  opacity: 1;
  width: 22px;
  border-radius: 5px;
}

.hero-foto-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 340px;
  /* Por encima de los mockups decorativos, igual que .hero-neon-contenido */
  position: relative;
  z-index: 2;
}

/* Tira de fotos adicionales debajo del hero */
.tira-fotos {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 24px 40px 32px;
  background: var(--fondo);
  border-bottom: var(--borde-ancho) solid var(--borde);
}

.tira-fotos img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  padding: 10px;
  background: var(--superficie-foto);
  border: 3px solid var(--texto-principal);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  flex-shrink: 0;
}

/* Imagen del niño (legado, ya no se usa en el hero nuevo) */
.hero-img-nino {
  width: 55%;
  max-width: 520px;
  min-width: 280px;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  z-index: 2;
  margin-top: 8px;
}

/* Ocultar imágenes flotantes antiguas (robot/obni) */
.hero-lado { display: none; }

/* ===== Confianza bar ===== */
.confianza {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 40px;
  padding: 20px 24px;
  max-width: 1200px;
  margin: 0 auto;
  border-top: 2px solid var(--borde);
}

.confianza-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-secundario);
}

.confianza-item .punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-rojo);
  flex-shrink: 0;
}

.confianza-item:nth-child(2) .punto { background: var(--color-azul); }
.confianza-item:nth-child(3) .punto { background: var(--color-amarillo); }
.confianza-item:nth-child(4) .punto { background: var(--color-verde); }

.hero-inner { max-width: 100%; margin: 0; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; }

.hero .eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--acento);
  margin-bottom: 4px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4.5vw, 50px);
  line-height: 1.08;
  font-weight: 800;
  color: var(--texto-principal);
  margin-bottom: 4px;
  text-transform: none;
  letter-spacing: normal;
}

/* Letras alternadas en el título principal - JS puede añadir las clases */
.hero h1 .letra-1 { color: var(--color-rojo); }
.hero h1 .letra-2 { color: var(--color-azul); }
.hero h1 .letra-3 { color: var(--color-amarillo); }
.hero h1 .letra-4 { color: var(--color-rojo); }
.hero h1 .letra-5 { color: var(--color-azul); }
.hero h1 .letra-6 { color: var(--color-amarillo); }
.hero h1 .letra-7 { color: var(--color-rojo); }
.hero h1 .letra-8 { color: var(--color-azul); }
.hero h1 .letra-9 { color: var(--color-amarillo); }
.hero h1 .letra-10 { color: var(--color-rojo); }
.hero h1 .letra-11 { color: var(--color-azul); }
.hero h1 .letra-12 { color: var(--color-amarillo); }
.hero h1 .letra-13 { color: var(--color-rojo); }

.hero .resalta {
  color: var(--acento-2);
  font-weight: 700;
}

.hero .subtitulo-hero {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--texto-secundario);
  max-width: 480px;
  margin: 0;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.hero p {
  display: none; /* ocultar párrafo original, usar .subtitulo-hero */
}



@media (max-width: 1024px) {
  .grid-productos {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero { padding: 32px 24px; gap: 28px; }
  .hero-img-nino { width: 65%; }
}

@media (max-width: 768px) {
  .grid-productos {
    grid-template-columns: 1fr;
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 24px 20px;
    gap: 20px;
  }
  .hero-copy { align-items: center; text-align: center; }
  .hero-copy .subtitulo-hero { text-align: center; margin: 0 auto; }
  .hero-botones { justify-content: center; }
  .hero-foto-rotativa { max-width: 300px; }
  .hero h1 { font-size: clamp(24px, 6vw, 34px); }
  .hero .subtitulo-hero { font-size: 14px; }
  .hero .eyebrow { font-size: 12px; }
  .tira-fotos { padding: 16px 20px 24px; }
  .header-inner { padding: 0 20px; gap: 16px; }
  .header-logo { font-size: clamp(22px, 5vw, 32px); }
  .header-busqueda { max-width: 100%; margin: 12px 0 0 0; }
  .contenedor { padding: 0 16px; }
  .grid-productos { gap: 16px; }
  .card-producto { padding-bottom: 20px; }
}

@media (max-width: 480px) {
  .hero-foto-rotativa { max-width: 240px; }
  .header-logo { font-size: 20px; }
}

/* ===== Page hero (sub-pages) ===== */
.page-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 32px 24px;
  position: relative;
  background: var(--fondo);
  border-bottom: 2px solid var(--borde);
}

.page-hero .hero-lado { display: none; }

.page-hero .page-hero-inner {
  text-align: center;
}

.page-hero-inner h1 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  color: var(--texto-principal);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.page-hero-inner p {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--texto-secundario);
  margin: 0;
}

@media (max-width: 768px) {
  .page-hero { gap: 12px; padding: 24px 12px; }
}

/* ===== Titulo seccion ===== */
.titulo-seccion {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.linea {
  display: none;
}

.fila-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.resultados-contador {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--texto-muted);
}

/* ===== Titulo seccion ===== */
.titulo-seccion {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--texto-principal);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 24px;
  padding-bottom: 8px;
  border-bottom: var(--borde-ancho) solid var(--acento);
  display: inline-block;
}

/* ===== Categorias: mosaico de tiles ===== */
.grid-categorias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
  margin-bottom: 48px;
}

.cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 12px;
  border-radius: var(--radio-sm);
  border: 3px solid transparent;
  background: var(--negro-categoria);
  color: var(--texto-blanco);
  font-family: var(--font-body);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  box-shadow: var(--sombra-sm);
}

.cat-btn .cat-icono {
  font-size: 26px;
  line-height: 1;
}

.cat-btn .cat-nombre {
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
}

.cat-btn .cat-cantidad {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

.cat-btn:hover {
  transform: translateY(-3px);
}

.cat-btn.activo {
  border-color: var(--acento);
}

/* ===== Grid productos ===== */
.grid-productos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-bottom: 48px;
}

/* ===== Card producto ===== */
.card-producto {
  background: var(--fondo-tarjeta);
  border: var(--borde-ancho) solid var(--borde-tarjeta-1);
  border-radius: var(--radio-lg);
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
  box-shadow: var(--sombra);
}

.card-producto:nth-child(4n+1) { border-color: var(--borde-tarjeta-1); } /* Rojo */
.card-producto:nth-child(4n+2) { border-color: var(--borde-tarjeta-2); } /* Azul */
.card-producto:nth-child(4n+3) { border-color: var(--borde-tarjeta-3); } /* Amarillo */
.card-producto:nth-child(4n+4) { border-color: var(--borde-tarjeta-4); } /* Verde */

.card-producto:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
}

/* Efecto "encajar una pieza": la sombra solida se aplana al hacer clic */
#productos-grid .card-producto:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--texto-principal);
}

.card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-imagen {
  aspect-ratio: 1/1;
  background: var(--superficie-2);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Superficie de foto en caja blanca (solo catalogo publico y selector de
   variantes -- el panel admin usa .card-imagen tambien y no debe cambiar) */
#productos-grid .card-imagen,
.variante-card .card-imagen {
  background: var(--superficie-foto);
  border-bottom: var(--borde-ancho) solid var(--texto-principal);
}

.card-imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--transicion);
}

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

.imagen-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 400;
  color: var(--borde);
  opacity: 0.3;
}

.card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.card-categoria {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.card-nombre {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--texto-principal);
  text-align: center;
}

/* Badge dorado "N DISEÑOS" sobre la foto del set (tienda.js lo coloca
   dentro de .card-imagen para poder posicionarlo absoluto) */
.card-set-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--texto-principal);
  text-align: center;
}

#productos-grid .card-imagen .card-set-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--dorado);
  border: 2px solid var(--texto-principal);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 2;
}

#productos-grid .card-categoria {
  font-family: var(--font-mono);
  color: var(--acento-2);
  font-weight: 700;
}

.card-precios {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-precio {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--texto-principal);
  text-align: center;
}

.card-precio-mayor {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--texto-muted);
  text-align: center;
  margin-top: 2px;
}

.card-stock {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.card-precios {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.card-precio {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--texto-principal);
}

/* Precio mayor con forma de "price tag" colgante */
.card-precio-mayor {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  /* Letra negra: la blanca no se leia bien sobre el amarillo (pedido de Luis). */
  color: #1a1a1a;
  background: var(--dorado);
  border: 2px solid var(--texto-principal);
  border-radius: 6px;
  padding: 3px 10px;
  margin-top: 0;
  position: relative;
}

.card-precio-mayor::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--fondo-tarjeta);
  border: 2px solid var(--texto-principal);
  border-radius: 50%;
}

.card-stock {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-muted);
  margin-top: 6px;
}
.card-stock.sin-stock {
  color: var(--error);
  font-weight: 700;
}
.card-stock.stock-bajo {
  color: var(--acento);
}

.detalle-stock {
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-muted);
  margin: 8px 0 16px;
}
.detalle-stock.sin-stock {
  color: var(--error);
  font-weight: 700;
}
.detalle-stock.stock-bajo {
  color: var(--acento);
}

.btn-agregar-carrito:disabled {
  background: #aaa;
  cursor: not-allowed;
}

.admin-stock-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.admin-stock-control label {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-muted);
}
.admin-stock-input {
  width: 60px;
  padding: 4px 8px;
  border: 1px solid var(--borde, #ddd);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  text-align: center;
}
.stock-estado {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: #e8f5e9;
  color: #2e7d32;
}
.stock-estado.sin-stock {
  background: #ffebee;
  color: #c62828;
}
.stock-estado.stock-bajo {
  background: #fff3e0;
  color: #e65100;
}

.detalle-whatsapp-nota {
  font-size: 12px;
  color: #25d366;
  font-weight: 600;
  margin-top: 8px;
}

/* ===== Cargando ===== */
.cargando {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 0;
  color: var(--texto-muted);
}

.sin-productos {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 0;
  color: var(--texto-secundario);
}

/* ===== Confianza ===== */
.confianza {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  padding: 40px 24px;
  border-top: 2px solid #E0E0E0;
  border-bottom: 2px solid #E0E0E0;
  margin-top: 20px;
  background: #FFF9E6;
}

.confianza-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #2C3E50;
  font-family: var(--font-body);
}

.confianza-item .punto {
  width: 8px;
  height: 8px;
  background: var(--acento);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px rgba(255, 90, 31, 0.4);
}

/* ===== Footer ===== */
.footer {
  border-top: 2px solid var(--borde);
  padding: 32px 24px;
  text-align: center;
  margin-top: auto;
  background: var(--superficie);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 12px;
}

.footer-links a {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-secundario);
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}

.footer-links a:hover { color: var(--acento); }

.footer-copyright {
  font-size: 12px;
  color: var(--texto-muted);
}

.footer-contador-visitas {
  font-size: 11px;
  color: var(--texto-muted);
  opacity: 0.7;
  margin-top: 4px;
  font-family: var(--font-mono, monospace);
}

/* ===== Detalle producto ===== */
.volver {
  display: inline-block;
  font-size: 13px;
  color: var(--texto-secundario);
  margin: 24px 0;
  transition: color var(--transicion);
}

.volver:hover { color: var(--acento); }

.detalle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
  align-items: start;
}

.detalle-cargando {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 0;
  color: var(--texto-muted);
}

.detalle-imagen {
  background: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3/4;
}

.detalle-imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.imagen-placeholder-grande {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-size: 80px;
  font-weight: 800;
  color: var(--texto-muted);
  opacity: 0.2;
}

.detalle-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detalle-categoria {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--texto-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detalle-nombre {
  font-size: 2rem;
  line-height: 1.2;
}

.detalle-precios {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 20px;
}

.precio-label {
  font-size: 11px;
  color: var(--texto-muted);
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

.precio-valor {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--acento);
}

.precio-valor-sm {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  color: #0066CC;
}

.detalle-descripcion {
  color: var(--texto-secundario);
  line-height: 1.7;
}

.detalle-acciones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
}

.detalle-variantes {
  grid-column: 1 / -1;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--borde);
}

.detalle-variantes-titulo {
  font-family: var(--font-heading);
  font-size: 20px;
  margin-bottom: 14px;
}

.detalle-variantes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.variante-card {
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm, 8px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.variante-card .card-imagen {
  aspect-ratio: 1;
}

.variante-card .card-nombre {
  font-size: 13px;
}

/* Colores botones coinciden con bordes de tarjetas */
.card-producto:nth-child(4n+1) .btn-agregar-carrito { background: var(--btn-bg-1); color: var(--btn-txt-1); }
.card-producto:nth-child(4n+2) .btn-agregar-carrito { background: var(--btn-bg-2); color: var(--btn-txt-2); }
.card-producto:nth-child(4n+3) .btn-agregar-carrito { background: var(--btn-bg-3); color: var(--btn-txt-3); }
.card-producto:nth-child(4n+4) .btn-agregar-carrito { background: var(--btn-bg-4); color: var(--btn-txt-4); }

.btn-agregar-carrito {
  background: var(--acento);
  color: var(--fondo);
  border: 2px solid var(--texto-principal);
  border-radius: 10px;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter var(--transicion);
  width: 90%;
  margin: 10px auto 10px auto;
  box-shadow: var(--sombra-sm);
}

.btn-agregar-carrito:hover:not(.agregado) {
  transform: translateY(-2px);
  filter: brightness(0.95);
}

.btn-agregar-carrito:active:not(.agregado):not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--texto-principal);
}

.btn-agregar-carrito.agregado {
  background: var(--exito);
  cursor: default;
}

.btn-whatsapp {
  display: block;
  text-align: center;
  background: #25d366;
  color: white;
  border: none;
  border-radius: var(--radio-sm);
  padding: 14px 24px;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transicion);
}

.btn-whatsapp:hover {
  filter: brightness(0.9);
  color: white;
}

.detalle-confianza {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666666;
  padding-top: 8px;
  border-top: 1px solid #E0E0E0;
}

/* ===== Carrito ===== */
.carrito-vacio {
  text-align: center;
  padding: 60px 0;
  color: #999999;
}

.carrito-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 24px;
}

.carrito-item {
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  gap: 16px;
  align-items: center;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 12px 16px;
}

.carrito-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radio-sm);
  background: #F5F5F5;
}

.carrito-item-nombre {
  font-weight: 600;
  font-size: 14px;
}

.carrito-item-precio {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--acento);
}

.cantidad-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cantidad-control button {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: #F5F5F5;
  border: 1px solid #E0E0E0;
  color: #2C3E50;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.cantidad-control span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  min-width: 20px;
  text-align: center;
}

.carrito-item-eliminar {
  background: none;
  border: none;
  color: var(--error);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  margin: 0;
}

.carrito-footer {
  border-top: 1px solid #E0E0E0;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.carrito-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carrito-total-label {
  font-size: 16px;
  font-weight: 700;
}

.carrito-total-valor {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--acento);
}

.carrito-acciones {
  display: flex;
  gap: 12px;
}

.carrito-acciones a,
.carrito-acciones button {
  flex: 1;
}

.btn-vaciar {
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--texto-secundario);
  border-radius: var(--radio-sm);
  padding: 14px 24px;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transicion);
  flex: 1;
  margin-top: 0;
}

.btn-vaciar:hover {
  border-color: var(--error);
  color: var(--error);
}

/* ===== Admin ===== */
.form-producto {
  max-width: 500px;
  margin-bottom: 2rem;
}

/* Productos cargados colapsable */
.productos-cargados-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.25s ease;
}

.productos-cargados-header:hover {
  border-color: #E31E24;
}

.productos-cargados-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--texto-principal);
}

.productos-cargados-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--acento);
  color: #0c0c14;
  font-size: 12px;
  font-weight: 700;
  border-radius: 12px;
  font-family: 'JetBrains Mono', monospace;
}

.productos-cargados-flecha {
  margin-left: auto;
  font-size: 12px;
  color: var(--texto-muted);
  transition: transform 0.2s;
}

.productos-cargados-body {
  display: none;
  padding-top: 16px;
}

.productos-cargados-body.abierto {
  display: block;
}

/* Modal editar producto */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-contenido {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

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

.modal-header h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--texto-principal);
  margin: 0;
}

.modal-cerrar {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--texto-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  margin-top: 0;
}

.modal-cerrar:hover {
  color: var(--error);
}

label {
  display: block;
  font-size: 0.85rem;
  color: var(--texto-secundario);
  margin-top: 1rem;
  margin-bottom: 0.35rem;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="url"],
select,
textarea {
  width: 100%;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  color: var(--texto-principal);
  font-family: inherit;
  font-size: 0.95rem;
}

textarea { resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acento);
}

input[type="file"] {
  width: 100%;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 0.5rem;
  color: var(--texto-secundario);
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.nota {
  font-size: 0.75rem;
  color: var(--texto-muted);
  margin-top: 4px;
}

.preview-imagen { margin-top: 0.8rem; }
.preview-imagen img {
  max-width: 180px;
  max-height: 180px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  display: block;
}

/* TEMA-jugueteria-educativa: botones pill shape, colores primarios */
button {
  background: var(--color-rojo);
  color: var(--texto-blanco);
  border: 2px solid transparent;
  border-radius: 25px;
  padding: 0.7rem 1.5rem;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 1.5rem;
  transition: all 0.2s ease;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

button:hover:not(:disabled) {
  background: var(--color-azul);
  border-color: var(--color-azul);
  transform: translateY(-2px);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

button.eliminar {
  background: var(--error);
  color: var(--texto-blanco);
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  margin-top: 0;
}

.mensaje-error {
  color: var(--error);
  font-size: 0.85rem;
  margin-top: 0.8rem;
  min-height: 1.2rem;
}

.mensaje-exito { color: var(--exito); }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .header-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 16px;
    gap: 10px;
  }

  .header-nav {
    display: none;
    position: static;
    background: none;
    border-bottom: none;
    flex-direction: column;
    padding: 0;
    gap: 0;
    width: 100%;
    z-index: auto;
  }

  .header-nav.abierto { display: flex; }
  .header-menu-movil { display: block; }

  .header-nav a {
    padding: 10px 0;
    border-bottom: 1px solid var(--borde);
    font-size: 14px;
  }

  .header-busqueda {
    order: 0;
    max-width: 100%;
    margin: 0;
    width: 100%;
  }

  .hero { padding: 40px 16px 32px; }
  .hero h1 { font-size: 1.6rem; }

  .contenedor { padding: 0 16px; }

  .grid-productos {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .confianza { gap: 12px; flex-wrap: wrap; justify-content: center; }
  .confianza-item { font-size: 11px; }

  .detalle-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .detalle-nombre { font-size: 1.4rem; }
  .precio-valor { font-size: 1.3rem; }

  .carrito-item {
    grid-template-columns: 50px 1fr;
    gap: 10px;
  }
  .carrito-item img { width: 50px; height: 50px; }
  .carrito-item-precio { grid-column: 2; }
  .cantidad-control { grid-column: 2; }
  .carrito-item-eliminar { grid-column: 2; justify-self: start; }

  .carrito-acciones {
    flex-direction: column;
  }
  .carrito-acciones a, .carrito-acciones button {
    flex: none;
    width: 100%;
    text-align: center;
  }

  .carrito-footer {
    padding: 16px;
  }

  .carrito-total {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }

  .checkout-grid {
    gap: 16px;
  }

  .confirmacion-container {
    padding: 24px 16px;
  }

  .confirmacion-acciones {
    flex-direction: column;
  }
  .confirmacion-acciones a {
    width: 100%;
    text-align: center;
  }

  .pedido-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .pedido-item {
    flex-wrap: wrap;
  }

  .perfil-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .perfil-tabs::-webkit-scrollbar { display: none; }

  .perfil-tab {
    padding: 8px 12px;
    font-size: 12px;
  }

  .perfil-resumen {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px;
    gap: 16px;
  }

  .perfil-stats {
    gap: 16px;
    width: 100%;
    justify-content: space-around;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .direccion-radio-contenido {
    font-size: 13px;
  }

  .footer {
    padding: 24px 16px;
  }

  .footer-links {
    gap: 16px;
  }

  .admin-stock-control {
    flex-wrap: wrap;
  }

  .productos-cargados-header {
    padding: 12px 16px;
  }

  .pedido-pasos {
    font-size: 10px;
  }

  .pedido-paso-item {
    padding: 5px 2px;
  }
}

/* ===== Auth ===== */
.auth-container {
  display: flex;
  justify-content: center;
  padding: 40px 0 60px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 32px;
}

.tabs-auth {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--borde);
}

.tab-auth {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transicion);
  margin-top: 0;
}

.tab-auth:hover {
  color: #E31E24;
}

.tab-auth.activo {
  color: #E31E24;
  border-bottom-color: #E31E24;
}

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

.auth-form label {
  font-size: 13px;
  color: var(--texto-secundario);
  margin-top: 16px;
  margin-bottom: 4px;
}

.auth-form input {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  padding: 10px 14px;
  color: var(--texto-principal);
  font-size: 14px;
  transition: border-color var(--transicion);
}

.auth-form input:focus {
  outline: none;
  border-color: #E31E24;
  box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.1);
}

/* ===== Botones generales ===== */
main button {
  background: #E31E24;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

main button:hover {
  background: #0051A8;
  transform: translateY(-1px);
}

main button:active {
  transform: translateY(0);
}

.btn-cancelar {
  background: #FFFFFF !important;
  color: #666666 !important;
  border: 1px solid #CCCCCC !important;
}

.btn-cancelar:hover {
  background: #F5F5F5 !important;
  border-color: #999999 !important;
}

.btn-mas-direccion {
  background: #0051A8 !important;
  width: 100%;
  margin-top: 12px;
}

.btn-mas-direccion:hover {
  background: #003D82 !important;
}

.btn-ver-pedido, .btn-seguir-comprando {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  font-family: var(--font-body);
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-ver-pedido {
  background: #E31E24;
  color: #FFFFFF;
}

.btn-ver-pedido:hover {
  background: #0051A8;
  color: #FFFFFF;
}

.btn-seguir-comprando {
  background: #FFFFFF;
  color: #E31E24;
  border: 2px solid #E31E24;
}

.btn-seguir-comprando:hover {
  background: #E31E24;
  color: #FFFFFF;
}

.auth-form button[type="submit"] {
  margin-top: 20px;
  width: 100%;
}

/* ===== Perfil ===== */
.perfil-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-bottom: 60px;
}

.perfil-card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.perfil-subtitulo {
  font-size: 1rem;
  margin-bottom: 16px;
  color: var(--texto-principal);
}

.perfil-card .auth-form input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.perfil-card .auth-form button[type="submit"] {
  width: auto;
}

.mensaje-exito {
  color: var(--exito);
  font-size: 0.85rem;
  min-height: 1.2rem;
}

/* ===== Perfil resumen (tipo MercadoLibre) ===== */
.perfil-resumen {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 24px;
}

.perfil-avatar {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--acento);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.avatar-inicial {
  font-size: 32px;
  font-weight: 800;
  color: #0c0c14;
}

.avatar-editar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 50%;
  text-align: center;
  line-height: 1.2;
}

.perfil-avatar:hover .avatar-editar {
  opacity: 1;
}

.perfil-info-resumen {
  flex: 1;
}

.perfil-info-resumen h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--texto-principal);
  margin-bottom: 2px;
}

.perfil-email-display {
  font-size: 14px;
  color: var(--texto-secundario);
  margin-bottom: 4px;
}

.perfil-miembro {
  font-size: 12px;
  color: var(--texto-muted);
}

.perfil-stats {
  display: flex;
  gap: 28px;
  flex-shrink: 0;
}

.stat-item {
  text-align: center;
}

.stat-numero {
  display: block;
  font-size: 20px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--acento);
}

.stat-label {
  font-size: 12px;
  color: var(--texto-muted);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ===== Perfil tabs ===== */
.perfil-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--borde);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.perfil-tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transicion);
  white-space: nowrap;
  margin-top: 0;
}

.perfil-tab:hover {
  color: #E31E24;
}

.perfil-tab.activo {
  color: #E31E24;
  border-bottom-color: #E31E24;
}

.perfil-seccion {
  padding-bottom: 40px;
}

.perfil-acciones-superiores {
  margin-bottom: 16px;
  display: flex;
  justify-content: flex-end;
}

.perfil-acciones-superiores button {
  font-size: 13px;
  padding: 8px 16px;
  margin-top: 0;
}

.btn-cancelar {
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--texto-secundario);
}

.btn-cancelar:hover {
  border-color: var(--acento);
  color: var(--acento);
  box-shadow: none;
}

/* ===== Pedidos ===== */
.pedido-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borde);
}

.pedido-fecha {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--texto-secundario);
}

.pedido-estado {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  text-transform: capitalize;
}

.estado-pendiente { background: rgba(0, 102, 204, 0.12); color: #0066CC; }
.estado-completado { background: rgba(0, 166, 81, 0.12); color: #00A651; }
.estado-enviado { background: rgba(255, 107, 53, 0.12); color: #FF6B35; }
.estado-cancelado { background: rgba(227, 30, 36, 0.12); color: #E31E24; }

.pedido-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pedido-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pedido-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--superficie-2);
}

.pedido-item-nombre {
  font-size: 14px;
  font-weight: 600;
}

.pedido-item-cant {
  font-size: 12px;
  color: var(--texto-muted);
  margin-left: 4px;
}

.pedido-item-precio {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--acento);
}

.pedido-total {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--borde);
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--acento);
}

.pedido-id-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-principal);
  margin-right: 10px;
}

.pedido-direccion-info {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--superficie-2);
  border-radius: 6px;
  font-size: 12px;
  color: var(--texto-secundario);
}

.pedido-direccion-label {
  font-weight: 600;
  color: var(--texto-principal);
  margin-right: 4px;
}

.pedido-pasos {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  border-radius: 8px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
}

.pedido-paso-item {
  flex: 1;
  text-align: center;
  padding: 6px 4px;
  background: var(--superficie-2);
  color: var(--texto-muted);
  position: relative;
}

.pedido-paso-item.activo {
  background: var(--acento);
  color: var(--fondo);
}

.pedido-paso-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 6px solid var(--superficie-2);
  z-index: 1;
}

.pedido-paso-item.activo:not(:last-child)::after {
  border-left-color: var(--acento);
}

.pedido-pasos.cancelado {
  display: block;
}

.cancelado-estado {
  background: rgba(233, 78, 78, 0.15);
  color: var(--error);
  text-align: center;
  padding: 8px;
  border-radius: 8px;
}

/* ===== Direcciones ===== */
.direccion-card {
  position: relative;
}

.badge-direccion {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--acento);
  color: var(--fondo);
  padding: 2px 8px;
  border-radius: 10px;
}

.direccion-acciones {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--borde);
}

.direccion-acciones button {
  font-size: 12px;
  padding: 4px 10px;
  margin-top: 0;
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--texto-secundario);
}

.direccion-acciones button:hover {
  border-color: var(--acento);
  color: var(--acento);
  box-shadow: none;
}

.direccion-acciones .btn-eliminar-dir:hover {
  border-color: var(--error);
  color: var(--error);
}

/* ===== Checkout ===== */
.checkout-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 60px;
}

/* Pantalla de decision del checkout (iniciar sesion vs invitado) */
.checkout-decision-opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.checkout-decision-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: rgba(0, 229, 255, 0.04);
}

.checkout-decision-card strong {
  font-size: 16px;
  color: var(--texto-principal);
}

.checkout-decision-card p {
  font-size: 13px;
  color: var(--texto-secundario);
  flex: 1;
  margin: 0;
}

.checkout-decision-card .btn-confirmar {
  margin-top: 4px;
}

@media (max-width: 700px) {
  .checkout-decision-opciones { grid-template-columns: 1fr; }
}

.checkout-paso {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.checkout-paso-titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  margin-bottom: 16px;
}

.paso-numero {
  width: 28px;
  height: 28px;
  background: var(--grad-1);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.direccion-radio {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color var(--transicion);
}

.direccion-radio:hover {
  border-color: var(--acento);
}

.direccion-radio:has(input:checked) {
  border-color: var(--acento);
  background: rgba(0, 229, 255, 0.1);
}

.direccion-radio input[type="radio"] {
  margin-top: 4px;
  accent-color: var(--acento);
}

.direccion-radio-contenido strong {
  display: block;
  margin-bottom: 4px;
}

.direccion-radio-contenido p {
  font-size: 13px;
  color: var(--texto-secundario);
  margin: 0;
}

.btn-mas-direccion {
  background: none;
  border: 1px dashed var(--borde);
  color: var(--texto-secundario);
  padding: 10px;
  width: 100%;
  font-size: 13px;
  margin-top: 8px;
  transition: all var(--transicion);
}

.btn-mas-direccion:hover {
  border-color: var(--acento);
  color: var(--acento);
  box-shadow: none;
}

.checkout-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkout-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.checkout-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--superficie-2);
}

.checkout-item-nombre {
  font-size: 14px;
  font-weight: 600;
}

.checkout-item-cant {
  font-size: 12px;
  color: var(--texto-muted);
  margin-left: 4px;
}

.checkout-item-precio {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--acento);
}

.checkout-subtotal, .checkout-envio {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
  color: var(--texto-secundario);
}

.envio-gratis {
  color: var(--exito);
  font-weight: 600;
}

/* ===== Envio checkout ===== */
.envio-gratis-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radio-sm);
}

.envio-gratis-icono {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--exito);
  color: var(--fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.envio-gratis-banner strong {
  display: block;
  font-size: 15px;
  color: var(--exito);
}

.envio-gratis-banner p {
  font-size: 13px;
  color: var(--texto-secundario);
  margin-top: 2px;
}

.envio-destino {
  padding: 10px 14px;
  background: var(--superficie-2);
  border-radius: var(--radio-sm);
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--texto-secundario);
}

.envio-destino-label {
  font-weight: 600;
  color: var(--texto-principal);
  margin-right: 4px;
}

.envio-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.envio-radio {
  display: block;
  cursor: pointer;
}

.envio-radio input {
  display: none;
}

.envio-radio-contenido {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border: 2px solid var(--borde);
  border-radius: var(--radio-sm);
  transition: border-color 0.2s;
}

.envio-radio input:checked + .envio-radio-contenido {
  border-color: var(--acento);
}

.envio-radio-info strong {
  display: block;
  font-size: 14px;
  color: var(--texto-principal);
}

.envio-plazo {
  font-size: 12px;
  color: var(--texto-muted);
}

.envio-costo {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--acento);
}

.envio-nota {
  margin-top: 10px;
  font-size: 12px;
  color: var(--texto-muted);
  font-style: italic;
}

.envio-casi-gratis {
  padding: 10px;
  background: rgba(0, 102, 204, 0.08);
  border-radius: var(--radio-sm);
  font-size: 12px;
  color: #0066CC;
  text-align: center;
  margin-top: 6px;
}
.envio-progress-bar {
  height: 6px;
  background: var(--borde);
  border-radius: 3px;
  margin-bottom: 6px;
  overflow: hidden;
}
.envio-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-rojo), var(--color-amarillo), var(--color-verde));
  border-radius: 3px;
  transition: width 0.3s ease;
}
.checkout-plazo {
  font-size: 12px;
  color: var(--texto-muted);
  text-align: right;
  margin-top: 2px;
}

.checkout-notas {
  margin-bottom: 16px;
}

.checkout-notas label {
  display: block;
  font-size: 13px;
  color: var(--texto-secundario);
  margin-bottom: 4px;
}

.checkout-notas textarea {
  width: 100%;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  padding: 8px 12px;
  color: var(--texto-principal);
  font-size: 13px;
  resize: vertical;
}

.checkout-total-final {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--borde);
  margin-bottom: 16px;
}

.checkout-total-final span:first-child {
  font-size: 16px;
  font-weight: 700;
}

.checkout-total-valor {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--acento);
}

.btn-confirmar {
  display: block;
  width: 100%;
  text-align: center;
  background: #E31E24;
  color: #FFFFFF;
  border: 2px solid transparent;
  border-radius: var(--radio-sm);
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transicion);
  text-decoration: none;
  margin-top: 0;
}

.btn-confirmar:hover {
  background: #0066CC;
  color: #FFFFFF;
}

/* ===== Pedido confirmado ===== */
.confirmacion-container {
  text-align: center;
  padding: 40px 0 60px;
  max-width: 500px;
  margin: 0 auto;
}

.confirmacion-icono {
  margin-bottom: 16px;
}

.checkmark-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--exito);
  color: var(--fondo);
  border-radius: 50%;
  font-size: 24px;
  font-weight: 800;
}

.confirmacion-titulo {
  font-size: 1.6rem;
  margin-bottom: 8px;
}

.confirmacion-texto {
  color: var(--texto-secundario);
  margin-bottom: 24px;
}

.confirmacion-info {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
  margin-bottom: 16px;
  text-align: left;
}

.confirmacion-dato {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--borde);
}

.confirmacion-dato:last-child {
  border-bottom: none;
}

.confirmacion-label {
  font-size: 13px;
  color: var(--texto-muted);
}

.confirmacion-valor {
  font-size: 14px;
  font-weight: 600;
}

.confirmacion-items {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  margin-bottom: 16px;
  text-align: left;
}

.confirmacion-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.confirmacion-total span:first-child {
  font-size: 16px;
  font-weight: 700;
}

.confirmacion-total-valor {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--acento);
}

.confirmacion-acciones {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  justify-content: center;
}

.btn-ver-pedido, .btn-seguir-comprando {
  padding: 12px 24px;
  border-radius: var(--radio-sm);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transicion);
}

.btn-ver-pedido {
  background: var(--acento);
  color: var(--fondo);
}

.btn-seguir-comprando {
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--texto-secundario);
}

.btn-seguir-comprando:hover {
  border-color: var(--acento);
  color: var(--fondo);
}

/* ===== Gestion de pedidos - Admin ===== */
.busqueda-usuario {
  display: flex;
  gap: 10px;
}

.busqueda-usuario input {
  flex: 1;
  padding: 10px 14px;
  font-size: 14px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--texto-principal);
  font-family: inherit;
}

.busqueda-usuario input:focus {
  outline: none;
  border-color: #E31E24;
}

.busqueda-usuario button {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 0;
}

#busqueda-resultados {
  margin-top: 12px;
}

.usuario-compra-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color var(--transicion);
}

.usuario-compra-item:hover {
  border-color: var(--acento);
}

.usuario-compra-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.usuario-compra-info strong {
  font-size: 14px;
  color: var(--texto-principal);
}

.usuario-compra-email {
  font-size: 12px;
  color: var(--texto-secundario);
}

.usuario-compra-rut {
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--texto-muted);
}

.usuario-compra-flecha {
  font-size: 16px;
  color: var(--texto-muted);
}

.panel-usuario-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.panel-usuario-header .btn-cancelar {
  font-size: 12px;
  padding: 6px 12px;
}

.panel-usuario-stats {
  display: flex;
  gap: 28px;
  margin-top: 16px;
}

.pedido-estado-select {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  color: var(--texto-principal);
  cursor: pointer;
  font-family: inherit;
  width: auto;
  margin-top: 0;
}

.pedido-direccion {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--borde);
  font-size: 13px;
  color: var(--texto-secundario);
}

.pedido-direccion strong {
  color: var(--texto-principal);
}

/* ===== Alertas RUT duplicados ===== */
.alerta-badge {
  background: var(--error) !important;
}

.btn-resolver-dup {
  background: var(--acento);
  color: var(--fondo);
  padding: 6px 14px;
  border-radius: var(--radio-sm);
  font-weight: 700;
  font-size: 13px;
}

.btn-resolver-dup:hover {
  opacity: 0.85;
}

.dup-usuario-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 13px;
  flex-wrap: wrap;
}

.dup-usuario-item:last-child {
  border-bottom: none;
}

.dup-accion {
  margin-top: 16px;
}

.dup-accion select,
.dup-accion input[type="text"] {
  width: 100%;
}

.dup-accion p {
  margin-bottom: 6px;
  font-weight: 600;
}

.btn-eliminar-dup-usuario {
  background: var(--error);
  color: #fff;
  padding: 6px 12px;
  border-radius: var(--radio-sm);
  font-weight: 600;
  font-size: 12px;
}

.btn-eliminar-dup-usuario:hover {
  opacity: 0.85;
}

.dup-acciones-finales {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
}

#btn-activar-ambos {
  background: var(--exito);
  color: var(--fondo);
  padding: 8px 16px;
  border-radius: var(--radio-sm);
  font-weight: 700;
  font-size: 13px;
  width: 100%;
}

#btn-activar-ambos:hover {
  opacity: 0.85;
}

.modal-body {
  padding: 20px;
}

.modal-info {
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--error);
}

/* ===== Pedidos admin con usuario ===== */
.pedido-admin-card {
  border-left: 3px solid var(--acento);
}

.pedido-admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borde);
}

.pedido-admin-header div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pedido-estado-fila {
  display: flex;
  gap: 6px;
  align-items: center;
}

.btn-guardar-estado {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radio-sm);
  background: var(--acento);
  color: var(--fondo);
  border: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.btn-guardar-estado:hover {
  opacity: 0.85;
}

.btn-guardar-estado:disabled {
  opacity: 0.6;
  cursor: default;
}

.pedido-admin-usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--superficie-2);
  border-radius: var(--radio-sm);
}

.pedido-usuario-icono {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.pedido-admin-usuario strong {
  display: block;
  font-size: 13px;
  color: var(--texto-principal);
}

.pedido-usuario-email {
  font-size: 12px;
  color: var(--texto-secundario);
  display: block;
}

.pedido-usuario-rut {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--texto-muted);
  display: block;
}

.pedido-admin-items {
  margin-bottom: 8px;
}

.pedido-notas-info {
  font-size: 12px;
  color: var(--texto-secundario);
  font-style: italic;
  margin-top: 4px;
}

.pedido-nota-admin {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--borde);
}

.pedido-nota-admin label {
  display: block;
  font-size: 12px;
  color: var(--texto-secundario);
  margin-bottom: 4px;
}

.pedido-nota-admin-input {
  width: 100%;
  resize: vertical;
  font-family: var(--font-body);
  margin-bottom: 6px;
}

.pedido-nota-admin .btn-guardar-nota-admin {
  font-size: 12px;
  padding: 6px 12px;
}

.pedido-detalle-envio {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12px;
  color: var(--texto-secundario);
  border-top: 1px dashed var(--borde);
  margin-top: 4px;
}

.pedido-total-admin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--borde);
  font-size: 13px;
  color: var(--texto-secundario);
}

.pedido-total-admin .pedido-total {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  font-size: 14px;
}

/* ===== Numero de seguimiento (envio manual) ===== */
.pedido-tracking {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 4px;
  font-size: 13px;
  flex-wrap: wrap;
}

.tracking-label {
  font-weight: 600;
  color: var(--texto-secundario);
}

.tracking-numero {
  font-family: 'JetBrains Mono', monospace;
  color: var(--acento);
  font-weight: 600;
}

.pedido-tracking-cliente {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-top: 8px;
  background: var(--superficie-2);
  border-radius: 6px;
  font-size: 13px;
  flex-wrap: wrap;
}

.envio-cargando {
  padding: 16px;
  text-align: center;
  color: var(--texto-secundario);
  font-size: 14px;
}

.envio-sin-cobertura {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #856404;
}

.envio-sin-cobertura strong {
  display: block;
  margin-bottom: 4px;
}

.envio-sin-cobertura p {
  margin: 0;
  color: #856404;
}

.envio-fallback {
  padding: 8px 0;
}

.envio-fallback p {
  font-size: 13px;
  color: var(--texto-secundario);
  margin-bottom: 8px;
}

.pago-resultado {
  max-width: 500px;
  margin: 60px auto;
  text-align: center;
  padding: 40px 24px;
  background: var(--superficie-1);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.pago-resultado-icono {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 14px 24px;
  border-radius: 8px;
  display: inline-block;
  margin-bottom: 20px;
}

.pago-exito {
  background: #d4edda;
  color: #155724;
}

.pago-error {
  background: #f8d7da;
  color: #721c24;
}

.pago-resultado h1 {
  font-size: 22px;
  margin-bottom: 8px;
  color: var(--texto-principal);
}

.pago-resultado > p {
  color: var(--texto-secundario);
  margin-bottom: 24px;
}

.pago-resultado-detalles {
  background: var(--superficie-2);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.pago-detalle {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 14px;
}

.pago-detalle:last-child {
  border-bottom: none;
}

.pago-detalle span:first-child {
  color: var(--texto-secundario);
}

.pago-detalle span:last-child {
  font-weight: 600;
  color: var(--texto-principal);
}

.pago-token {
  font-family: monospace;
  font-size: 12px !important;
}

.pago-resultado-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.pago-resultado-actions .btn-primary {
  padding: 12px 24px;
  background: var(--acento-1);
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.pago-resultado-actions .btn-secondary {
  padding: 12px 24px;
  background: transparent;
  color: var(--acento-1);
  border: 2px solid var(--acento-1);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.pago-estado-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-envio-revision {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  background: #f8d7da;
  color: #721c24;
  margin-left: 6px;
}

.pedido-envio-alerta {
  border: 2px solid #E31E24;
  background: rgba(227, 30, 36, 0.12);
}

.motivo-envio-pendiente {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff3cd;
  color: #856404;
  font-size: 13px;
}

.resumen-envio-revision {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #f8d7da;
  color: #721c24;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 14px;
}

.resumen-envio-revision .btn-secondary {
  margin-left: auto;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #721c24;
  background: #fff;
  color: #721c24;
  font-weight: 700;
  cursor: pointer;
}

.pago-estado-pendiente {
  background: #fff3cd;
  color: #856404;
}

.pago-estado-aprobado {
  background: #d4edda;
  color: #155724;
}

.pago-estado-rechazado {
  background: #f8d7da;
  color: #721c24;
}

.pago-estado-cancelado {
  background: #e2e3e5;
  color: #383d41;
}

/* ===== Admin Tabs ===== */
.admin-tabs {
  display: flex;
  gap: 4px;
  margin: 20px 0;
  border-bottom: 2px solid var(--borde);
  overflow-x: auto;
}

.admin-tab {
  padding: 10px 20px;
  background: none;
  border: none;
  color: var(--texto-secundario);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transicion);
  white-space: nowrap;
}

.admin-tab:hover {
  color: var(--texto-principal);
}

.admin-tab.activo {
  color: var(--acento);
  border-bottom-color: var(--acento);
}

.admin-tab-content {
  display: none;
}

.admin-tab-content.activo {
  display: block;
}

/* Dashboard */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.dashboard-card {
  background: var(--superficie-2);
  border-radius: var(--radio);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dashboard-card.alerta-bg {
  border: 1px solid var(--error);
}

.dashboard-numero {
  font-size: 32px;
  font-weight: 800;
  color: var(--texto-principal);
  line-height: 1;
}

.dashboard-label {
  font-size: 13px;
  color: var(--texto-secundario);
}

.dashboard-ultimos {
  background: var(--superficie-2);
  border-radius: var(--radio);
  padding: 20px;
}

.dashboard-ultimos h3 {
  font-size: 16px;
  margin-bottom: 12px;
}

.dash-pedido-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 14px;
}

.dash-pedido-item:last-child {
  border-bottom: none;
}

.dash-fecha {
  color: var(--texto-secundario);
  font-size: 13px;
}

.productos-actions-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
}

.productos-actions-bar .btn-primary {
  padding: 10px 20px;
  background: var(--acento);
  color: var(--fondo);
  border: none;
  border-radius: var(--radio-sm);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.input-buscar {
  flex: 1;
  padding: 10px 14px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  color: var(--texto-principal);
  font-size: 14px;
  min-width: 200px;
}

.admin-form-card {
  background: var(--superficie-2);
  border-radius: var(--radio);
  padding: 20px;
  margin-bottom: 20px;
}

.admin-form-card h3 {
  font-size: 16px;
  margin-bottom: 12px;
}

.admin-section-card {
  background: var(--superficie-2);
  border-radius: var(--radio);
  padding: 20px;
  margin-bottom: 20px;
}

.admin-section-card h3 {
  font-size: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dims-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dims-row input {
  flex: 1;
  min-width: 100px;
  padding: 10px 12px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  color: var(--texto-principal);
}

.pedidos-filtros {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.form-categoria-nueva {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.form-categoria-nueva input {
  flex: 1;
  min-width: 180px;
  padding: 10px 12px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  color: var(--texto-principal);
}

.categoria-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
}

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

.categoria-nombre-input {
  flex: 1;
  min-width: 140px;
  padding: 8px 12px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  color: var(--texto-principal);
}

.categoria-conteo {
  font-size: 12px;
  color: var(--texto-muted);
  white-space: nowrap;
}

.btn-guardar-categoria, .btn-eliminar-categoria {
  padding: 6px 12px;
  border-radius: var(--radio-sm);
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.btn-guardar-categoria { background: #0066CC; color: #FFFFFF; }
.btn-eliminar-categoria { background: #ef4444; color: #FFFFFF; }
.btn-eliminar-categoria:disabled { background: #ccc; cursor: not-allowed; }

@media (max-width: 600px) {
  .pedidos-filtros select,
  .pedidos-filtros input {
    flex: 1 1 100%;
  }
  .categoria-row {
    flex-direction: column;
    align-items: stretch;
  }
}

.pedidos-filtros select {
  padding: 8px 12px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  color: var(--texto-principal);
  font-size: 13px;
}

.btn-eliminar, .btn-editar, .btn-reactivar {
  padding: 6px 12px;
  border-radius: var(--radio-sm);
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.btn-eliminar { background: #ef4444; color: white; }
.btn-editar { background: #0066CC; color: #FFFFFF; }
.btn-reactivar { background: #22c55e; color: #FFFFFF; }

.btn-eliminar-dup {
  display: block;
  width: 100%;
  padding: 8px 12px;
  margin-top: 6px;
  background: var(--error);
  color: white;
  border: none;
  border-radius: var(--radio-sm);
  cursor: pointer;
  font-size: 13px;
}

.card-producto .card-acciones {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.resultado-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borde);
  cursor: pointer;
  transition: background var(--transicion);
}

.resultado-item:hover {
  background: var(--superficie);
  margin: 0 -12px;
  padding: 10px 12px;
  border-radius: var(--radio-sm);
}

.resultado-item div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
}

.resultado-item div span {
  color: var(--texto-muted);
  font-size: 12px;
}

@media (max-width: 768px) {
  .busqueda-usuario {
    flex-direction: column;
  }

  .panel-usuario-stats {
    gap: 16px;
  }

  .panel-usuario-header {
    flex-direction: column;
    gap: 10px;
  }

  .pedido-admin-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .pedido-estado-fila {
    width: 100%;
  }

  .pedido-estado-fila select {
    flex: 1;
  }
}

/* ===== Admin Sidebar Layout ===== */
.admin-layout {
  display: flex;
  gap: 0;
  min-height: calc(100vh - 60px);
}

.admin-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #FFFFFF;
  border-right: 1px solid #E0E0E0;
  display: flex;
  flex-direction: column;
  padding: 0;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

.admin-sidebar-header {
  padding: 20px 16px 16px;
  border-bottom: 1px solid #E0E0E0;
}

.admin-sidebar-logo {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  color: #E31E24;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-sidebar-rol {
  font-size: 11px;
  color: #999999;
  font-family: var(--font-mono);
  margin-top: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-sidebar-nav {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-sidebar-nav .admin-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: none;
  border: none;
  border-radius: 12px;
  color: #666666;
  font-weight: 600;
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  width: 100%;
  text-align: left;
  margin: 0;
  border-bottom: none;
}

.admin-sidebar-nav .admin-tab:hover {
  background: #F5F5F5;
  color: #E31E24;
}

.admin-sidebar-nav .admin-tab.activo {
  background: #E31E24;
  color: #FFFFFF;
}

.admin-tab-icono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  opacity: 0.6;
  width: 20px;
  text-align: center;
}

.admin-sidebar-nav .admin-tab.activo .admin-tab-icono {
  opacity: 1;
}

.admin-sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--borde);
}

.admin-sidebar-link {
  font-size: 12px;
  color: var(--texto-muted);
  text-decoration: none;
  transition: color var(--transicion);
}

.admin-sidebar-link:hover {
  color: #E31E24;
}

.admin-main {
  flex: 1;
  padding: 24px;
  min-width: 0;
  overflow-x: auto;
}

/* Dashboard cards neon */
.dashboard-card {
  background: #FFFFFF;
  border: 2px solid #E0E0E0;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.dashboard-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #E31E24;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.dashboard-card:hover {
  border-color: #E31E24;
  box-shadow: 0 8px 20px rgba(227, 30, 36, 0.15);
  transform: translateY(-4px);
}

.dashboard-card:hover::after {
  opacity: 1;
}

.dashboard-card.alerta-bg {
  border-color: #ef4444;
}

.dashboard-card.alerta-bg::after {
  background: #ef4444;
  opacity: 1;
}

.dashboard-numero {
  font-size: 32px;
  font-weight: 800;
  color: var(--texto-principal);
  line-height: 1;
  font-family: 'JetBrains Mono', monospace;
}

.dashboard-label {
  font-size: 13px;
  color: var(--texto-secundario);
}

.dashboard-ultimos {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
}

/* Admin form cards */
.admin-form-card,
.admin-section-card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
  margin-bottom: 20px;
}

/* Admin product action bar */
.productos-actions-bar .btn-primary {
  background: #E31E24;
  color: #FFFFFF;
  border: none;
  border-radius: var(--radio-sm);
  padding: 10px 20px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.productos-actions-bar .btn-primary:hover {
  background: #0051A8;
}

.input-buscar {
  flex: 1;
  padding: 10px 14px;
  background: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  color: #2C3E50;
  font-size: 14px;
  min-width: 200px;
}

.input-buscar:focus {
  outline: none;
  border-color: #E31E24;
}

/* Pedidos filtros */
.pedidos-filtros select {
  padding: 8px 12px;
  background: #F5F5F5;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  color: #2C3E50;
  font-size: 13px;
}

.pedidos-filtros select:focus {
  outline: none;
  border-color: #E31E24;
}

/* Admin responsive */
@media (max-width: 900px) {
  .admin-layout {
    flex-direction: column;
  }
  .admin-sidebar {
    width: 100%;
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--borde);
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    top: 0;
  }
  .admin-sidebar-header,
  .admin-sidebar-footer {
    display: none;
  }
  .admin-sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 6px 12px;
    gap: 4px;
  }
  .admin-sidebar-nav .admin-tab {
    padding: 8px 12px;
    white-space: nowrap;
    font-size: 12px;
    width: auto;
  }
  .admin-tab-icono {
    display: none;
  }
  .admin-main {
    padding: 16px;
  }
}

@media (max-width: 600px) {
  .admin-main {
    padding: 12px;
  }
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .productos-actions-bar {
    flex-direction: column;
  }
  .input-buscar {
    min-width: auto;
  }
}

/* Precios en cards */
.card-precio-actual {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-rojo);
}

.card-precio-anterior {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--texto-muted);
  text-decoration: line-through;
}

/* Selects general */
select {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  color: var(--texto-principal);
  font-size: 13px;
  padding: 8px 12px;
}

select:focus {
  outline: none;
  border-color: var(--color-azul);
}

/* Detalle producto precio */
.detalle-precio-actual {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-rojo);
}

.detalle-precio-anterior {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--texto-muted);
  text-decoration: line-through;
}

.detalle-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detalle-badge-oferta {
  background: rgba(255, 184, 28, 0.15);
  color: var(--color-amarillo);
}

.detalle-badge-sin-stock {
  background: rgba(227, 30, 36, 0.15);
  color: var(--error);
}

/* ===== Payment Spinner ===== */
.pago-spinner {
  text-align: center;
  padding: 60px 0;
}

.spinner-circle {
  width: 48px;
  height: 48px;
  border: 3px solid var(--borde);
  border-top-color: var(--acento-2);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 24px;
}

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

.pago-spinner h1 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.pago-spinner p {
  color: var(--texto-secundario);
  font-size: 14px;
}

/* Pago estado badges */
.pago-estado-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pago-estado-aprobado,
.pago-estado-badge.aprobado {
  background: rgba(34, 197, 94, 0.15);
  color: var(--exito);
}

.pago-estado-rechazado,
.pago-estado-badge.rechazado {
  background: rgba(233, 78, 78, 0.15);
  color: var(--error);
}

.pago-estado-pendiente,
.pago-estado-badge.pendiente {
  background: rgba(0, 102, 204, 0.1);
  color: #0066CC;
}

/* Retry payment button */
.btn-reintentar-pago,
.btn-reintentar-pago-admin {
  display: inline-block;
  padding: 8px 16px;
  background: #E31E24;
  color: #FFFFFF;
  border: none;
  border-radius: var(--radio-sm);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
}

.btn-reintentar-pago:hover,
.btn-reintentar-pago-admin:hover {
  background: #0066CC;
}

.btn-reintentar-pago:disabled,
.btn-reintentar-pago-admin:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Pedido pago info block */
.pedido-pago-rechazado,
.pedido-pago-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  margin-bottom: 8px;
}

.pedido-pago-rechazado {
  background: rgba(227, 30, 36, 0.06);
  border-radius: var(--radio-sm);
  padding: 8px 12px;
}

.pago-icono-wrap {
  margin-bottom: 16px;
}

.pago-icono-wrap .checkmark-circle {
  width: 64px;
  height: 64px;
  font-size: 24px;
}

/* Admin retry button in card */
.pedido-admin-card .btn-reintentar-pago-admin {
  margin-top: 8px;
  width: 100%;
}

/* ==========================================================
   TEMA: cyberpunk (activar con <body class="tema-cyberpunk">)
   ========================================================== */
body.tema-cyberpunk {
  --fondo: #1a0b2e;
  --superficie: #160b28;
  --superficie-2: #0d0520;
  --acento: #e91e63;
  --acento-2: #00ffff;
  --borde: #2a1a4a;
  --texto-principal: #ffffff;
  --texto-secundario: rgba(255, 255, 255, 0.8);
  --texto-muted: #6b5b8a;
  --grad-1: linear-gradient(135deg, #00ffff, #0080ff);
  --grad-2: linear-gradient(135deg, #ff00ff, #e91e63);
  --grad-card: linear-gradient(135deg, rgba(0, 255, 255, 0.08), rgba(255, 0, 255, 0.04));
  --neon-cyan: #00ffff;
  --neon-magenta: #ff00ff;
  --neon-pink: #e91e63;
  --font-heading: 'Orbitron', 'Nunito', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body.tema-cyberpunk .hero {
  height: 70vh;
  min-height: 500px;
  background: radial-gradient(ellipse at center, #1a0b2e 0%, #000000 100%);
}

body.tema-cyberpunk .hero::before {
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 40% 8%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 55% 60%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 70% 25%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 85% 50%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 15% 75%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 90% 70%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 50% 35%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 65% 85%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 5% 50%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 45% 90%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 80% 10%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 20% 55%, rgba(255,255,255,0.6), transparent);
}

body.tema-cyberpunk .hero-lado { display: flex; position: absolute; z-index: 1; }
body.tema-cyberpunk .hero-izquierda { left: 8%; top: 25%; width: 280px; }
body.tema-cyberpunk .hero-derecha { right: 12%; top: 18%; width: 200px; }
body.tema-cyberpunk .hero-img-flotante {
  filter: drop-shadow(0 0 30px rgba(255, 0, 255, 0.6)) drop-shadow(0 0 60px rgba(255, 0, 255, 0.2));
  animation: float 6s ease-in-out infinite;
}
body.tema-cyberpunk .hero-derecha .hero-img-flotante {
  filter: drop-shadow(0 0 25px rgba(0, 255, 255, 0.6)) drop-shadow(0 0 50px rgba(0, 255, 255, 0.2));
  animation-delay: 3s;
}

body.tema-cyberpunk .card-producto {
  background: rgba(26, 11, 46, 0.6);
  backdrop-filter: blur(8px);
  border: 2px solid #00ffff;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.25), inset 0 0 20px rgba(0, 255, 255, 0.05);
}

body.tema-cyberpunk .card-producto:hover {
  border-color: #ff00ff;
  box-shadow: 0 0 30px rgba(255, 0, 255, 0.4), inset 0 0 20px rgba(255, 0, 255, 0.08);
}

body.tema-cyberpunk button,
body.tema-cyberpunk .btn-agregar-carrito,
body.tema-cyberpunk .btn-confirmar,
body.tema-cyberpunk .btn-reintentar-pago {
  background: linear-gradient(135deg, #00ffff, #0080ff);
  color: #000;
}
body.tema-cyberpunk button:hover:not(:disabled),
body.tema-cyberpunk .btn-agregar-carrito:hover:not(.agregado),
body.tema-cyberpunk .btn-confirmar:hover {
  background: linear-gradient(135deg, #ff00ff, #ff0080);
  box-shadow: 0 6px 20px rgba(255, 0, 255, 0.5);
}

/* ==========================================================
   TEMA: gradient-futurista (activar con <body class="tema-gradient-futurista">)
   ========================================================== */
body.tema-gradient-futurista {
  --fondo: #08080f;
  --superficie: #12121f;
  --superficie-2: #1a1a30;
  --acento: #f43f5e;
  --acento-2: #22d3ee;
  --borde: #2a2a45;
  --texto-principal: #e8e8f0;
  --texto-secundario: #8888aa;
  --texto-muted: #55557a;
  --grad-1: linear-gradient(135deg, #7c3aed, #f43f5e);
  --grad-2: linear-gradient(135deg, #22d3ee, #7c3aed);
  --grad-card: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(244, 63, 94, 0.05));
  --font-heading: 'Nunito', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body.tema-gradient-futurista .hero {
  background: radial-gradient(ellipse at 20% 50%, rgba(124, 58, 237, 0.12) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 50%, rgba(244, 63, 94, 0.08) 0%, transparent 50%),
              radial-gradient(ellipse at 50% 0%, rgba(34, 211, 238, 0.06) 0%, transparent 50%);
  height: auto;
  padding: 100px 24px 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

body.tema-gradient-futurista .hero-lado {
  display: flex;
  position: relative;
  width: 180px;
  flex-shrink: 0;
}

body.tema-gradient-futurista .hero-img-flotante {
  filter: drop-shadow(0 0 30px rgba(124, 58, 237, 0.2));
  animation: float 4s ease-in-out infinite;
}

body.tema-gradient-futurista .card-producto {
  background: var(--superficie);
  border: 1px solid var(--borde);
  box-shadow: none;
}

body.tema-gradient-futurista button,
body.tema-gradient-futurista .btn-agregar-carrito,
body.tema-gradient-futurista .btn-confirmar {
  background: var(--grad-1);
  color: #fff;
}

body.tema-gradient-futurista button:hover:not(:disabled),
body.tema-gradient-futurista .btn-agregar-carrito:hover:not(.agregado) {
  background: var(--grad-2);
  box-shadow: 0 0 24px rgba(244, 63, 94, 0.35);
}

/* Mayorista badge */
/* Marca un pedido sin cuenta en el panel admin. Sutil a proposito: es
   informativo, no una alerta -- comprar como invitado es normal. */
.badge-invitado {
  display: inline-block;
  background: rgba(0, 229, 255, 0.15);
  color: var(--acento);
  border: 1px solid var(--acento);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge-mayorista {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ==========================================================
   IDENTIDAD VISUAL JUGUETERIALRN -- componentes nuevos
   Logo con anillo cian, badge magenta, iconos neon, hero del
   home, y barra de contacto (WhatsApp + Instagram).
   ========================================================== */

/* ===== Logo con anillo cian ===== */
.logo-ring-sm {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-ring-sm .logo-ring-circulo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #1b0f47, #0a1652);
  border: 2px solid var(--acento);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.55), inset 0 0 8px rgba(0, 229, 255, 0.25);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.logo-ring-sm .logo-ring-nombre {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--texto-principal);
  line-height: 1.1;
}

.logo-ring-sm .logo-ring-dominio {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--acento);
  letter-spacing: 0.3px;
}

.logo-ring-grande {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
}

.logo-ring-grande .logo-ring-circulo {
  width: clamp(160px, 18vw, 240px);
  height: clamp(160px, 18vw, 240px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #24135c, #0a1652);
  border: 4px solid var(--acento);
  box-shadow: 0 0 45px rgba(0, 229, 255, 0.6), 0 0 90px rgba(0, 229, 255, 0.25), inset 0 0 28px rgba(0, 229, 255, 0.2);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 68px);
  color: #fff;
  letter-spacing: 1px;
  text-shadow: 0 0 16px rgba(0, 229, 255, 0.8);
}

.logo-ring-grande .logo-ring-dominio {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--acento);
  letter-spacing: 0.5px;
  text-align: center;
}

/* ===== Badge magenta ===== */
.badge-neon-magenta {
  display: inline-block;
  background: var(--magenta);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 8px 22px;
  border-radius: 100px;
  text-transform: uppercase;
  box-shadow: 0 0 20px rgba(214, 0, 111, 0.55);
}

/* ===== Fila de beneficios (iconos con contorno cian neon) ===== */
.beneficios-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
}

.beneficio-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 2px solid var(--acento);
  border-radius: 100px;
  background: rgba(0, 229, 255, 0.06);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.2);
  color: var(--texto-principal);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.beneficio-item svg {
  width: 20px;
  height: 20px;
  stroke: var(--acento);
  fill: none;
  stroke-width: 2;
  filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.8));
  flex-shrink: 0;
}

/* ===== Hero del home (solo index.html) ===== */
.hero-neon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 60px 24px 80px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.hero-neon-titulo {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 4rem);
  color: #eafcff;
  -webkit-text-stroke: 2px #ffffff;
  text-shadow: 0 0 18px rgba(0, 229, 255, 0.85), 0 0 40px rgba(0, 229, 255, 0.5);
  line-height: 1.05;
  margin: 0;
  text-align: left;
}

.hero-neon-sub {
  color: var(--texto-secundario);
  font-size: 1.05rem;
  max-width: 46ch;
  margin: 14px 0 0;
  text-align: left;
}

.hero-neon-contenido {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 36px;
  /* position:relative explicito: sin el, el z-index solo funcionaba por
     ser flex item. Asi el apilamiento sobre los mockups no depende de
     que el contenedor siga siendo flex. */
  position: relative;
  z-index: 2;
  flex: 1 1 560px;
  text-align: left;
}

.hero-neon-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

/* Mockups decorativos flotando -- ilustraciones genericas, no fotos de
   productos reales. Se ocultan si el usuario prefiere menos movimiento. */
/* z-index 0 y no 1: los mockups son fondo decorativo y tienen que quedar
   por debajo de TODO el contenido real. Van dentro de .hero-neon, que es
   position:relative con overflow:hidden, asi que no pueden desbordar
   hacia el catalogo al hacer scroll. */
.hero-mockups {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-mockup {
  position: absolute;
  filter: drop-shadow(0 0 16px rgba(0, 229, 255, 0.35));
  animation: flotar 6s ease-in-out infinite;
  /* Fondo, no protagonista: baja el contraste frente al logo y al texto. */
  opacity: 0.5;
}

/* Se ubican en las franjas superior e inferior del hero, que es donde no
   hay contenido: el logo, el texto y la foto ocupan la banda del medio.
   Antes la mochila invadia la caja del logo (hasta 1033px2 de solape a
   partir de 1440px de ancho), porque los mockups miden px fijos mientras
   el circulo del logo escala con vw. */
.hero-mockup.mochila { top: 0; left: 0; width: 110px; animation-delay: 0s; }
.hero-mockup.parlante { top: 0; right: 2%; width: 100px; animation-delay: 1.2s; }
.hero-mockup.oso { bottom: 0; left: 2%; width: 105px; animation-delay: 0.6s; }
.hero-mockup.orbe { bottom: 0; right: 0; width: 95px; animation-delay: 1.8s; }

@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(3deg); }
}

/* ===== Banner publicitario (home, debajo del hero) =====
   Vacio (sin banner activo/vigente) no debe dejar hueco en el layout. */
.banner-publicitario:empty {
  display: none;
}

.banner-publicitario {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 32px;
  text-align: center;
}

.banner-publicitario img {
  max-width: 100%;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-sm);
}

@media (prefers-reduced-motion: reduce) {
  .hero-mockup { animation: none; }
}

@media (max-width: 900px) {
  .hero-mockup { display: none; }

  .hero-neon-contenido {
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-basis: auto;
    gap: 24px;
  }

  .hero-neon-texto {
    align-items: center;
    text-align: center;
  }

  .hero-neon-titulo,
  .hero-neon-sub {
    text-align: center;
  }

  .hero-neon-sub {
    margin: 14px auto 0;
  }

  .beneficios-fila,
  .hero-botones {
    justify-content: center;
  }

  .logo-ring-grande .logo-ring-circulo {
    width: 140px;
    height: 140px;
    font-size: 40px;
  }
}

/* ===== Barra de contacto (WhatsApp + Instagram, renderizada por JS) ===== */
.contacto-bar {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 0 8px;
}

.contacto-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  border: 2px solid var(--acento);
  color: var(--texto-principal);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background: rgba(0, 229, 255, 0.06);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.18);
  transition: box-shadow var(--transicion), transform var(--transicion);
}

.contacto-link:hover {
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.4);
  transform: translateY(-2px);
}

.contacto-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}