/* ========================================
   MAYORISTA SUPLES — Design tokens
   ======================================== */
:root {
  --bg-black:        #0d0d0d;
  --bg-black-soft:   #141414;
  --bg-panel:        #1a1a1a;
  --bg-green-panel:  #0f1a12;
  --border-subtle:   #2a2a2a;

  --orange:          #F15A24;
  --orange-dark:     #D4471A;
  --blue:            #1A73E8;
  --blue-dark:       #1558B0;
  --green:           #5BC236;
  --green-dark:      #3F9426;
  --red-accent:      #E2384D;

  --white:           #FFFFFF;
  --text-body:        #C9C9C9;
  --text-muted:       #8A8A8A;

  --img-frame-bg:      #222;
  --input-hover-border: #444;

  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-body:    'Manrope', -apple-system, sans-serif;

  --radius: 6px;
  --container: 1280px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-fast: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: hidden; touch-action: manipulation; }

/* Transición suave por defecto para cualquier elemento interactivo */
a, button, input, select, textarea,
.btn, .trust-item, .proceso-step, .testimonio-card, .paraquien-item,
.calidad-badge, .brand-badge, .mini-benefit, .faq-item, .whatsapp-float,
.check-list li, .footer-social a {
  transition: transform 0.35s var(--ease),
              background-color 0.25s var(--ease-fast),
              border-color 0.25s var(--ease-fast),
              box-shadow 0.35s var(--ease),
              color 0.2s var(--ease-fast),
              opacity 0.25s var(--ease-fast);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background: var(--bg-black);
  color: var(--text-body);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--white);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
  display: block;
}
.eyebrow-nutri { color: var(--green); }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

/* ========================================
   BUTTONS
   ======================================== */
.btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
  transition: transform 0.35s var(--ease), background 0.25s var(--ease-fast),
              border-color 0.25s var(--ease-fast), box-shadow 0.35s var(--ease);
}

/* Barrido de brillo que cruza el botón al pasar el mouse */
.btn::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-20deg);
  z-index: -1;
  transition: left 0.55s var(--ease);
}
.btn:hover::before { left: 130%; }

.btn:hover {
  transform: translateY(-3px) scale(1.015);
}
.btn:active {
  transform: translateY(-1px) scale(0.97);
  transition-duration: 0.1s;
}
.btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:disabled:hover { transform: none; }
.btn:disabled::before { display: none; }

.btn small {
  font-weight: 500;
  font-size: 0.72rem;
  opacity: 0.85;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}

.btn-primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 0 0 rgba(26,115,232,0);
}
.btn-primary:hover {
  background: var(--blue-dark);
  box-shadow: 0 10px 28px -8px rgba(26,115,232,0.65);
}

.btn-outline {
  background: transparent;
  border-color: var(--orange);
  color: var(--orange);
}
.btn-outline:hover {
  background: rgba(241,90,36,0.12);
  border-color: var(--orange-dark);
  box-shadow: 0 10px 28px -10px rgba(241,90,36,0.4);
}

.btn-green {
  background: var(--green);
  color: #0d1a0d;
  box-shadow: 0 0 0 rgba(91,194,54,0);
}
.btn-green:hover {
  background: var(--green-dark);
  color: var(--white);
  box-shadow: 0 10px 28px -8px rgba(91,194,54,0.55);
}

.btn-nav-cta {
  padding: 10px 22px;
  font-size: 0.85rem;
}

/* ========================================
   CENEFA DE ANUNCIOS (sobre el header)
   ======================================== */
.cenefa-anuncios { background: #000000; padding: 8px 0; overflow: hidden; }
.cenefa-anuncios-track {
  display: flex;
  width: max-content;
  animation: cenefaScroll 32s linear infinite;
}
.cenefa-anuncios:hover .cenefa-anuncios-track { animation-play-state: paused; }
.cenefa-anuncios-grupo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px 36px;
  padding: 0 36px;
}
@keyframes cenefaScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}
@media (prefers-reduced-motion: reduce) {
  .cenefa-anuncios-track { animation: none; }
}
/* Un solo tono (blanco, currentColor) para íconos y texto — nada de
   colores de marca sueltos (ej. el verde de WhatsApp) para que se vea
   como un solo bloque de anuncios, no como íconos de apps distintas. */
.cenefa-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em; color: #FFFFFF; white-space: nowrap; }
.cenefa-item svg { flex-shrink: 0; }
.cenefa-separador { color: rgba(255,255,255,0.35); font-size: 0.7rem; }
.cenefa-whatsapp { text-decoration: none; }
.cenefa-whatsapp:hover { color: #FDD208; }

@media (max-width: 767px) {
  .cenefa-solo-pc { display: none; }
}

@media (max-width: 480px) {
  .cenefa-separador { display: none; }
  .cenefa-whatsapp-numero { display: none; }
}

/* ========================================
   HEADER
   ======================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 98px;
  /* Sin backdrop-filter a propósito. Tenía blur(8px), pero el header es
     sticky y mide ~1265x107: el navegador recalculaba ese desenfoque en cada
     cuadro, para siempre, porque justo detrás corre la cenefa de anuncios en
     bucle y el fondo nunca deja de cambiar. Y no se veía: el fondo es opaco,
     así que del desenfoque no pasaba nada. Costaba ~20% de CPU sostenido. */
  background: #0D0D0D;
  border-bottom: 1px solid var(--border-subtle);
  transition: min-height 0.3s var(--ease);
}

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: padding 0.3s var(--ease);
}

.logo { display: flex; align-items: center; white-space: nowrap; }
.logo-img { height: 53px; width: auto; display: block; transition: transform 0.3s var(--ease); }
.logo:hover .logo-img { transform: scale(1.04); }

/* Al hacer scroll el header se achica: menos padding/alto real + logo mas
   chico. El header sigue sticky, asi que esto empuja un poco el contenido
   de abajo, pero es un cambio suave (transition) y ya no genera "salto"
   porque el sticky quedo bien resuelto (ver fix de overflow-x en body/html). */
.site-header.header-compacto { min-height: 48px; }
.site-header.header-compacto .header-inner { padding: 4px 24px; }
.site-header.header-compacto .logo-img { transform: scale(0.7); transform-origin: left center; }
.site-header.header-compacto .logo:hover .logo-img { transform: scale(0.73); }

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  justify-content: center;
}
.nav-session-group { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.main-nav a {
  position: relative;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-body);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 4px;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--orange);
  transition: width 0.3s var(--ease);
}
.main-nav a:hover { color: var(--white); }
.main-nav a:hover::after { width: 100%; }
.main-nav-categorias { display: none; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.hamburger span {
  width: 24px; height: 2px; background: var(--white);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease-fast);
}
.hamburger:hover span { background: var(--orange); }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-subnav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 10px 24px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.site-subnav a {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-body);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.site-subnav a:hover { color: #000000; }
@media (max-width: 720px) {
  .site-subnav { display: none; }
}

/* ========================================
   HERO
   ======================================== */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 640px;
  display: flex;
  align-items: center;
  background: linear-gradient(100deg, rgba(13,13,13,0.97) 0%, rgba(13,13,13,0.75) 45%, rgba(13,13,13,0.25) 75%), var(--bg-black-soft);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero picture {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hero-bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 100px 24px 60px;
  width: 100%;
}
.hero-content { max-width: 890px; }
.hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  margin-bottom: 6px;
}
.hero .hero-accent { color: var(--orange); }
.hero-sub {
  font-family: var(--font-body);
  color: var(--text-body);
  font-size: 1.02rem;
  margin: 22px 0 32px;
  max-width: 520px;
  text-transform: none;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }

.hero-features {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.hero-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 236px;
}
.hero-feature .icon-circle {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--orange);
}
.hero-feature strong { display: block; color: var(--white); font-size: 0.85rem; }
.hero-feature span { font-size: 0.78rem; color: var(--text-muted); }

/* ========================================
   TRUST BAR (Experiencia y capacidad)
   ======================================== */
.trust-bar {
  background: var(--bg-black-soft);
  border-bottom: 1px solid var(--border-subtle);
  padding: 40px 0;
}
.trust-bar h2 {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 36px;
  color: var(--white);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  max-width: 980px;
  margin: 0 auto;
}
.trust-item { text-align: center; padding: 16px; border-radius: var(--radius); cursor: default; }
.trust-item:hover { transform: translateY(-6px); }
.trust-item .icon-wrap {
  width: 58px; height: 58px;
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--orange);
  border: 1.5px solid rgba(241,90,36,0.3);
  border-radius: 50%;
  transition: transform 0.4s var(--ease), border-color 0.3s var(--ease-fast);
}
.trust-item:hover .icon-wrap { transform: scale(1.1) rotate(-4deg); border-color: var(--orange); }
.trust-item strong {
  display: block;
  color: var(--white);
  font-size: 1.1rem;
  text-transform: uppercase;
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}
.trust-item p { font-size: 0.86rem; color: var(--text-muted); line-height: 1.6; max-width: 260px; margin: 0 auto; }

/* ========================================
   SPLIT SECTION (Desarrolla / Distribuye)
   ======================================== */
.split-section {
  display: grid;
  grid-template-columns: 35% 30% 35%;
}
.split-panel { padding: 64px 40px; }
.split-panel.panel-dev { background: var(--bg-panel); }
.split-panel.panel-dist { background: var(--bg-green-panel); }

.split-panel h3 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  margin: 8px 0 16px;
}

.split-panel p.desc { color: var(--text-body); margin-bottom: 22px; max-width: 460px; }

.check-list { margin-bottom: 28px; }
.check-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--text-body);
  margin-bottom: 10px;
  cursor: default;
}
.check-list li:hover { color: var(--white); transform: translateX(4px); }
.check-list li .chk { color: var(--orange); flex-shrink: 0; font-weight: 700; }
.panel-dist .check-list li .chk { color: var(--green); }

.split-media { overflow: hidden; }
.split-media picture { display: block; height: 100%; }
.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.split-icon {
  width: 56px; height: 56px;
  margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
  border: 1.5px solid rgba(91,194,54,0.35);
  border-radius: 50%;
}

.split-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.split-cta-row .note { font-size: 0.78rem; color: var(--text-muted); max-width: 180px; }

/* ========================================
   PROCESO
   ======================================== */
.proceso-section { padding: 80px 0; background: var(--bg-black); }
.section-title { text-align: center; margin-bottom: 48px; }
.section-title h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }

.proceso-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.proceso-step {
  background: var(--bg-panel);

  padding: 18px 16px 22px;
  border-bottom: 3px solid var(--orange);
  overflow: hidden;
  cursor: default;
}
.proceso-step:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 32px -16px rgba(0,0,0,0.6);
}
.proceso-step .step-num {
  color: var(--orange);
  font-family: var(--font-display);
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.proceso-step h4 {
  color: var(--white);
  font-size: 0.99rem;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 800;
}
.proceso-step p { font-size: 0.76rem; color: var(--text-muted); }
.proceso-step .step-img {
  width: 100%; height: 90px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 12px;
  background: #222;
  transition: transform 0.5s var(--ease);
}
.proceso-step:hover .step-img { transform: scale(1.06); }

/* ========================================
   CALIDAD
   ======================================== */
.calidad-section { padding: 80px 0; background: var(--bg-black-soft); }
.calidad-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  align-items: center;
}
.calidad-text h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 18px; }
.calidad-text p { margin-bottom: 24px; max-width: 440px; }
.calidad-badges { display: flex; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.calidad-badge { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--text-muted); max-width: 140px; }
.calidad-badge .icon-wrap { color: var(--orange); flex-shrink: 0; }

.calidad-images {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.calidad-images img { border-radius: 4px; height: 220px; object-fit: cover; background: #222; }
.calidad-images .calidad-img-full { height: 460px; }

/* DICTUC credibility card, reused pattern from mayoristasuples */
.dictuc-card {
  margin-top: 28px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 0.82rem;
  color: var(--text-body);
  max-width: 460px;
  cursor: default;
}
.dictuc-card:hover {
  transform: translateX(4px);
  border-left-width: 5px;
  box-shadow: 0 10px 24px -14px rgba(91,194,54,0.35);
}
.dictuc-card strong { color: var(--white); }

/* ========================================
   TESTIMONIOS
   ======================================== */
.testimonios-section { padding: 70px 0; background: var(--bg-black); }
.testimonios-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.testimonio-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: center;
  cursor: default;
}
.testimonio-card:hover {
  transform: translateY(-6px);
  border-color: var(--orange);
  box-shadow: 0 16px 32px -18px rgba(241,90,36,0.4);
}
.testimonio-card p.quote {
  font-size: 0.78rem;
  color: var(--text-body);
  font-style: italic;
  margin-bottom: 18px;
  min-height: 70px;
}
.testimonio-card .brand-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--white);
}

/* ========================================
   PARA QUIEN ES
   ======================================== */
.paraquien-section { padding: 70px 0; background: var(--bg-black-soft); }
.paraquien-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.paraquien-item { text-align: center; padding: 12px; border-radius: var(--radius); cursor: default; }
.paraquien-item:hover { transform: translateY(-6px); }
.paraquien-item .icon-wrap {
  width: 48px; height: 48px;
  margin: 0 auto 16px;
  color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.4s var(--ease);
}
.paraquien-item:hover .icon-wrap { transform: scale(1.15) rotate(4deg); }
.paraquien-item strong {
  display: block;
  color: var(--orange);
  font-size: 0.99rem;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.paraquien-item p { font-size: 0.78rem; color: var(--text-muted); }

/* ========================================
   FAQ + CONTACTO
   ======================================== */
.faq-contact-section {
  padding: 70px 0;
  background: var(--bg-black);
}
.faq-contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 0.9fr 1.3fr;
  gap: 40px;
  align-items: start;
}
.faq-col h3, .talk-col h3 { font-size: 1.2rem; margin-bottom: 20px; }
.faq-item {
  border-bottom: 1px solid var(--border-subtle);
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  color: var(--text-body);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  padding: 14px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: color 0.2s var(--ease-fast), padding-left 0.3s var(--ease);
}
.faq-question:hover { color: var(--white); padding-left: 8px; }
.faq-question .plus {
  color: var(--orange);
  font-size: 1.1rem;
  transition: transform 0.35s var(--ease);
  display: inline-block;
}
.faq-item.open .plus { transform: rotate(135deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease-fast);
  font-size: 0.82rem;
  color: var(--text-muted);
  opacity: 0;
}
.faq-item.open .faq-answer { opacity: 1; }
.faq-item.open .faq-answer { padding-bottom: 14px; }

.talk-col .txt-fast { color: var(--orange); }
.talk-col p { margin-bottom: 20px; font-size: 0.9rem; }
.contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.88rem;
}
.contact-line .icon-wrap { color: var(--orange); }

.form-col {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 30px 32px;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.03);
  overflow: hidden;
}
.form-col::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FDD208, #17181B, #FDD208);
}
.form-col::after {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(253,210,8,0.18), transparent 70%);
  pointer-events: none;
}
.form-col h3 {
  font-size: 1.35rem;
  margin-bottom: 6px;
  position: relative;
}
.form-col .form-subtitle {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 18px;
  position: relative;
}
.form-field { margin-bottom: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row .form-field { margin-bottom: 14px; }
.form-compacto .form-field { margin-bottom: 10px; }
.form-compacto .form-field label { margin-bottom: 4px; }
.form-compacto .form-field input,
.form-compacto .form-field select,
.form-compacto .form-field textarea { padding: 10px 12px; }
.form-field label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.auth-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* !important porque vive dentro de .form-field, y ".form-field label"
     (más específico que ".auth-checkbox" sola) fuerza mayúsculas — sin esto
     el checkbox de aceptar términos/marketing salía todo en caps. */
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
}
.auth-checkbox a { color: var(--orange); }
label.auth-checkbox input[type="checkbox"] { width: auto; margin-top: 3px; flex-shrink: 0; }

.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 13px 14px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color 0.25s var(--ease-fast), box-shadow 0.25s var(--ease-fast), transform 0.2s var(--ease-fast), background 0.25s var(--ease-fast);
}
.form-field textarea { resize: vertical; min-height: 90px; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover {
  border-color: var(--input-hover-border);
  background: rgba(255,255,255,0.05);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 4px rgba(241,90,36,0.15);
}
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23F15A24' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
.form-field select option {
  background: var(--bg-black-soft);
  color: var(--white);
  padding: 10px 14px;
}
.form-field select option:checked,
.form-field select option:hover {
  background: var(--orange);
  color: var(--white);
}

/* Campos obligatorios y su estado de error — al apretar "Guardar cambios" el
   JS de mis-datos.php marca acá los campos que faltan y desliza el foco hasta
   el primero. */
.campo-req { color: var(--red-accent); font-weight: 800; }
.campo-req[hidden] { display: none; }
.form-obligatorios-leyenda {
  margin: 0 0 18px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.form-field.campo-invalido label { color: var(--red-accent); }
.form-field.campo-invalido input,
.form-field.campo-invalido select,
.form-field.campo-invalido textarea {
  border-color: var(--red-accent);
  background: rgba(226,56,77,0.06);
  box-shadow: 0 0 0 3px rgba(226,56,77,0.16);
  animation: campoInvalidoPulso 0.75s var(--ease-fast);
}
.form-field.campo-invalido input:focus,
.form-field.campo-invalido select:focus,
.form-field.campo-invalido textarea:focus {
  border-color: var(--red-accent);
  box-shadow: 0 0 0 3px rgba(226,56,77,0.3);
}
@keyframes campoInvalidoPulso {
  0%   { box-shadow: 0 0 0 0 rgba(226,56,77,0.5); }
  60%  { box-shadow: 0 0 0 7px rgba(226,56,77,0); }
  100% { box-shadow: 0 0 0 3px rgba(226,56,77,0.16); }
}
.campo-error-msg {
  margin: 6px 0 0;
  color: var(--red-accent);
  font-size: 0.78rem;
  line-height: 1.4;
  font-weight: 600;
}
/* Aviso de dato que falta a nivel de tarjeta (ej: no hay dirección de envío
   guardada, que mi-cuenta.php exige igual que los campos del formulario). */
.aviso-falta-dato {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--red-accent);
  border-radius: var(--radius);
  background: rgba(226,56,77,0.1);
  color: var(--red-accent);
  font-size: 0.82rem;
  font-weight: 600;
}
.card-falta-dato {
  animation: cardFaltaDatoPulso 1.2s var(--ease-fast);
}
@keyframes cardFaltaDatoPulso {
  0%   { box-shadow: 0 0 0 0 rgba(226,56,77,0.45); }
  100% { box-shadow: 0 0 0 8px rgba(226,56,77,0); }
}
@media (prefers-reduced-motion: reduce) {
  .form-field.campo-invalido input,
  .form-field.campo-invalido select,
  .form-field.campo-invalido textarea,
  .card-falta-dato { animation: none; }
}
@media (max-width: 720px) {
  /* En mobile los inputs deben tener font-size >=16px: si no, iOS hace zoom
     al enfocarlos y arruina justo el momento en que el JS lleva el foco al
     campo que falta. */
  .form-field input,
  .form-field select,
  .form-field textarea,
  .editor-enriquecido-contenido { font-size: 16px; }
}.form-col .btn {
  width: 100%;
  margin-top: 6px;
  padding: 16px 28px;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

/* ========================================
   FOOTER
   ======================================== */
.site-footer {
  background: var(--bg-black-soft);
  border-top: 1px solid var(--border-subtle);
  padding: 40px 0;
}
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 180px; }
.footer-col-titulo { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 2px; color: var(--white); }
.footer-logo img { height: 38px; width: auto; display: block; opacity: 0.9; }
.footer-copy { font-size: 0.78rem; color: var(--text-muted); margin: 0; }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links a { font-size: 0.78rem; color: var(--text-muted); }
.footer-links a:hover { color: var(--orange); }
.footer-social { display: flex; gap: 14px; margin-top: 4px; }
.footer-social a {
  width: 30px; height: 30px;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.footer-social a:hover { border-color: var(--orange); color: var(--orange); }
/* El ícono es un SVG de línea (no texto "IG"), así que el tamaño lo manda el
   svg, no el font-size. En celular el círculo sube a 38px porque 30px queda
   bajo el mínimo cómodo de target táctil. */
.footer-social a svg { width: 16px; height: 16px; display: block; }
@media (max-width: 640px) {
  .footer-social a { width: 38px; height: 38px; }
  .footer-social a svg { width: 18px; height: 18px; }
}

@media (max-width: 640px) {
  .footer-inner { flex-direction: column; gap: 28px; }
}

.footer-newsletter { display: flex; flex-direction: column; gap: 6px; }
.footer-newsletter-label { font-size: 0.78rem; color: var(--text-muted); }
.footer-newsletter-campo { display: flex; gap: 8px; }
.footer-newsletter-campo input {
  min-width: 180px;
  padding: 9px 12px;
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 0.82rem;
  color: #17181B;
}
.footer-newsletter-campo input:focus { outline: none; border-color: #000000; }
.footer-newsletter-campo button {
  padding: 9px 18px;
  background: #000000;
  color: #FDD208;
  border: none;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
}
.footer-newsletter-campo button:hover { background: #222222; }
.footer-newsletter-exito { font-size: 0.82rem; color: var(--text-muted); margin: 0; }

@media (max-width: 640px) {
  .footer-newsletter-campo { flex-wrap: wrap; }
  .footer-newsletter-campo input { flex: 1 1 100%; }
}

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px; height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  z-index: 90;
}
/* El aro que late va en un pseudo-elemento y se anima con transform+opacity,
   no con box-shadow: asi lo compone la GPU en vez de repintar el boton en
   cada cuadro. El boton esta en TODAS las paginas y late para siempre, o sea
   que era repintado permanente. */
.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(37,211,102,0.55);
  z-index: -1;
  pointer-events: none;
  animation: wa-pulse 2.6s ease-out infinite;
}
.whatsapp-float:hover {
  transform: scale(1.12) rotate(-6deg);
  box-shadow: 0 8px 22px rgba(0,0,0,0.5);
}
.whatsapp-float:hover::before { animation-play-state: paused; }
.whatsapp-float:active { transform: scale(0.95); }

/* 56px de ancho + 14px de aro = radio 28 -> 42, o sea escala 1.5. */
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.productos-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

/* Con 4 productos o menos (solo en PC), se agranda un 15% y se centra en
   vez de quedar pegado a la izquierda con espacio vacío a la derecha. */
/* Pocos productos: quedan alineados a la izquierda con las mismas columnas (sin centrar). */


/* ========================================
   LEGAL PAGES (politica-privacidad, terminos)
   ======================================== */
.legal-page { padding: 64px 0 80px; }
.legal-page .container { max-width: 760px; }
.legal-page h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 8px; }
.legal-page .legal-updated { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 40px; }
.legal-page h2 { font-size: 1.15rem; margin: 36px 0 12px; }
.legal-page p { margin-bottom: 16px; }
.legal-page ul, .legal-page ol { margin: 0 0 16px 20px; }
.legal-page ul { list-style: disc; }
.legal-page ol { list-style: decimal; }
.legal-page li { margin-bottom: 8px; }
.legal-page a { color: var(--orange); text-decoration: underline; }

.marketplaces-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.marketplace-badge {
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,0.4);
  transition: transform 0.2s var(--ease-fast);
}
.marketplace-badge:hover { transform: translateY(-2px); }
/* Colores de referencia de cada marketplace — no son el isotipo oficial,
   solo un chip de color para que se distingan de un vistazo. */
.marketplace-badge-walmart   { background: #0071CE; }
.marketplace-badge-meli      { background: #FFE600; color: #2D3277; }
.marketplace-badge-falabella { background: #6DCFF6; color: #17181B; }
.marketplace-badge-paris     { background: #E4002B; }

/* ========================================
   AUTH (registro, login, verificar)
   ======================================== */
.auth-page { padding: 48px 0 56px; background: #F5F5F2; }
.auth-page .form-col { max-width: 440px; margin: 0 auto; }
.auth-errores { background: rgba(226,56,77,0.1); border: 1px solid var(--red-accent); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; }
.auth-errores p { color: var(--red-accent); font-size: 0.85rem; margin: 0; }
.auth-errores p + p { margin-top: 6px; }
.auth-exito { background: rgba(91,194,54,0.1); border: 1px solid var(--green); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; }
.auth-exito p { color: var(--green); font-size: 0.85rem; margin: 0; }

/* Confirmación grande al volver de carrito/confirmar.php (?pedido_confirmado=1)
   — reemplaza el aviso chico de antes por algo que se note de verdad, más
   el botón directo a WhatsApp con el vendedor. */
.pedido-recien-confirmado-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 32px 24px;
  margin-bottom: 24px;
  background: rgba(91,194,54,0.08);
  border: 1px solid var(--green);
  border-radius: 16px;
}
.pedido-recien-confirmado-check { color: var(--green); animation: pedidoConfirmadoAparecer 0.45s ease both; }
.pedido-recien-confirmado-hero h3 { font-size: 1.4rem; margin: 4px 0 0; color: var(--white); }
.pedido-recien-confirmado-hero p { max-width: 480px; color: var(--text-body); font-size: 0.9rem; margin: 0; }
.pedido-recien-confirmado-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  background: #25D366;
  border-color: #25D366;
  color: #FFFFFF;
}
.pedido-recien-confirmado-whatsapp:hover { background: #1ebc59; border-color: #1ebc59; }
.pedido-recien-confirmado-horario { font-size: 0.78rem; color: var(--text-muted); }
@keyframes pedidoConfirmadoAparecer {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pedido-recien-confirmado-check { animation: none; }
}
.auth-alt-link { font-size: 0.85rem; color: var(--text-muted); text-align: center; margin-top: 10px; }
.auth-alt-link a:not(.btn) { color: var(--orange); text-decoration: underline; }
.auth-alt-link + .auth-alt-link { margin-top: 4px; }

/* auth/registro.php: layout tipo landing — form a la izquierda, foto +
   propuesta de valor a la derecha (más "publicitario" que el form plano
   centrado que usan login.php/mis-datos.php). */
.auth-promo-pagina { padding: 24px 0; }
.auth-promo-pagina .container { max-width: 1100px; }
.auth-promo-grid {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 0;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}
.auth-promo-form-col { display: flex; align-items: center; justify-content: center; padding: 36px 40px; background: var(--bg-black-soft); }
.auth-promo-card { width: 100%; max-width: 440px; }
.auth-promo-card h3 { font-size: 1.5rem; margin-bottom: 4px; }
.auth-promo-card .form-subtitle { margin-bottom: 14px; }
.auth-promo-card .form-row { gap: 12px; }
.auth-promo-card .form-row .form-field,
.auth-promo-card .form-field { margin-bottom: 12px; }
.auth-promo-card .auth-alt-link { margin-top: 8px; }
.auth-promo-foto { position: relative; overflow: hidden; background: var(--bg-black); }
.auth-promo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auth-promo-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 32px;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.05) 100%);
  color: #FFFFFF;
}
.auth-promo-badge {
  align-self: flex-start;
  background: var(--orange);
  color: #FFFFFF;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.auth-promo-overlay h2 { color: #FFFFFF; font-size: 1.4rem; line-height: 1.22; margin: 0 0 16px; font-weight: 800; }
.auth-promo-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.auth-promo-lista li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 600; }
.auth-promo-lista svg {
  flex-shrink: 0; width: 20px; height: 20px; box-sizing: border-box; padding: 3px;
  color: var(--orange);
  background: #FFFFFF;
  border-radius: 50%;
}
@media (max-width: 900px) {
  .auth-promo-pagina { padding: 0; }
  .auth-promo-grid { grid-template-columns: 1fr; min-height: 0; border-radius: 0; box-shadow: none; }
  .auth-promo-foto { order: -1; height: 170px; }
  .auth-promo-form-col { padding: 22px 20px 28px; }
  .auth-promo-overlay { padding: 18px 20px; }
  .auth-promo-badge { display: none; }
  .auth-promo-overlay h2 { font-size: 1.05rem; margin-bottom: 8px; }
  .auth-promo-lista { display: none; }
  /* En mobile los inputs deben tener font-size >=16px: si no, iOS hace
     zoom automático al enfocarlos y rompe la navegación (gotcha recurrente
     en este sitio — ver el mismo fix aplicado al login-dropdown). */
  .auth-promo-card .form-field input,
  .auth-promo-card .form-field select { font-size: 16px; }
  .auth-promo-card h3 { font-size: 1.3rem; }
  .auth-promo-card .btn { width: 100%; }
}

.campo-password { position: relative; }
.campo-password input { padding-right: 44px; width: 100%; box-sizing: border-box; }
.toggle-password {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: none; border: none; border-radius: 6px; cursor: pointer;
  color: var(--text-muted);
}
.toggle-password:hover { color: var(--orange); background: rgba(241,90,36,0.08); }
.toggle-password.activo { color: var(--orange); }

/* Honeypot anti-bot: oculto fuera de pantalla (no display:none, para que
   bots que revisan estilos computados tampoco lo detecten fácilmente) */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* Encabezados de sección solo para SEO/accesibilidad (jerarquía H1→H2→H3
   correcta) sin agregar un título visible donde el diseño no lo pide —
   ej. antes de la grilla de productos en distribucion.php/marca.php/
   coleccion.php, que hoy salta de H1 directo a los H4 de cada tarjeta. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   DISTRIBUCION.PHP
   ======================================== */
.dist-hero { padding: 0; text-align: left; background: var(--bg-black); border-bottom: 1px solid var(--border-subtle); overflow: hidden; }
.dist-hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0px; min-height: 310px; }
.dist-hero-texto { padding: 36px 0; }
.dist-hero h1 { font-size: clamp(1.3rem, 3.1vw, 2.15rem); line-height: 1.12; margin: 0 0 11px; white-space: normal; text-transform: uppercase; font-weight: 800; }
.dist-hero-destacado { color: #B8860B; }
.dist-hero p { color: var(--text-body); font-size: 0.98rem; max-width: 460px; margin: 0 0 20px; }

.dist-hero-features { display: flex; gap: 32px; margin-bottom: 20px; flex-wrap: wrap; }
.dist-hero-feature { display: flex; align-items: flex-start; gap: 10px; }
.dist-hero-feature svg { flex-shrink: 0; color: var(--orange-dark); margin-top: 2px; }
.dist-hero-feature strong { display: block; font-size: 0.85rem; font-weight: 800; color: var(--white); white-space: nowrap; }
.dist-hero-feature span { display: block; font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }

/* Entrada del hero: cada bloque aparece con un fundido + leve subida,
   en cascada (uno tras otro) para que la carga se sienta pulida en vez
   de que todo aparezca de golpe. Una sola vez, no en loop. */
@keyframes distHeroEntrada {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.dist-hero h1,
.dist-hero-texto > p,
.dist-hero-features,
.dist-hero-foto {
  opacity: 0;
  animation: distHeroEntrada 0.65s var(--ease) both;
}
.dist-hero h1 { animation-delay: 0.05s; }
.dist-hero-texto > p { animation-delay: 0.16s; }
.dist-hero-features { animation-delay: 0.27s; }
.dist-hero-foto { animation-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) {
  .dist-hero h1, .dist-hero-texto > p, .dist-hero-features, .dist-hero-foto { animation: none; opacity: 1; }
}

/* CTA de registro en el hero: debe ser imposible de pasar por alto — anillo
   de resplandor pulsante + brillo que cruza el botón en loop, tono naranja
   de marca (no colores random) para que se sienta parte del sitio, no un
   banner ajeno. */
.dist-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin: 2px 0 24px;
  padding: 16px 32px;
  font-size: 1rem;
  position: relative;
  isolation: isolate;
  opacity: 0;
  animation: distHeroEntrada 0.65s var(--ease) both 0.38s, distHeroCtaGlow 2.4s ease-in-out infinite 1.05s;
}
.dist-hero-cta::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: translateX(-150%) skewX(-20deg);
  will-change: transform;
  animation: distHeroCtaShine 3s ease-in-out infinite;
  pointer-events: none;
}
/* Este si se queda con box-shadow: .btn tiene overflow:hidden (para que el
   brillo no se salga del boton), y eso recorta cualquier pseudo-elemento, o
   sea que el anillo no se puede sacar a un ::before. Es un solo boton en una
   sola pagina, asi que el costo es acotado. */
@keyframes distHeroCtaGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(241,90,36,0.5); }
  50% { box-shadow: 0 0 0 14px rgba(241,90,36,0); }
}
/* Antes esto animaba "left", que obliga al navegador a recalcular el layout
   de la pagina en cada cuadro, para siempre. Con translateX el recorrido es
   identico pero lo resuelve la GPU sin tocar el layout.
   El ::after mide 40% del boton, asi que -150% de su ancho equivale al
   left:-60% original, y 325% al left:130%. */
@keyframes distHeroCtaShine {
  0%   { transform: translateX(-150%) skewX(-20deg); }
  45%  { transform: translateX(325%)  skewX(-20deg); }
  100% { transform: translateX(325%)  skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dist-hero-cta { animation: none; opacity: 1; }
  .dist-hero-cta::after { display: none; }
}

.dist-hero-foto { position: relative; align-self: stretch; }
.dist-hero-foto img { width: 117%; height: 100%; object-fit: cover; display: block; }
.dist-hero-foto::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -1px; width: 120px;
  background: linear-gradient(to right, var(--bg-black) 0%, transparent 100%);
  z-index: 1;
}

@media (max-width: 900px) {
  .dist-hero-grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .dist-hero-texto { padding: 32px 0 24px; }
  .dist-hero-foto { order: -1; margin: 0 -24px; }
  .dist-hero-foto::before { display: none; }
  .dist-hero-foto img { max-height: 220px; }
  .dist-hero-features { display: none; }
}

.seller-hero .container { max-width: 1130px; }
.seller-hero-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; text-align: left; margin-top: 28px; }
.seller-hero-texto p { margin: 0 0 16px; max-width: none; font-size: 1rem; color: var(--text-body); }
.seller-hero-texto h4 { font-size: 1rem; color: var(--white); margin: 0 0 10px; }
.seller-hero-lista { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.seller-hero-lista li { display: flex; align-items: center; gap: 10px; color: var(--text-body); font-size: 0.95rem; }
.seller-hero-icono {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg-black-soft);
  color: var(--orange);
}
.seller-hero-lista-check .seller-hero-icono { color: var(--green); }
.seller-login-box {
  background: linear-gradient(165deg, var(--bg-panel) 0%, var(--bg-black-soft) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 32px 30px;
  text-align: left;
}
.seller-login-box h3 { font-size: 1.1rem; margin-bottom: 4px; }
.seller-login-box .form-subtitle { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 16px; }
.seller-login-box .form-field { margin-bottom: 12px; }
.seller-login-box .btn { width: 100%; }
.seller-login-box .auth-alt-link { margin-top: 12px; font-size: 0.8rem; }
.seller-login-box .auth-errores { padding: 10px 14px; margin-bottom: 14px; }
.seller-login-box .auth-errores p { font-size: 0.78rem; }

.dist-auth { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; }
.dist-auth-name { color: var(--text-body); font-size: 0.9rem; text-decoration: none; white-space: nowrap; }
.dist-auth-name:hover { color: var(--orange); }
.dist-auth-link { color: var(--text-muted); font-size: 0.85rem; text-decoration: underline; }
.dist-auth-link:hover { color: var(--orange); }

/* Dropdown de "Iniciar sesión" en el header: abre el form ahí mismo sin
   navegar a auth/login.php (mismo patrón visual/UX que suples.cl). */
.login-dropdown-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.login-dropdown-trigger { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
#login-dropdown-trigger { text-decoration: none; }
.login-dropdown-micuenta {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--text-body);
  font-size: 0.9rem;
  font-weight: 700;
}
.login-dropdown-micuenta:hover { color: var(--orange); }
.login-dropdown-chevron { font-size: 0.7em; line-height: 1; }
.login-dropdown-panel {
  position: absolute; top: 100%; right: 0; margin-top: 14px;
  width: 320px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 26px 26px 22px;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.03);
  z-index: 20;
  text-align: left;
}
.login-dropdown-panel[hidden] { display: none; }
/* Versión chica del mismo panel, para el "Mi cuenta ▾" de cuando ya estás
   logueado (solo trae Cerrar sesión, no el formulario completo). */
.cuenta-dropdown-panel { width: auto; min-width: 170px; padding: 8px; }
.cuenta-dropdown-panel a.dist-auth-link {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.cuenta-dropdown-panel a.dist-auth-link:hover { background: rgba(255,255,255,0.06); color: var(--orange); }
body.tema-claro .cuenta-dropdown-panel a.dist-auth-link:hover { background: rgba(0,0,0,0.05); }
.login-dropdown-panel h3 { font-size: 1.15rem; margin-bottom: 4px; }
.login-dropdown-panel .form-subtitle { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 16px; }
.login-dropdown-panel .form-field { margin-bottom: 12px; }
.login-dropdown-panel .auth-alt-link { font-size: 0.8rem; margin-top: 10px; }
/* El dropdown vive dentro de <nav class="main-nav">, que fuerza mayúsculas y
   un subrayado naranja animado (::after) en TODOS sus <a> — se colaba acá
   ("Registrarme", "¿Olvidaste tu contraseña?" y el botón de Google). Se
   anula puntualmente para que se vean en su case normal y sin esa línea. */
.login-dropdown-panel a { text-transform: none; letter-spacing: normal; }
.login-dropdown-panel a::after, .google-btn::after { content: none; }
.login-dropdown-submit { width: 100%; margin-top: 4px; }
.login-dropdown-errores { margin-bottom: 14px; }

@media (max-width: 720px) {
  .login-dropdown-wrap { align-items: flex-start; width: 100%; }
  .login-dropdown-panel {
    position: static;
    width: auto;
    margin-top: 12px;
    box-shadow: none;
  }
  /* iOS Safari hace zoom automático al enfocar un input con font-size menor
     a 16px — como el email se enfoca solo (JS) al abrir el dropdown, sin
     esto el zoom queda pegado incluso después del reload al loguearse. */
  .login-dropdown-panel .form-field input {
    font-size: 16px;
  }
}
.dist-auth-error { color: var(--red-accent); font-size: 0.85rem; }
.dist-auth-texto { color: var(--text-muted); font-size: 0.85rem; }
.btn-google { padding: 10px 20px; font-size: 0.85rem; }
/* TEMPORAL: oculto hasta ajustar su estilo visual. Reactivar borrando esta línea. */
.btn-google { display: none; }

/* Botón "Continuar con Google" — estilo neutro oficial de Google (blanco,
   borde gris, logo G a 4 colores) en vez de un link de texto suelto. */
.google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 20px !important;
  margin-top: 4px;
  background: #FFFFFF;
  border: 1px solid #dadce0;
  border-radius: 999px;
  color: #3c4043;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.google-btn:hover, .google-btn:focus {
  text-decoration: none !important;
  background: #f8f9fa;
  border-color: #c6c9cc;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -4px rgba(60,64,67,0.3);
}
.google-btn:active { transform: translateY(0); box-shadow: none; }
/* SVG inline es "inline" por defecto y arrastra espacio de descendentes de
   texto (baseline gap) — eso desalineaba el logo/texto verticalmente
   dentro del botón. display:block dentro del flex lo centra de verdad. */
.google-btn svg { display: block; flex-shrink: 0; }

/* Versión levemente más destacada: cuando Google va primero como opción
   principal (dropdown de login, auth/login.php) en vez de al final. */
.google-btn-destacado { border-color: #a8c7fa; background: #f8faff; box-shadow: 0 2px 6px rgba(66,133,244,0.15); }
.google-btn-destacado:hover { border-color: #8ab4f8; background: #f0f6ff; }

/* Separador "———— o registrate con tu email ————" entre el botón de
   Google y el formulario tradicional (auth/registro.php, auth/login.php). */
.auth-divisor {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.auth-divisor::before, .auth-divisor::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.condiciones-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1080px;
  margin: 0 auto;
}

.dist-brand-section { padding: 40px 0; background: var(--bg-black); }
.dist-brand-section .container { max-width: 1400px; }

.marcas-strip-section { padding: 32px 0; background: var(--bg-black-soft); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.marcas-strip-titulo { text-align: center; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 24px; }
.marcas-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 36px; }
.marcas-strip-logo { display: block; opacity: 0.75; transition: opacity 0.2s var(--ease-fast), transform 0.2s var(--ease-fast); }
.marcas-strip-logo:hover { opacity: 1; transform: translateY(-2px); }
.marcas-strip-logo img { height: 40px; width: auto; max-width: 120px; object-fit: contain; }

/* Paginador del catálogo: píldoras redondas, la activa "salta", y una barrita
   de progreso con una pesa que avanza. Todo CSS, sin pedir nada al servidor. */
.productos-paginador { margin-top: 36px; text-align: center; }
.pag-fila { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.pag-btn {
  min-width: 44px; height: 44px; padding: 0 12px;
  border-radius: 999px; border: 2px solid #E2E2E2; background: #fff; color: #222;
  font: 700 1rem/1 inherit; font-family: inherit; cursor: pointer;
  transition: transform 0.18s var(--ease-fast), background 0.18s var(--ease-fast), border-color 0.18s var(--ease-fast), color 0.18s var(--ease-fast);
  -webkit-tap-highlight-color: transparent;
}
.pag-btn:hover:not(:disabled):not(.active) { border-color: var(--blue); color: var(--blue); transform: translateY(-3px) rotate(-3deg); }
.pag-btn:active:not(:disabled) { transform: scale(0.92); }
.pag-btn:disabled { opacity: 0.35; cursor: default; }
.pag-num.active { background: var(--blue); border-color: var(--blue); color: #fff; animation: pag-salto 0.45s var(--ease-fast); box-shadow: 0 6px 14px rgba(26,115,232,0.35); }
.pag-puntos { min-width: 24px; color: #888; font-weight: 700; }
.pag-info { margin: 16px 0 0; font-size: 0.85rem; color: var(--text-muted); }
@keyframes pag-salto { 0% { transform: scale(1); } 40% { transform: translateY(-8px) scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pag-btn { transition: none; } .pag-num.active { animation: none; } }
@media (max-width: 480px) { .pag-btn { min-width: 40px; height: 40px; } .pag-fila { gap: 6px; } }

.producto-card {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.35s var(--ease), border-color 0.3s var(--ease-fast);
}
.producto-card:hover { transform: translateY(-6px); border-color: var(--orange); }
.producto-marca-label { display: block; color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 10px; text-decoration: none; }
.producto-marca-label:hover { color: var(--orange); text-decoration: underline; }
.producto-card img {
  width: 100%;
  max-height: 175px;
  object-fit: contain;
  display: block;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 8px;
  box-sizing: border-box;
  background: var(--img-frame-bg);
}
/* Mientras la imagen real todavía no termina de cargar (lazy o recién
   revelada por "cargar más"), se ve un cargador circular centrado sobre
   el cuadro de la imagen en vez de un espacio vacío. */
.producto-img-wrap { position: relative; display: block; }
.producto-img-wrap::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 3px solid rgba(0,0,0,0.1);
  border-top-color: var(--orange);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  animation: productoImgSpin 0.7s linear infinite;
}
.producto-img-wrap.cargando::after { opacity: 1; }
@keyframes productoImgSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .producto-img-wrap::after { animation: none; }
}
.producto-card h4 { color: var(--white); font-size: 0.95rem; margin-bottom: 6px; }
.productos-grid .empty-note { color: var(--text-muted); font-size: 0.85rem; grid-column: 1 / -1; }

.producto-favorito {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: transparent;
  border: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--input-hover-border);
  cursor: pointer;
  transition: color 0.2s var(--ease-fast);
}
.producto-favorito:hover { color: var(--red-accent); }
.producto-favorito.active { color: var(--red-accent); }
.producto-favorito.active svg { fill: currentColor; }

.producto-agotado {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  z-index: 1;
}
.producto-precio-publico { color: var(--text-muted); font-weight: 400; font-size: 0.95rem; margin-top: 4px; }
.producto-precio-mayorista { color: var(--green); font-weight: 700; font-size: 0.84rem; margin-top: 10px; }
.producto-precio-mayorista .precio-valor { font-size: 1.1rem; }
.producto-margen { color: var(--text-muted); font-size: 0.9rem; margin-top: 2px; }
.producto-login-link { display: inline-block; color: var(--orange); font-size: 0.76rem; text-decoration: underline; margin-top: 8px; }

/* Mayorista + PVP + Margen en una sola línea (antes 3 renglones apilados) —
   cada <p> conserva su propio estilo, solo se resetea su margin-top propio
   porque ahora el espaciado lo da el gap del contenedor flex. */
.producto-precio-resumen { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.producto-precio-resumen > p { margin-top: 0; }

/* Selector de cantidad + botón "Agregar al carrito" lado a lado en vez de
   apilados — en mobile vuelve a apilarse (ver media query) para que el
   botón mantenga ancho completo y buen tap-target. */
.producto-compra-fila { display: flex; align-items: stretch; gap: 12px; margin-top: 20px; }
.producto-compra-fila .producto-cantidad { margin-top: 0; flex-shrink: 0; }
.producto-compra-fila .btn-agregar-carrito { margin-top: 0; flex: 0 1 auto; width: auto; max-width: 280px; }

.producto-precio-volumen { margin-top: 14px; padding: 14px 16px; background: var(--bg-black-soft); border-radius: 8px; max-width: 540px; }
.producto-precio-volumen strong { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; }
.producto-precio-volumen-tabla { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.producto-precio-volumen-tabla th, .producto-precio-volumen-tabla td { text-align: left; padding: 8px; }
.producto-precio-volumen-tabla th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border-subtle); }
.producto-precio-volumen-tabla td { color: var(--text-body); border-bottom: 1px solid var(--border-subtle); }
.producto-precio-volumen-tabla tr:last-child td { border-bottom: none; }
.producto-precio-volumen-tabla td:nth-child(2) { font-weight: 700; color: var(--white); }
.producto-precio-volumen-tabla td:last-child { font-weight: 700; color: var(--green); }
.producto-precio-volumen-fila { cursor: pointer; transition: background 0.15s ease; border-radius: 6px; }
.producto-precio-volumen-fila:hover { background: rgba(255,255,255,0.05); }
.producto-precio-volumen-fila:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.producto-precio-volumen-fila.active { background: rgba(255,165,0,0.1); }
.producto-precio-volumen-fila.active td:first-child { font-weight: 700; color: var(--orange); }
.producto-precio-volumen-hint { font-size: 0.82rem; color: var(--text-muted); margin-top: 8px; }
.producto-precio-volumen-hint-activo { color: var(--green); font-weight: 600; }

.precio-valor-boton {
  display: inline-block;
  background: #FFFFFF;
  color: var(--blue);
  border: 1px solid var(--blue);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 5px 13px;
  border-radius: 6px;
  margin-left: 4px;
}
.precio-valor-boton:hover { background: rgba(26,115,232,0.08); }

.pvp-label {
  position: relative;
  cursor: help;
  font-weight: 700;
  font-size: 0.85em;
}
.pvp-valor { font-weight: 400; }
.pvp-label::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 135%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-black);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 400;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 5;
}
.pvp-label:hover::after { opacity: 1; visibility: visible; }
.productos-vacio { color: var(--text-muted); font-size: 0.9rem; text-align: center; }

.producto-oculto { display: none; }

.btn-agregar-carrito {
  display: inline-block;
  width: 100%;
  margin-top: 12px;
  padding: 9px 14px;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s var(--ease-fast), opacity 0.2s var(--ease-fast);
}
.btn-agregar-carrito:hover { background: var(--blue-dark); }

/* Misma animación del .btn general (barrido de brillo + lift al hover/active),
   replicada acá y en .filtro-pill para que se sienta consistente en todo
   el sitio, no solo en los botones de formularios. */
.btn-agregar-carrito, .filtro-pill {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
}
.btn-agregar-carrito::before, .filtro-pill::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-20deg);
  z-index: -1;
  transition: left 0.55s var(--ease);
}
.btn-agregar-carrito:hover::before, .filtro-pill:hover::before { left: 130%; }
.btn-agregar-carrito:hover, .filtro-pill:hover { transform: translateY(-3px) scale(1.015); }
.btn-agregar-carrito:active, .filtro-pill:active { transform: translateY(-1px) scale(0.97); transition-duration: 0.1s; }
.btn-agregar-carrito:disabled, .btn-agregar-carrito-disabled { overflow: visible; }
.btn-agregar-carrito:disabled:hover, .btn-agregar-carrito-disabled:hover { transform: none; }
.btn-agregar-carrito:disabled::before, .btn-agregar-carrito-disabled::before { display: none; }
.btn-agregar-carrito:disabled { opacity: 0.5; cursor: not-allowed; }
/* .btn-agregar-carrito y .producto-agotado-acciones fijan su propio
   "display", que le gana por especificidad a la regla nativa [hidden]
   {display:none} — hay que declararlo explícito (mismo caso que el modal
   de avisarme-stock). Se usa para el swap con sabor-chip en producto.php. */
.btn-agregar-carrito[hidden], .producto-agotado-acciones[hidden] { display: none; }
.btn-agregar-carrito-link { text-decoration: none; }
.btn-agregar-carrito-disabled { opacity: 0.5; cursor: not-allowed; text-decoration: none; }

.producto-agotado-acciones { display: flex; gap: 8px; align-items: center; }
.producto-agotado-acciones .btn-agregar-carrito,
.producto-agotado-acciones .btn-agregar-carrito-disabled { flex: 0 1 auto; width: auto; }
.producto-detalle-info .producto-agotado-acciones .btn-agregar-carrito { padding: 10px 22px; font-size: 0.85rem; }
.btn-avisar-stock {
  flex-shrink: 0;
  padding: 0 14px;
  height: 100%;
  min-height: 38px;
  background: none;
  border: 1px solid var(--orange);
  border-radius: var(--radius);
  color: var(--orange);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.btn-avisar-stock:hover { background: var(--orange); color: #FFFFFF; }

/* Modal genérico centrado (hoy solo lo usa "Avísame cuando llegue stock"). */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay[hidden] { display: none; }
.modal-caja {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 28px 24px 24px;
}
.modal-caja h3 { font-size: 1.15rem; margin-bottom: 8px; padding-right: 20px; }
.modal-caja-ancho { max-width: 560px; }
.modal-cerrar {
  position: absolute;
  top: 14px; right: 14px;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.modal-cerrar:hover { color: var(--orange); }
.modal-avisar-stock-nombre { color: var(--text-body); font-size: 0.85rem; font-weight: 700; line-height: 1.3; }
.modal-avisar-stock-exito { color: var(--green-dark); font-size: 0.9rem; margin: 0; }
#form-avisar-stock input[type="email"] {
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-body);
  font-family: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
}
#form-avisar-stock input[type="email"]:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(241,90,36,0.15);
}
#form-avisar-stock .btn { width: 100%; }
body.tema-claro #form-avisar-stock input[type="email"] { background: #FFFFFF; border-color: #CFCFCF; }
body.tema-claro #form-avisar-stock input[type="email"]:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(26,115,232,0.15); }

/* ========================================
   PRODUCTO.PHP (ficha de producto)
   ======================================== */
.producto-pagina { padding: 18px 0 80px; }

.producto-volver {
  display: inline-block;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: none;
  margin-bottom: 16px;
}
.producto-volver-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.producto-volver-fila .producto-volver { margin-bottom: 0; }
.btn-compartir-producto {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.btn-compartir-producto:hover { border-color: var(--orange); color: var(--orange); }
@media (max-width: 720px) {
  .btn-compartir-producto { display: flex; }
}
.producto-volver:hover { color: var(--orange); }

.producto-detalle {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 48px;
  align-items: start;
}

.producto-detalle-imagen {
  position: sticky;
  top: 110px;
  align-self: start;
  background: var(--img-frame-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 24px;
  box-sizing: border-box;
}
.producto-detalle-imagen img {
  width: 100%;
  max-height: 440px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.producto-galeria-miniaturas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}
.producto-galeria-miniatura {
  width: 56px;
  height: 56px;
  padding: 3px;
  background: var(--img-frame-bg);
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.producto-galeria-miniatura img { width: 100%; height: 100%; object-fit: contain; display: block; }
.producto-galeria-miniatura:hover { border-color: var(--border-subtle); }
.producto-galeria-miniatura.active { border-color: var(--orange); }

.producto-detalle-info .eyebrow { display: block; margin-bottom: 10px; }
.producto-detalle-info h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 8px; }
.producto-full-sku-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.producto-sku { color: var(--text-muted); font-size: 0.78rem; margin: 0 0 0 auto; white-space: nowrap; }
.producto-detalle-descripcion { color: var(--text-body); font-size: 1rem; line-height: 1.75; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border-subtle); margin-bottom: 24px; max-width: 560px; }
.producto-detalle-descripcion p { margin: 0 0 14px; }
.producto-detalle-descripcion p:last-child { margin-bottom: 0; }
.producto-detalle-descripcion ul, .producto-detalle-descripcion ol { margin: 0 0 14px 22px; }
.producto-detalle-descripcion h3, .producto-detalle-descripcion h4 { color: var(--white); margin: 20px 0 10px; }
.producto-detalle-descripcion a { color: var(--orange); }
/* La tabla puede venir más ancha que el máx. de 560px de este bloque (ej.
   una tabla de información nutricional con varias columnas) — que desborde
   con su propio scroll horizontal, no que rompa el layout de la página. */
.producto-detalle-descripcion table { border-collapse: collapse; margin: 0 0 14px; max-width: 100%; display: block; overflow-x: auto; }
.producto-detalle-descripcion table td, .producto-detalle-descripcion table th { border: 1px solid var(--border-subtle); padding: 8px 12px; text-align: left; }
.producto-detalle-descripcion table th { background: rgba(255,255,255,0.04); }

.productos-relacionados { padding: 20px 0 60px; }
.productos-relacionados h2 { font-size: 1.3rem; margin-bottom: 20px; }
/* En desktop, angostada para calzar con el ancho real de la ficha de arriba
   (440px imagen + 48px gap + 560px máx. de la descripción = 1048px) — así
   no se ve más ancha que el contenido que tiene encima. En mobile el layout
   de la ficha ya es 1 columna, así que ahí no hace falta angostarla (usa el
   mismo responsive de .productos-grid que el resto del sitio). */
@media (min-width: 981px) {
  .productos-relacionados .productos-grid {
    grid-template-columns: repeat(5, 1fr);
    max-width: 1048px;
  }
}
.producto-sabores { margin-bottom: 20px; max-width: 560px; }
.producto-sabores strong {
  display: block;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.producto-sabores-lista { display: flex; flex-wrap: wrap; gap: 12px; }
.sabor-chip {
  display: inline-block;
  padding: 4px 13px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: none;
  color: var(--text-body);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-fast), color 0.15s var(--ease-fast);
}
.sabor-chip:hover { border-color: var(--orange); color: var(--orange); }
.sabor-chip.active { border-color: var(--orange); color: var(--orange); font-weight: 700; }
.sabor-chip-agotado {
  border-color: var(--border-subtle);
  color: var(--text-muted);
  font-weight: 400;
  opacity: 0.45;
  text-decoration: line-through;
}
.sabor-chip-agotado:hover { border-color: var(--border-subtle); color: var(--text-muted); }
.sabor-chip-agotado.active { border-color: var(--text-muted); color: var(--text-muted); opacity: 0.7; text-decoration: line-through; font-weight: 400; }

.producto-detalle-info .producto-precio-publico { font-size: 1.08rem; }
.producto-detalle-info .producto-precio-mayorista { font-size: 1.4rem; }
.producto-detalle-info .precio-label { font-size: 1.26rem; }
.producto-detalle-info .precio-valor { font-size: 1.27rem; }
.producto-detalle-info .producto-margen { display: flex; align-items: baseline; gap: 5px; }
.producto-detalle-info .margen-label { font-size: 0.7rem; }
.producto-detalle-info .btn-agregar-carrito,
.producto-detalle-info .producto-login-link { display: inline-block; width: auto; min-width: 260px; margin-top: 20px; }
.producto-detalle-info .btn-agregar-carrito { padding: 16px 32px; font-size: 1rem; }
.producto-detalle-info .producto-login-link { display: block; }
.producto-detalle-info .producto-cantidad + .btn-agregar-carrito { margin-top: 12px; }
/* Anula los margin-top de arriba cuando cantidad+botón están en la fila
   flex .producto-compra-fila — si no, el botón queda desalineado hacia
   abajo respecto al selector de cantidad. */
.producto-detalle-info .producto-compra-fila .btn-agregar-carrito,
.producto-detalle-info .producto-compra-fila .producto-cantidad + .btn-agregar-carrito { margin-top: 0; }

/* display:flex (no inline-flex) para que ocupe su propia linea y el boton
   de abajo no quede flotando al lado. Los 3 recuadros comparten borde
   (margin-left:-1px superpone 1px con el vecino) y comparten alto. */
.producto-cantidad { display: flex; margin-top: 20px; }
.producto-cantidad-btn,
.producto-cantidad-input {
  height: 44px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-panel);
  box-sizing: border-box;
}
.producto-cantidad-btn {
  width: 44px;
  color: var(--text-body);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s var(--ease-fast), color 0.2s var(--ease-fast);
}
.producto-cantidad-btn:hover { border-color: var(--orange); color: var(--orange); z-index: 1; }
.producto-cantidad-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.producto-cantidad-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }
.producto-cantidad-input {
  width: 56px;
  margin-left: -1px;
  text-align: center;
  color: var(--white);
  font-size: 1rem;
  font-family: var(--font-body);
  -moz-appearance: textfield;
}
.producto-cantidad-input:focus { position: relative; z-index: 1; outline: none; border-color: var(--orange); }
.producto-cantidad-input::-webkit-outer-spin-button,
.producto-cantidad-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.producto-no-encontrado { text-align: center; padding: 60px 0; }
.producto-no-encontrado h1 { margin-bottom: 12px; }
.producto-no-encontrado p { color: var(--text-muted); margin-bottom: 24px; }

/* ========================================
   MI-CUENTA.PHP
   ======================================== */
.cuenta-pagina { padding: 40px 0 80px; }
.seller-productos-pagina h1 { margin: 0 0 12px; }
.cuenta-saludo { color: var(--text-muted); margin-bottom: 32px; }
.admin-acciones { display: flex; gap: 10px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.admin-acciones .btn { width: auto; padding: 8px 20px; font-size: 0.82rem; }

.admin-clientes-tabs { margin: 12px 0 20px; }

.cliente-nombre-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cliente-toggle-detalle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
}
.cliente-toggle-detalle:hover { color: var(--orange); }
.cliente-toggle-chevron { flex-shrink: 0; transition: transform 0.2s var(--ease-fast); }
.cliente-toggle-detalle[aria-expanded="true"] .cliente-toggle-chevron { transform: rotate(180deg); }
.cliente-fila-detalle td { background: var(--bg-black-soft); padding: 14px 16px; }
.cliente-detalle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 24px; }
.cliente-detalle-grid span { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 2px; }
.cliente-detalle-grid strong { font-weight: 600; color: var(--white); font-size: 0.86rem; }
/* Cuentas que nunca confirmaron el email: se marcan en la lista y traen sus
   acciones de rescate (reenviar el link / darla por verificada a mano). */
.cliente-sin-verificar {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(226,56,77,0.14);
  border: 1px solid var(--red-accent);
  color: var(--red-accent);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}
.cliente-verificacion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cliente-verificacion form { margin: 0; }

.cliente-btn-spam {
  border: none;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s var(--ease-fast), color 0.2s var(--ease-fast), transform 0.2s var(--ease-fast);
}
.cliente-btn-spam:hover { transform: translateY(-1px); }
.cliente-btn-spam.marcar { background: var(--bg-black-soft); color: var(--text-muted); }
.cliente-btn-spam.marcar:hover { background: rgba(226,56,77,0.16); color: var(--red-accent); }
.cliente-btn-spam.marcar.sugerido { background: rgba(226,56,77,0.16); color: var(--red-accent); }
.cliente-btn-spam.restaurar { background: rgba(91,194,54,0.16); color: var(--green); }
.cliente-btn-spam.restaurar:hover { background: var(--green); color: #0d1a0d; }

.admin-solicitud-header-izq { align-items: center; gap: 14px; }
.admin-solicitud-logo {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-black-soft);
  color: var(--text-muted);
}
.admin-solicitud-logo img { width: 100%; height: 100%; object-fit: contain; }
.admin-marca-nombre { display: block; font-weight: 700; color: var(--white); font-size: 1.35rem; }
.admin-solicitud-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.admin-solicitud-col h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 8px; }
.admin-solicitud-col p { margin: 0 0 4px; font-size: 0.88rem; color: var(--text-body); }

.seller-guia-espera {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 28px 30px;
  margin-bottom: 28px;
}
.seller-guia-espera h3 { font-size: 1.1rem; margin-bottom: 10px; }
.seller-guia-espera p { color: var(--text-body); margin-bottom: 14px; }
.seller-guia-pasos { margin: 0; padding-left: 20px; color: var(--text-body); font-size: 0.9rem; line-height: 1.7; }

/* seller/panel.php — dashboard con métricas propias (no repite lo que ya
   muestran productos.php/pedidos.php). */
.seller-dashboard-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.seller-dashboard-metrica { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; transition: border-color 0.2s var(--ease-fast); }
a.seller-dashboard-metrica:hover { border-color: var(--orange); }
.seller-dashboard-metrica-label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.seller-dashboard-metrica-valor { font-size: 1.9rem; font-weight: 800; color: var(--white); }
.seller-dashboard-metrica-alerta .seller-dashboard-metrica-valor { color: var(--orange); }
.seller-dashboard-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.seller-dashboard-lista li a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
  color: var(--text-body);
  font-size: 0.9rem;
}
.seller-dashboard-lista li:last-child a { border-bottom: none; }
.seller-dashboard-lista li a:hover span:first-child { color: var(--orange); }
.seller-dashboard-lista-nota { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }
.seller-dashboard-lista-nota-alerta { color: var(--red-accent); font-weight: 700; }

/* auto-fit en vez de un número fijo de columnas: la cantidad de tarjetas
   visibles varía (2 normalmente, 3 si además es Seller aprobado, y "Mis
   puntos acumulados" queda oculta por ahora) — así siempre se reparten
   parejo el ancho disponible sin dejar espacios vacíos. */
.cuenta-accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 40px; }
.cuenta-acceso {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 22px 24px;
  color: var(--white);
  text-decoration: none;
  transition: border-color 0.2s var(--ease-fast), transform 0.2s var(--ease-fast);
}
a.cuenta-acceso:hover { border-color: var(--orange); transform: translateY(-3px); }
.cuenta-acceso h3 { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; margin: 0; }
.cuenta-acceso svg { color: var(--orange); flex-shrink: 0; }
.cuenta-acceso-resumen { color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; }
.cuenta-acceso-resumen p { margin: 0; }
.cuenta-acceso-resumen p:first-child { color: var(--white); font-weight: 700; }
.cuenta-acceso-direccion { margin-top: 8px; }
/* Puntos acumulados: oculto en todas las resoluciones hasta que el sistema
   de puntos esté activo (hoy el número siempre muestra 0). */
.cuenta-acceso-oculto { display: none; }
.cuenta-acceso-btn { margin-top: auto; align-self: flex-start; text-align: center; padding: 6px 14px; font-size: 0.75rem; }
.cuenta-acceso-destacado { font-size: 2.2rem; font-weight: 700; color: var(--white); }
.cuenta-acceso-nota { font-size: 0.78rem; color: var(--text-muted); }

/* Tarjeta "Acceso Seller": tratamiento más llamativo que el resto de las
   tarjetas de acceso rápido, para que el número de pedidos por atender
   salte a la vista. */
.cuenta-acceso-seller {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(241,90,36,0.14), rgba(241,90,36,0.02));
  border-color: rgba(241,90,36,0.35);
}
.cuenta-acceso-seller::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241,90,36,0.28), transparent 70%);
  pointer-events: none;
}
a.cuenta-acceso-seller:hover { border-color: var(--orange); box-shadow: 0 10px 30px -12px rgba(241,90,36,0.45); }
.cuenta-acceso-seller-subtitulo { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--orange); }
.cuenta-acceso-destacado-naranjo { color: var(--orange); font-size: 2.6rem; }
.cuenta-acceso-seller-stats { display: flex; gap: 24px; flex-wrap: wrap; }
.cuenta-acceso-seller-stat { display: flex; flex-direction: column; gap: 4px; }
.cuenta-seccion { margin-bottom: 48px; }
.cuenta-seccion h2 { font-size: 1.2rem; margin-bottom: 18px; }
.cuenta-vacio { color: var(--text-muted); font-size: 0.9rem; }

.pedidos-list { display: flex; flex-direction: column; gap: 16px; }
.pedido-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.pedido-card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; list-style: none;
}
.pedido-card-header::-webkit-details-marker { display: none; }
.pedido-card[open] .pedido-card-header { margin-bottom: 8px; }
.pedido-card-header-izq { display: flex; align-items: baseline; gap: 10px; }
.pedido-card-header-der { display: flex; align-items: center; gap: 10px; }
.pedido-card-fotos { display: flex; }
.pedido-card-fotos img {
  width: 30px; height: 30px; border-radius: 50%; object-fit: contain;
  background: var(--bg-black-soft); border: 2px solid var(--bg-panel);
  margin-left: -10px;
}
.pedido-card-fotos img:first-child { margin-left: 0; }
.pedido-card[open] .pedido-card-fotos { display: none; }
.pedido-etapas { display: flex; align-items: center; gap: 8px; }
.pedido-etapa-icono {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #EDEDED;
  color: #8A8A8A;
  border: 1px solid #C7C7C7;
  flex-shrink: 0;
}
.pedido-etapa-icono svg { width: 20px; height: 20px; }
.pedido-etapa-icono.prendido {
  background: var(--green);
  color: #FFFFFF;
  border-color: var(--green);
}
@media (max-width: 720px) {
  .pedido-etapa-icono { width: 30px; height: 30px; }
  .pedido-etapa-icono svg { width: 16px; height: 16px; }
}

/* Mobile: número de pedido más grande arriba (con la fecha al lado) y los
   iconos de estado en su propia fila debajo, en vez de apretados en una
   sola línea junto con las fotos y el chevron. */
@media (max-width: 600px) {
  .pedido-card-header { flex-wrap: wrap; }
  .pedido-card-header-izq { order: 1; width: 100%; }
  .pedido-numero { font-size: 1.25rem; }
  .pedido-card-header-der { order: 2; width: 100%; justify-content: space-between; margin-top: 10px; }
}

.pedido-pago-transferencia {
  margin-top: 16px;
  padding: 16px 18px;
  background: rgba(91,194,54,0.08);
  border: 1px solid rgba(91,194,54,0.35);
  border-radius: var(--radius);
}
.pedido-pago-transferencia p { margin: 2px 0; font-size: 0.88rem; color: var(--text-body); }
.pedido-pago-transferencia-titulo { font-weight: 700; color: var(--green); margin-bottom: 8px; font-size: 0.95rem; }
.pedido-pago-transferencia-btn { width: auto; margin-top: 14px; padding: 11px 22px; font-size: 0.88rem; }
.pedido-pago-copiar-btn { width: auto; margin-top: 10px; }
.pedido-pago-en-revision { background: rgba(26,115,232,0.08); border-color: rgba(26,115,232,0.35); }
.pedido-pago-en-revision .pedido-pago-transferencia-titulo { color: var(--blue); }
.pedido-aviso-transferencia {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--blue);
  background: rgba(26,115,232,0.1);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Ícono destacado "Transferencia enviada" en seller/pedidos.php */
.seller-pedido-transferencia-aviso {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue);
  background: rgba(26,115,232,0.12);
  border: 1px solid rgba(26,115,232,0.35);
  border-radius: 999px;
  padding: 5px 12px;
  animation: sellerAvisoTransferenciaPulso 1.8s ease-in-out infinite;
}
/* Variante para el override de admin: no es urgente (nadie está esperando),
   así que sin el pulso — solo da contexto de por qué el flujo normal no
   mostró el botón de "Confirmar pago". */
.seller-pedido-admin-aviso {
  color: var(--text-muted);
  background: var(--bg-black-soft);
  border-color: var(--border-subtle);
  animation: none;
}
@keyframes sellerAvisoTransferenciaPulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26,115,232,0.35); }
  50% { box-shadow: 0 0 0 6px rgba(26,115,232,0); }
}

.form-contacto-exito { text-align: center; padding: 30px 10px; }
.form-contacto-exito h3 { margin-bottom: 10px; }
.form-contacto-exito p { color: var(--text-body); }

.postulacion-exito { text-align: center; padding: 20px 10px 10px; }
.postulacion-exito-check {
  width: 76px; height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(91,194,54,0.12);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pedidoConfirmadoCheckPop 0.5s var(--ease) 0.1s both;
}
.postulacion-exito h3 { font-size: 1.5rem; margin-bottom: 10px; }
.postulacion-exito p { color: var(--text-body); font-size: 0.95rem; }
@keyframes pedidoConfirmadoCheckPop {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.seller-marca-selector { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.seller-marca-selector-label { font-size: 0.82rem; color: var(--text-muted); margin-right: 4px; }
.seller-marca-selector .filtro-pill { text-decoration: none; }
.pedido-card-chevron { font-size: 0.7rem; color: var(--text-muted); transition: transform 0.2s var(--ease-fast); }
.pedido-card[open] .pedido-card-chevron { transform: rotate(180deg); }
.pedido-numero { font-weight: 700; color: var(--white); font-size: 0.9rem; }
.pedido-numero-valor { font-size: 1.2em; }

/* Menú "..." de cada pedido (abrir / eliminar) en mi-cuenta.php */
.pedido-card-menu { position: relative; }
.pedido-card-menu-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 6px;
  color: var(--text-muted); cursor: pointer;
}
.pedido-card-menu-btn:hover { background: var(--bg-black-soft); color: var(--text-body); }
.pedido-card-menu-dropdown {
  display: none;
  position: absolute; top: 100%; right: 0; margin-top: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  min-width: 140px;
  z-index: 5;
  overflow: hidden;
}
.pedido-card-menu:hover .pedido-card-menu-dropdown,
.pedido-card-menu.abierto .pedido-card-menu-dropdown { display: block; }
.pedido-card-menu-dropdown form { display: contents; }
.pedido-card-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--text-body);
  background: none;
  border: none;
  cursor: pointer;
}
.pedido-card-menu-item:hover { background: var(--bg-black-soft); }
.pedido-card-menu-item-eliminar { color: var(--red-accent); }
.pedido-fecha { color: var(--text-muted); font-size: 0.85rem; }
.pedido-estado {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-black-soft);
  color: var(--text-body);
  min-width: 110px;
  text-align: center;
}
.pedido-estado-pagado, .pedido-estado-despachado, .pedido-estado-entregado { background: var(--green); color: #FFFFFF; }
.pedido-estado-solicitado { background: #F2B705; color: #17181B; }
.pedido-estado-confirmado_stock { background: var(--blue); color: #FFFFFF; }

/* En la vista del cliente (mi-cuenta.php), "solicitado" se ve en verde para
   transmitir tranquilidad; en admin/pedidos.php se mantiene en amarillo,
   ya que ahí sí sirve como señal de "pendiente de validar". */
#mis-pedidos .pedido-estado-solicitado { background: var(--green); color: #FFFFFF; }

/* Destacar número de pedido y estado en seller/pedidos.php */
.pedido-numero-destacado { font-size: 1.15rem; font-weight: 800; }
.pedido-estado-destacado { font-size: 0.85rem; padding: 5px 14px; }

/* Estado "plano": solo texto en color, sin fondo de píldora — para que no
   se confunda con un botón cuando va justo encima de una acción real. */
.pedido-estado-plano { background: none; padding: 0; min-width: 0; }
.pedido-estado-plano.pedido-estado-solicitado { color: #B8860B; }
.pedido-estado-plano.pedido-estado-confirmado_stock { color: var(--blue); }
.pedido-estado-plano.pedido-estado-pagado,
.pedido-estado-plano.pedido-estado-despachado,
.pedido-estado-plano.pedido-estado-entregado { color: var(--green-dark); }

.seller-pedido-estado-columna { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.seller-pedido-acciones-confirmar { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.seller-pedido-btn-confirmar { width: auto; padding: 16px 34px; font-size: 1.05rem; }
.seller-pedido-btn-ajustar { width: auto; padding: 12px 26px; font-size: 0.92rem; }

/* Editor de cantidad inline: por defecto se ve el texto "Nx", y al activar
   "Ajustar cantidad" (clase .ajustando en .pedido-card) se muestra el
   stepper +/- en su lugar, sin recargar la página. */
.seller-pedido-item-qty-editor { display: none; align-items: center; gap: 4px; }
.pedido-card.ajustando .seller-pedido-item-qty-view { display: none; }
.pedido-card.ajustando .seller-pedido-item-qty-editor { display: inline-flex; }
.seller-qty-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-body);
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.seller-qty-btn:hover { background: var(--bg-black-soft); }
.seller-qty-input {
  width: 48px;
  text-align: center;
  padding: 5px 2px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-body);
  font-size: 0.95rem;
  font-weight: 700;
}

/* Columna de stock + visto bueno/malo al costado de cada producto en
   seller/pedidos.php */
.seller-pedido-items-header {
  display: grid;
  grid-template-columns: 1fr 60px 34px;
  gap: 10px;
  padding: 0 0 2px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.seller-pedido-items-header span:nth-child(2) { text-align: right; }
.pedido-items.seller-pedido-items li {
  display: grid;
  grid-template-columns: 1fr 60px 34px;
  align-items: center;
  gap: 10px;
}
.seller-pedido-item-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.seller-pedido-item-stock {
  text-align: right;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-muted);
}
.seller-pedido-item-stock-bajo { color: var(--red-accent); }
.seller-pedido-item-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
}
.seller-pedido-item-check.ok { background: rgba(91,194,54,0.15); color: var(--green-dark); }
.seller-pedido-item-check.malo { background: rgba(226,56,77,0.15); color: var(--red-accent); }

.seller-pedido-grupo-marca { margin-bottom: 10px; }
.seller-pedido-grupo-marca-nombre {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--orange);
  margin: 10px 0 4px;
}
.seller-pedido-grupo-marca:first-of-type .seller-pedido-grupo-marca-nombre { margin-top: 4px; }
.pedido-estado-aprobada { background: var(--green); color: #FFFFFF; font-size: 0.86rem; display: inline-flex; align-items: center; gap: 4px; }
.pedido-estado-rechazado { background: var(--red-accent); color: #FFFFFF; }
.pedido-estado-pendiente-entrega { background: var(--blue); color: #FFFFFF; }

/* seller/franquicias.php: vista general de todas las cuentas Seller. */
.seller-franquicia-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.seller-franquicia-fila {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.seller-franquicia-fila:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(0,0,0,0.35);
  border-color: rgba(241,90,36,0.35);
}
/* Fila de arriba: info + precio + badges, en grid angosto (siempre alinea
   entre tarjetas). Los botones de acción van en un flex aparte más abajo
   que envuelve si no caben — así nunca se salen de la tarjeta, sin importar
   cuántos botones tenga cada pedido. */
.seller-franquicia-fila-top {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 100px 150px 170px;
  align-items: center;
  gap: 10px 16px;
}
.seller-franquicia-fila-acciones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
/* min-width fijo aunque el form de adentro no se renderice (pedido ya
   pagado/entregado) — así el ⋮ queda a la misma distancia en toda tarjeta.
   No se puede usar :empty porque el PHP deja espacios en blanco adentro. */
.seller-franquicia-pagar-slot { min-width: 160px; }
.seller-franquicia-entregar-slot { min-width: 190px; }
.seller-franquicia-menu-slot { display: flex; margin-left: 4px; }
.seller-franquicia-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 220px;
  min-width: 0;
  background: none;
  border: none;
  padding: 4px;
  margin: -4px;
  border-radius: 10px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.seller-franquicia-info:hover { background: rgba(255,255,255,0.06); }
body.tema-claro .seller-franquicia-info:hover { background: rgba(0,0,0,0.04); }
.seller-franquicia-info-emoji {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: rgba(241,90,36,0.12);
  border-radius: 50%;
}
.seller-franquicia-info-texto { display: flex; flex-direction: column; min-width: 0; }
.seller-franquicia-nombre { font-weight: 700; color: var(--white); }
.seller-franquicia-info:hover .seller-franquicia-nombre { text-decoration: underline; }
.seller-franquicia-email { font-size: 0.8rem; color: var(--text-muted); }
.seller-franquicia-marcas { font-size: 0.82rem; color: var(--orange); margin-top: 4px; }
.seller-franquicia-metricas { display: flex; gap: 24px; flex-shrink: 0; }
.seller-franquicia-metrica { display: flex; flex-direction: column; align-items: center; min-width: 90px; }
.seller-franquicia-metrica strong { font-size: 1rem; color: var(--white); }
.seller-franquicia-metrica small { font-size: 0.72rem; color: var(--text-muted); }
.seller-franquicia-metrica-alerta strong { color: var(--orange); }
/* Herramientas internas de seller (franquicias, nueva venta) — no necesitan
   el footer público (logo/links legales/newsletter). */
body.seller-sin-footer .site-footer { display: none; }
/* seller/clientes.php — tarjetas con avatar, en el mismo lenguaje visual
   que el resto de las herramientas de seller (pill buttons, hover lift). */
.clientes-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.clientes-fila {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 110px 110px 140px auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.clientes-fila:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(0,0,0,0.35); border-color: rgba(241,90,36,0.35); }
.clientes-fila-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* .clientes-fila-info ahora es un <button> (abre el detalle del cliente) —
   resetea lo que un <button> trae por defecto para que se siga viendo igual
   que antes de serlo. */
.btn-ver-detalle-cliente {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.btn-ver-detalle-cliente:hover .clientes-nombre { color: var(--orange); }
.clientes-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(241,90,36,0.15);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
}
.clientes-fila-texto { display: flex; flex-direction: column; min-width: 0; }
.clientes-nombre { font-weight: 700; color: var(--white); }
.clientes-pedidos-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 6px 10px;
  color: var(--text-body);
  font-size: 0.76rem;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.clientes-pedidos-btn:hover { border-color: var(--orange); transform: translateY(-2px); }
.clientes-pedidos-num { font-size: 1.05rem; font-weight: 800; color: var(--orange); }
.clientes-total-gastado { font-weight: 700; color: var(--green); white-space: nowrap; }
.clientes-fila-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-self: end; }

@media (max-width: 900px) {
  .clientes-fila { grid-template-columns: 1fr auto; row-gap: 10px; }
  .clientes-fila-info { grid-column: 1 / -1; }
  .clientes-fila-acciones { grid-column: 1 / -1; justify-self: start; }
}

/* seller/usuarios.php — misma tarjeta que .clientes-fila, con su propia
   grilla (una columna más: accesos + fecha de registro + menú). */
.usuarios-fila {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 165px 90px 110px 130px 32px;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.usuarios-fila:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(0,0,0,0.35); border-color: rgba(241,90,36,0.35); }
.usuarios-fila-admin { border-color: rgba(255,209,60,0.5); background: rgba(255, 209, 60, 0.06); }
.usuarios-accesos { min-width: 0; }
.usuarios-accesos .pedido-estado { white-space: nowrap; min-width: 0; padding: 5px 12px; }
.usuarios-stat { font-size: 0.86rem; color: var(--text-body); white-space: nowrap; }
.usuarios-stat strong { color: var(--white); }
.usuarios-menu-slot { display: flex; justify-content: flex-end; }
.usuarios-fila .pedido-fecha { white-space: nowrap; }

@media (max-width: 900px) {
  .usuarios-fila { grid-template-columns: 1fr auto; row-gap: 8px; }
  .clientes-fila-info { grid-column: 1 / -1; }
}

/* seller/venta-nueva.php: mismo look lúdico que el modal de franquicias,
   con menos aire entre campos para aprovechar mejor la pantalla. */
.venta-nueva-pagina.cuenta-pagina { padding-top: 26px; }
.venta-nueva-pagina h1 { margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.venta-nueva-pagina .form-subtitle { margin-bottom: 20px; }
.venta-nueva-pagina .seller-editar-card { margin-bottom: 18px; border-radius: 14px; }
.venta-nueva-pagina .seller-editar-card h2,
.venta-productos-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.venta-productos-titulo {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 12px;
}
.venta-btn-pill {
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.venta-btn-pill:hover { transform: translateY(-2px); }
/* seller/franquicias.php: armado de pedido interno + historial. */
.franquicia-pagina { padding-bottom: 100px; }
.franquicia-selector { margin: 16px 0 20px; }
/* La calculadora de margen va en la misma fila que las tiendas, pero
   empujada al extremo: no es un filtro más, es una herramienta aparte. */
.franquicia-calc-btn { margin-left: auto; flex-shrink: 0; }
.franquicia-calc-resultado {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--bg-black-soft);
  border-radius: 14px;
}
.franquicia-calc-linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.88rem;
  color: var(--text-body);
}
.franquicia-calc-linea-tenue { font-size: 0.8rem; color: var(--text-muted); }
.franquicia-calc-linea-fuerte {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-subtle);
  font-size: 1rem;
}
.franquicia-calc-linea-fuerte strong { font-size: 1.25rem; font-weight: 800; color: var(--green); }
.franquicia-calc-linea-fuerte strong.franquicia-calc-perdida { color: var(--red-accent); }
.franquicia-calc-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.franquicia-calc-badge {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  background: rgba(91,194,54,0.14);
  color: var(--green);
}
.franquicia-calc-badge-tenue { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.franquicia-calc-badge-perdida { background: rgba(226,56,77,0.12); color: var(--red-accent); }
.franquicia-calc-nota { margin: 14px 0 0; font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
body.tema-claro .franquicia-calc-badge-tenue { background: rgba(0,0,0,0.05); }
.btn-marcar-pagado,
.btn-marcar-entregado {
  flex-direction: row;
  gap: 6px;
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn-marcar-pagado:hover,
.btn-marcar-entregado:hover { transform: translateY(-2px); }
.btn-marcar-entregado svg { flex-shrink: 0; }
.btn-marcar-pagado-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.7rem;
  line-height: 1;
  flex-shrink: 0;
}
/* El historial reutiliza .marca-resenas (reseñas de marca.php, max-width:720px)
   solo por el estilo del título — acá no debe angostar las tarjetas. */
.franquicia-pagina .marca-resenas { max-width: none; }

/* Modal "Ver detalle" del historial — look propio (más padding, más
   redondeado, con un poco de color) para que se lea amigable, sin tocar el
   modal genérico de avisar-stock que comparte .modal-caja. */
#modal-detalle-pedido .modal-caja { padding: 34px 30px 30px; }
.modal-detalle-cabecera { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.modal-detalle-emoji {
  font-size: 1.7rem;
  line-height: 1;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(241,90,36,0.12);
  border-radius: 50%;
}
.modal-detalle-cabecera h3 { margin: 0 0 4px; padding-right: 0; }
.modal-detalle-fecha { margin: 0; font-size: 0.85rem; color: var(--text-muted); }

.modal-detalle-items {
  list-style: none;
  margin: 0 0 22px;
  padding: 6px 14px;
  background: var(--bg-black-soft);
  border-radius: 14px;
  border-top: none;
}
.modal-detalle-items li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-subtle);
  font-size: 0.88rem;
}
.modal-detalle-items li:last-child { border-bottom: none; }
.modal-detalle-item-cantidad {
  flex-shrink: 0;
  min-width: 34px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(241,90,36,0.15);
  color: var(--orange);
  font-weight: 700;
  font-size: 0.78rem;
}
.modal-detalle-item-nombre { flex: 1 1 auto; color: var(--text-body); min-width: 0; }
.modal-detalle-item-unidad { flex: 0 0 82px; text-align: right; color: var(--text-muted); white-space: nowrap; }
.modal-detalle-item-subtotal { flex: 0 0 82px; text-align: right; font-weight: 700; color: var(--white); white-space: nowrap; }
.modal-detalle-item-cantidad-col { flex: 0 0 34px; text-align: center; }
.modal-detalle-items li.modal-detalle-cols { padding: 6px 0; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.modal-detalle-items li.modal-detalle-cols span { font-weight: 600; color: var(--text-muted); }
@media (max-width: 480px) {
  .modal-detalle-item-unidad, .modal-detalle-item-subtotal { flex-basis: 66px; font-size: 0.8rem; }
}

.modal-detalle-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 22px;
}
.modal-detalle-totales-caja {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.modal-detalle-totales-caja span:first-child { font-size: 0.8rem; color: var(--text-muted); }
.modal-detalle-total-final { font-size: 1.25rem; font-weight: 800; color: var(--white); }
.modal-detalle-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: #25D366;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 13px 22px;
  border-radius: 999px;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.modal-detalle-whatsapp-btn:hover { background: #20BD5A; transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 22px -8px rgba(37,211,102,0.5); }
.modal-detalle-whatsapp-btn:active { transform: translateY(0) scale(1); }

@media (max-width: 480px) {
  #modal-detalle-pedido .modal-caja { padding: 26px 18px 22px; }
  .modal-detalle-pie { justify-content: center; text-align: center; }
  .modal-detalle-whatsapp-btn { width: 100%; justify-content: center; }
}

/* Modal "Agregar producto" (seller/pedido-detalle.php) — busca y agrega vía
   AJAX sin recargar la página. Comparte .modal-overlay/.modal-caja con el
   resto de los modales del panel Seller. */
.modal-buscador-caja { max-width: 640px; }
.modal-buscador-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--white);
  font-size: 0.92rem;
  margin-bottom: 12px;
}
.modal-buscador-input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(241,90,36,0.15);
}
.modal-buscador-marcas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.modal-buscador-resultados {
  list-style: none;
  margin: 0;
  padding: 6px 14px;
  background: var(--bg-black-soft);
  border-radius: 14px;
  max-height: 340px;
  overflow-y: auto;
}
.modal-buscador-resultados li.modal-buscador-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-subtle);
  font-size: 0.85rem;
}
.modal-buscador-resultados li.modal-buscador-item:last-child { border-bottom: none; }
.modal-buscador-item img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: var(--img-frame-bg); flex-shrink: 0; }
.modal-buscador-item-info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.modal-buscador-item-nombre { color: var(--text-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-buscador-item-sabor {
  flex-shrink: 0;
  max-width: 130px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--white);
  font-size: 0.78rem;
}
.modal-buscador-item-cantidad {
  flex-shrink: 0;
  width: 52px;
  text-align: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 6px 4px;
  color: var(--white);
  font-size: 0.85rem;
}
.modal-buscador-cargando { text-align: center; color: var(--text-muted); padding: 20px 0; }
body.tema-claro .modal-buscador-input,
body.tema-claro .modal-buscador-item-sabor,
body.tema-claro .modal-buscador-item-cantidad {
  background: #FFFFFF;
  border-color: #CFCFCF;
  color: var(--text-body);
}
@media (max-width: 480px) {
  .modal-buscador-item { flex-wrap: wrap; }
  .modal-buscador-item-info { flex-basis: 100%; order: -1; }
}

.franquicia-exito {
  background: rgba(91,194,54,0.1);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 20px;
}
.franquicia-exito p { color: var(--green-dark); font-weight: 600; margin: 0 0 10px; }
.franquicia-exito-cuerpo { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.franquicia-resumen { flex: 1 1 280px; min-width: 0; }
.franquicia-resumen-lista { list-style: none; margin: 0 0 10px; padding: 0; border-top: 1px solid rgba(91,194,54,0.3); }
.franquicia-resumen-lista li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(91,194,54,0.3);
  font-size: 0.86rem;
  color: var(--text-body);
}
.franquicia-resumen-lista li span:last-child { font-weight: 700; color: var(--white); white-space: nowrap; }
.franquicia-resumen-totales { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.82rem; color: var(--text-muted); }
.franquicia-resumen-total-final { font-weight: 800; color: var(--white); font-size: 1.1rem; }
.franquicia-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: #25D366;
  border-color: #25D366;
  color: #FFFFFF;
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.franquicia-whatsapp-btn:hover { background: #1ebc59; border-color: #1ebc59; transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(37,211,102,0.5); }

/* Tabla estilo planilla: columnas alineadas, números a la derecha, con
   scroll horizontal en mobile en vez de reacomodar celdas (mantiene la
   sensación de "Excel" en cualquier ancho de pantalla). */
.franquicia-tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 12px; }
.franquicia-tabla { width: 100%; border-collapse: collapse; min-width: 560px; }
/* RUT de la franquicia, destacado para facturar */
.franquicia-titulo-rut { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 14px; row-gap: 4px; }
.franquicia-rut { display: inline-flex; align-items: center; gap: 6px; font-size: 1.25rem; color: #1d5fd6; }
.franquicia-rut-valor { font-weight: 700; letter-spacing: 0.01em; color: inherit; user-select: all; }
.franquicia-rut-copiar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; opacity: 0.7; }
.modal-detalle-titulo-fila { display: flex; align-items: center; flex-wrap: wrap; column-gap: 14px; }
.modal-detalle-titulo-fila h3 { margin: 0; }
.franquicia-rut-modal { font-size: 1.05rem; }
.franquicia-rut-copiar:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }
/* Facturas adjuntas a cada pedido de franquicia: chips a la vista, el
   formulario (N° + archivo) plegado detrás de "+ Registrar factura". */
.franquicia-facturas { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-top: 10px; border-top: 1px dashed var(--border-subtle); }
.fq-facturas-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 36px; }
.fq-facturas-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.fq-facturas-vacio { font-size: 0.84rem; color: var(--text-muted); }
.franquicia-facturas-titulo, .fq-sec-titulo { font-size: 0.74rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.franquicia-factura-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border: 1px solid var(--border-subtle); border-radius: 999px; background: #f7f7f7; font-size: 0.82rem; }
.franquicia-factura-chip a { text-decoration: underline; }
.franquicia-factura-chip form { display: inline; margin: 0; }
.franquicia-factura-quitar { border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 6px; opacity: 0.6; }
.franquicia-factura-quitar:hover { opacity: 1; }
.fq-facturas-wrap[hidden], .fq-facturas-toggle[hidden] { display: none; }
.franquicia-factura-subir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 10px; background: var(--bg-black-soft); border: 1px solid var(--border-subtle); border-radius: 10px; }
.franquicia-factura-folio { font-size: 16px; padding: 8px 10px; width: 170px; max-width: 100%; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-panel); color: var(--white); font-family: inherit; }
.franquicia-factura-folio:focus { outline: none; border-color: var(--green); }
.franquicia-facturas .franq-aviso { align-self: flex-start; }
.franquicia-factura-adjuntar { cursor: pointer; position: relative; overflow: hidden; transition: background 0.3s, color 0.3s, border-color 0.3s; }
/* Relleno de progreso: la etiqueta se va "llenando" con el % subido */
.franquicia-factura-adjuntar.cargando { pointer-events: none; background-image: linear-gradient(90deg, rgba(241,90,36,0.22) var(--p, 0%), transparent var(--p, 0%)); }
.franquicia-factura-adjuntar.listo { pointer-events: none; background: #e8f6ec; border-color: #2e9d55; color: #1d6b34; animation: franqPop 0.35s ease; }
.franq-entrada { animation: franqEntrada 0.45s cubic-bezier(.2,.9,.3,1.3); }
.franq-aviso { font-size: 0.82rem; padding: 3px 10px; border-radius: 999px; animation: franqEntrada 0.3s ease; transition: opacity 0.4s; }
.franq-aviso-ok { background: #e8f6ec; color: #1d6b34; }
.franq-aviso-error { background: #fdecea; color: #a12622; }
.franq-aviso-sale { opacity: 0; }
@keyframes franqEntrada { from { opacity: 0; transform: translateY(6px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes franqPop { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes franqGira { to { transform: rotate(360deg); } }
.franq-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(0,0,0,0.15); border-top-color: var(--orange); border-radius: 50%; animation: franqGira 0.8s linear infinite; vertical-align: -3px; margin-right: 6px; }
/* Pedido de franquicia: cabecera (icono + N° + fecha + total), ítems a la
   vista, 3 pasos como pastillas (pagado / entregado / facturado) y la gestión
   (abonos / facturas) abajo. Todo lo que no se usa a diario va plegado. */
.franquicia-pagina .seller-franquicia-fila.fq-fila { gap: 12px; padding: 16px 18px; }
.fq-top { display: flex; align-items: center; gap: 12px; }
.fq-top .seller-franquicia-info { flex: 1 1 auto; min-width: 0; }
.fq-top .seller-franquicia-nombre { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; font-size: 1.02rem; }
.fq-top .fq-tag-reposicion { margin-left: 0; }
.fq-meta { font-variant-numeric: tabular-nums; }
.fq-meta-parte { white-space: nowrap; }
.fq-total { flex-shrink: 0; align-items: flex-end; min-width: 0; }
.fq-total strong { font-size: 1.35rem; letter-spacing: -0.01em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fq-total small { white-space: nowrap; }
.fq-icono { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; transition: background 0.35s, box-shadow 0.35s; }
.fq-incompleto .fq-icono { background: var(--orange, #f15a24); box-shadow: 0 0 0 4px rgba(241,90,36,0.16); }
.fq-completo .fq-icono { background: #2e9d55; box-shadow: 0 0 0 4px rgba(46,157,85,0.18); }
.fq-completo .fq-icono-pend, .fq-incompleto .fq-icono-ok { display: none; }
.fq-pop { animation: franqPop 0.4s ease; }
/* Plegar / desplegar: los pedidos completos cargan solo con la cabecera */
.fq-plegar { flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s ease, color .15s ease; }
.fq-plegar:hover { background: rgba(0,0,0,.06); color: var(--text); }
.fq-plegar svg { transition: transform .25s ease; }
.fq-plegar[aria-expanded="true"] svg { transform: rotate(180deg); }
.fq-fila.fq-plegado > :not(.fq-top) { display: none; }
.fq-top .seller-franquicia-info:hover .seller-franquicia-nombre { text-decoration: none; }
/* Ítems del pedido, a primera vista (sin abrir el modal) */
.fq-items { list-style: none; margin: 0; padding: 2px 12px; background: var(--bg-black-soft); border: 1px solid var(--border-subtle); border-radius: 12px; }
.fq-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--border-subtle); font-size: 0.86rem; }
.fq-item:last-child { border-bottom: 0; }
.fq-item[hidden] { display: none; }
.fq-item-cant { flex-shrink: 0; min-width: 36px; text-align: center; padding: 2px 7px; border-radius: 999px; background: rgba(241,90,36,0.14); color: var(--orange-dark, #c44a1a); font-weight: 800; font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.fq-item-nombre { flex: 1 1 auto; min-width: 0; color: var(--white); font-weight: 600; overflow-wrap: anywhere; }
.fq-item-nombre em { font-style: normal; font-weight: 500; color: var(--text-muted); }
.fq-item-nombre em::before { content: "· "; }
.fq-item-unit { flex: 0 0 auto; color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fq-item-sub { flex: 0 0 78px; text-align: right; font-weight: 700; color: var(--white); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fq-items-toggle-li { padding: 2px 0 4px; border-bottom: 0; }
.fq-items-toggle { border: 0; background: none; padding: 6px 0; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--orange-dark, var(--orange)); cursor: pointer; }
.fq-items-toggle:hover { text-decoration: underline; }
/* Pasos como pastillas compactas en una sola fila */
.fq-estados { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fq-estado-form { margin: 0; flex: 0 1 auto; max-width: none; min-width: 0; }
.fq-estado { display: inline-flex; align-items: center; gap: 7px; width: 100%; min-height: 36px; padding: 4px 13px 4px 5px; border-radius: 999px; border: 1.5px dashed var(--border-subtle); background: transparent; color: var(--text-muted); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.2s; }
.fq-estado-ico { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,0.06); transition: background 0.25s, color 0.25s; }
.fq-estado-ico svg { width: 14px; height: 14px; }
.fq-estado-txt { display: inline-flex; flex-direction: row; align-items: baseline; gap: 5px; line-height: 1.2; min-width: 0; white-space: nowrap; }
.fq-estado-txt strong { font-size: 0.82rem; }
.fq-estado-txt small { font-size: 0.74rem; opacity: 0.85; }
.fq-estado-txt small::before { content: "· "; }
.fq-estado-txt small:empty { display: none; }
.fq-estado.pendiente:hover { border-color: var(--orange, #f15a24); color: var(--orange, #f15a24); background: rgba(241,90,36,0.06); transform: translateY(-1px); }
.fq-estado.pendiente:hover .fq-estado-ico { background: rgba(241,90,36,0.15); }
.fq-estado.hecho { border: 1.5px solid #2e9d55; background: #e8f6ec; color: #1d6b34; cursor: default; }
.fq-estado.hecho .fq-estado-ico { background: #2e9d55; color: #fff; }
.fq-estado.requiere { cursor: help; }
.franquicia-factura-num { font-size: 0.82rem; }
.franquicia-factura-guardar-num { white-space: nowrap; }
.franq-pulso { animation: franqPulso 1.2s ease; }
@keyframes franqPulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(241,90,36,0); } 30% { box-shadow: 0 0 0 4px rgba(241,90,36,0.35); border-color: var(--orange, #f15a24); } }
.fq-estado.cargando { pointer-events: none; opacity: 0.75; }
.fq-estado.cargando .fq-estado-ico svg { animation: franqGira 0.8s linear infinite; }
.fq-wa-factura { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; border-radius: 999px; background: #25d366; color: #fff; border: 0; padding: 7px 14px; font-weight: 600; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.fq-wa-factura:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(37,211,102,0.8); color: #fff; }
.fq-wa-factura[hidden] { display: none; }
@media (max-width: 560px) {
  .franquicia-pagina .seller-franquicia-fila.fq-fila { padding: 14px; }
  .fq-top { gap: 8px; }
  .fq-total strong { font-size: 1.15rem; }
  .fq-total small { display: none; }
  .fq-item-unit { display: none; }
  .fq-item-sub { flex-basis: 66px; }
  .fq-estado-form { flex: 1 1 auto; }
  .fq-estado { min-height: 40px; }
  .fq-facturas-cab .fq-wa-factura, .fq-facturas-cab .fq-facturas-toggle { flex: 1 1 100%; justify-content: center; }
  .fq-abonos-cab .fq-abonos-toggle { flex: 1 1 100%; }
}
/* Visor de facturas */
.modal-factura-caja { max-width: 920px; width: 96vw; padding: 18px 18px 16px; }
.modal-factura-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-right: 30px; margin-bottom: 10px; }
.modal-factura-cab h3 { margin: 0; }
.modal-factura-abrir { font-size: 0.82rem; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.modal-factura-abrir:hover { color: var(--orange); }
.modal-factura-visor { position: relative; height: min(78vh, 760px); border: 1px solid var(--border-subtle); border-radius: 10px; background: #f3f3f3; overflow: auto; display: flex; align-items: center; justify-content: center; }
.modal-factura-visor iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.modal-factura-visor img { max-width: 100%; max-height: 100%; object-fit: contain; }
.modal-factura-cargando { color: var(--text-muted); font-size: 0.95rem; }
.modal-factura-visor [hidden] { display: none; }
.franq-aparece { animation: franqAparece 0.35s ease; }
@keyframes franqAparece { from { opacity: 0; } to { opacity: 1; } }
.franquicia-factura-flash { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; font-size: 0.88rem; }
.franquicia-factura-flash-ok { background: #e8f6ec; color: #1d6b34; }
.franquicia-factura-flash-error { background: #fdecea; color: #a12622; }
.franquicia-tabla th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 8px 10px;
  border-bottom: 2px solid var(--border-subtle);
  white-space: nowrap;
}
.franquicia-tabla th.num, .franquicia-tabla td.num { text-align: right; }
.franquicia-tabla td { padding: 7px 10px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; font-size: 0.86rem; transition: background 0.2s var(--ease-fast); }
.franquicia-fila-agregada td { background: rgba(91,194,54,0.12); }
.franquicia-marca-fila td {
  background: var(--bg-black-soft);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--orange);
  font-weight: 700;
  padding: 6px 10px;
}
.franquicia-col-producto { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.franquicia-col-producto img { border-radius: 6px; object-fit: contain; background: var(--img-frame-bg); flex-shrink: 0; }
.franquicia-col-producto span { display: flex; flex-direction: column; color: var(--white); font-weight: 600; }
.franquicia-agregado-badge { font-size: 0.72rem; font-weight: 700; color: var(--green); }
.franquicia-col-costo, .franquicia-col-total-linea { white-space: nowrap; font-variant-numeric: tabular-nums; }
.franquicia-col-total-linea { font-weight: 700; color: var(--white); }
.franquicia-producto-cantidad { margin: 0; }
.franquicia-producto-cantidad .producto-cantidad-btn { width: 28px; height: 32px; }
.franquicia-producto-cantidad .producto-cantidad-input { width: 38px; height: 32px; }
.franquicia-stock-bajo { color: var(--red-accent); font-weight: 700; }
.venta-precio-actual { display: block; }
.venta-tramos-hint { display: block; font-size: 0.68rem; color: var(--green); font-weight: 600; white-space: nowrap; }
.franquicia-col-stock { padding-right: 18px !important; border-right: 1px solid var(--border-subtle); }

/* Switch verde/gris para activar-desactivar un producto de la lista de
   franquicia (ver franquicia_switch() en el PHP). Es un <button> que se
   autoenvía — funciona sin JS. */
.franquicia-form-switch { margin: 0; }
.franquicia-switch {
  position: relative;
  width: 38px; height: 21px;
  border-radius: 999px;
  border: none;
  background: #C7C7C7;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.2s var(--ease-fast);
}
.franquicia-switch.activo { background: var(--green); }
.franquicia-switch-bola {
  position: absolute;
  top: 2px; left: 2px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.2s var(--ease-fast);
}
.franquicia-switch.activo .franquicia-switch-bola { transform: translateX(17px); }

/* Versión chica del switch, para el que va por sabor (fila ya angosta). */
.franquicia-switch-chico { width: 30px; height: 17px; }
.franquicia-switch-chico .franquicia-switch-bola { width: 13px; height: 13px; }
.franquicia-switch-chico.activo .franquicia-switch-bola { transform: translateX(13px); }

/* Fila de un producto (o un sabor puntual) desactivado: atenuada,
   cantidad deshabilitada. */
.franquicia-fila-inactiva td:not(:last-child) { opacity: 0.45; }
.franquicia-fila-inactiva .franquicia-producto-cantidad,
.franquicia-fila-inactiva .franquicia-btn-agregar { pointer-events: none; }

/* Productos con varios sabores: fila resumen + filas individuales
   colapsadas por defecto. El triángulo funciona como un "brote" que
   crece hacia abajo (rota 90°) al desplegar, pegado a la imagen. */
.franquicia-toggle-sabores,
.franquicia-toggle-spacer {
  width: 24px; height: 24px; flex-shrink: 0;
}
.franquicia-toggle-sabores {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(241,90,36,0.14);
  border: none; border-radius: 50%; cursor: pointer;
  color: var(--orange);
  padding: 0;
  transition: background 0.2s var(--ease-fast);
}
.franquicia-toggle-sabores:hover { background: rgba(241,90,36,0.28); }
.franquicia-toggle-flecha { display: inline-block; font-size: 0.85rem; transition: transform 0.2s var(--ease-fast); }
.franquicia-toggle-sabores.active .franquicia-toggle-flecha { transform: rotate(90deg); }
.franquicia-sabores-count { font-weight: 400; color: var(--text-muted); font-size: 0.8rem; }
/* toggle/spacer (24px) + gap(10px) + imagen (34px) + gap(10px) = donde
   arranca el texto del producto — los sabores se indentan hasta ahí para
   quedar alineados bajo el nombre, no bajo la imagen. */
.franquicia-fila-sabor .franquicia-col-producto { padding-left: 78px; min-width: 142px; }
.franquicia-nombre-sabor { font-weight: 500 !important; color: var(--text-body) !important; }

.franquicia-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
  padding: 10px 100px 10px 24px; /* espacio a la derecha para no taparse con el botón flotante de WhatsApp */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
.franquicia-footer #franquicia-registrar-btn { min-width: 260px; padding: 14px 30px; }
.franquicia-footer-totales { display: flex; flex-direction: column; gap: 1px; font-size: 0.76rem; color: var(--text-muted); }
.franquicia-footer-totales strong { color: var(--white); font-variant-numeric: tabular-nums; }
.franquicia-footer-total-final { font-size: 0.92rem; color: var(--text-body); }
.franquicia-footer-total-final strong { font-size: 1.1rem; }

@media (max-width: 600px) {
  .franquicia-footer { padding: 8px 84px 8px 14px; }
  .franquicia-footer #franquicia-registrar-btn { min-width: 0; padding: 12px 20px; }
  .franquicia-footer-totales { font-size: 0.7rem; }
  .franquicia-footer-total-final strong { font-size: 1rem; }
  .franquicia-footer-resumen { font-size: 0.75rem; }

  /* Las columnas fijas de .seller-franquicia-fila-top no entran en pantallas
     chicas — se apilan en 2 columnas parejas en vez de una grilla rígida. */
  .seller-franquicia-fila-top { grid-template-columns: 1fr 1fr; }
  .seller-franquicia-info { grid-column: 1 / -1; }
  .seller-franquicia-fila-acciones { justify-content: flex-start; }
}

@media (max-width: 420px) {
  .franquicia-footer { flex-direction: column; align-items: stretch; gap: 8px; padding-right: 84px; }
  .franquicia-footer #franquicia-registrar-btn { width: 100%; }
  .franquicia-footer-totales { flex-direction: row; justify-content: space-between; }
}

@media (max-width: 720px) {
  /* La tabla de armar pedido (franquicia_switch, cantidad por producto) obligaba
     a hacer scroll horizontal en el celular para llegar a la cantidad — acá se
     transforma en tarjetas apiladas por producto, todo visible sin scroll lateral. */
  .franquicia-tabla-wrap { overflow-x: visible; }
  .franquicia-tabla { min-width: 0; }
  .franquicia-tabla thead { display: none; }
  .franquicia-tabla, .franquicia-tabla tbody, .franquicia-tabla tr { display: block; width: 100%; }
  .franquicia-tabla td { display: block; padding: 0; border-bottom: none; }

  .franquicia-marca-fila { margin-top: 10px; }
  .franquicia-marca-fila td { padding: 6px 4px; }

  .franquicia-tabla tr.franquicia-producto-header,
  .franquicia-tabla tr.franquicia-producto-fila {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    grid-template-areas:
      "producto producto producto producto switch"
      "stock    costo    .        cantidad total";
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border-subtle);
  }
  /* El botón "▶ N sabores" sigue colapsando/expandiendo igual que en desktop:
     display:grid de arriba es una regla de autor y por sí sola pisaría el
     display:none que el navegador aplica a [hidden] — sin esto, en el celular
     se verían todos los sabores desplegados de una, ignorando el toggle. */
  .franquicia-tabla tr[hidden] { display: none !important; }
  .franquicia-tabla td.franquicia-col-producto { display: flex; grid-area: producto; min-width: 0; }
  .franquicia-col-switch { grid-area: switch; justify-self: end; }

  /* Stock y precio como "chips" pegados al producto, en vez de texto plano
     suelto a la izquierda de la tarjeta — quedan justo bajo la imagen (o
     bajo el nombre del sabor, con la misma indentación que él) para que se
     lean como un dato del producto y no como una columna aparte. */
  .franquicia-col-stock, .franquicia-col-costo {
    grid-area: stock;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    /* Con nombres de producto largos, la columna "auto" de este chip a
       veces se comprimía para dejarle espacio al nombre y el número
       terminaba partido en 2 líneas — min-width:max-content la fija al
       ancho real del chip pase lo que pase con el resto de la fila. */
    min-width: max-content;
    gap: 12px;
    width: fit-content;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    padding: 5px 10px !important;
    border-right: none !important;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-body);
  }
  body.tema-claro .franquicia-col-stock, body.tema-claro .franquicia-col-costo { background: rgba(0,0,0,0.05); }
  .franquicia-col-costo { grid-area: costo; }
  /* El ícono va en una caja fija de 14x14 — sin esto, cada emoji trae su
     propia métrica de línea (algunos más altos que otros según la fuente)
     y los chips de stock/precio terminaban con alturas distintas. */
  .franquicia-col-stock::before, .franquicia-col-costo::before {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; overflow: hidden;
    font-size: 12px; line-height: 1; flex-shrink: 0;
  }
  .franquicia-col-stock::before { content: "📦"; }
  .franquicia-col-costo::before { content: "💰"; }
  .franquicia-col-stock.franquicia-stock-bajo { background: rgba(226,56,77,0.14); }
  .franquicia-col-cantidad { grid-area: cantidad; }
  .franquicia-col-total-linea { grid-area: total; text-align: right; min-width: 56px; }
  .franquicia-producto-header td[colspan] { display: none; }

  .franquicia-tabla tr.franquicia-fila-sabor td.franquicia-col-producto { padding-left: 44px; min-width: 0; }
  /* La fila de sabor no tiene imagen (se reemplaza por la indentación de
     arriba) — el chip de stock arranca alineado con el nombre del sabor,
     no con el borde de la tarjeta, para que se lea como su dato. */
  .franquicia-tabla tr.franquicia-fila-sabor .franquicia-col-stock { margin-left: 44px; }

  /* Tap-targets un poco más grandes que en desktop — con dedo en vez de mouse. */
  .franquicia-producto-cantidad .producto-cantidad-btn { width: 41px; height: 43px; }
  .franquicia-producto-cantidad .producto-cantidad-input { width: 50px; height: 43px; }

  /* Imagen del producto +73% en total sobre los 34px de desktop (34 -> 41 -> 49 -> 59px). */
  .franquicia-col-producto img { width: 59px; height: 59px; }

  /* El verde de "producto agregado" pintaba cada <td> por separado (cajas
     angostas, una por celda) — en la tarjeta de mobile eso se veía parchado.
     Ahora se pinta la tarjeta completa (el <tr>, que acá es el grid) y se
     apaga el fondo individual de cada celda para no duplicar el tono. */
  .franquicia-tabla tr.franquicia-fila-agregada { background: rgba(91,194,54,0.12); }
  .franquicia-tabla tr.franquicia-fila-agregada td { background: transparent; }
}

/* seller/pedidos.php: listado compacto estilo Shopify (una fila por pedido,
   sin items) — seller/pedido-detalle.php trae el detalle completo. */
.seller-pedidos-tabla { display: flex; flex-direction: column; gap: 8px; }
.seller-pedidos-ver-mas-wrap { text-align: center; margin-top: 20px; }
/* .seller-pedido-fila-compacta define su propio display:grid, que le gana
   al display:none por defecto del atributo [hidden] — sin esto, "Ver más
   pedidos" no ocultaba nada al cargar la página. */
.seller-pedido-fila-compacta[hidden] { display: none; }
.seller-pedido-fila-compacta {
  display: grid;
  grid-template-columns: 110px 1fr 90px 1fr 100px 150px 32px;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-panel);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s var(--ease-fast), transform 0.2s var(--ease-fast);
}
.seller-pedido-fila-clickeable { cursor: pointer; }
.seller-pedido-fila-compacta:hover { border-color: var(--orange); transform: translateY(-1px); }
.seller-pedido-fila-compacta .pedido-numero-destacado { text-decoration: none; }
.seller-pedido-fila-compacta .pedido-numero-destacado:hover { text-decoration: underline; }
.seller-pedido-fila-header {
  padding: 0 16px;
  border: none;
  background: none;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.seller-pedido-fila-atencion { border-color: rgba(255,209,60,0.5); background: rgba(255, 209, 60, 0.06); }
.seller-pedido-marcas-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.seller-pedido-marcas-badges .filtro-pill { pointer-events: none; padding: 3px 10px; font-size: 0.72rem; }
.seller-pedido-total-compacto { font-weight: 700; color: var(--green); white-space: nowrap; }

@media (max-width: 900px) {
  .seller-pedido-fila-header { display: none; }
  .seller-pedido-fila-compacta { grid-template-columns: 1fr auto; row-gap: 6px; }
  .seller-pedido-marcas-badges, .seller-pedido-fila-compacta > span:nth-child(2) { grid-column: 1 / -1; }
}

/* seller/pedido-detalle.php — inspirado en el order detail de Shopify:
   título + badge de estado + acciones arriba, 2 columnas abajo (items a la
   izquierda, cliente/dirección a la derecha, ver .seller-editar-layout). */
.seller-pedido-detalle-titulo-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.seller-pedido-detalle-pagina .seller-producto-editar-titulo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.seller-pedido-detalle-pagina .seller-editar-top > a.btn {
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.seller-pedido-detalle-pagina .seller-editar-top > a.btn:hover { transform: translateX(-2px); }
.seller-pedido-detalle-acciones { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.seller-pedido-detalle-acciones .btn {
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.seller-pedido-detalle-acciones .btn:hover { transform: translateY(-2px); }
.seller-pedido-detalle-pagina .pedidos-list .pedido-card { background: none; border: none; padding: 0; border-radius: 0; }

/* Registro de actividad — al final de todo, a propósito nada destacado:
   solo un respaldo de quién hizo qué y cuándo, en letra chica y apagada. */
.seller-pedido-log { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.seller-pedido-log-titulo { margin: 0 0 6px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); opacity: 0.7; }
.seller-pedido-log-lista { list-style: none; margin: 0; padding: 0; }
.seller-pedido-log-lista li { font-size: 0.72rem; color: var(--text-muted); opacity: 0.7; line-height: 1.7; }
.seller-pedido-accion-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.seller-pedido-total-card { display: flex; align-items: center; justify-content: space-between; font-size: 1.05rem; font-weight: 700; color: var(--white); }
.seller-pedido-total-card .pedido-total { color: var(--green); }
.seller-pedido-cliente-datos { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: var(--text-body); }
.seller-pedido-whatsapp-cliente-btn {
  flex-direction: row;
  width: fit-content;
  padding: 8px 16px;
  font-size: 0.8rem;
  margin-top: 6px;
}

.seller-pedido-comuna-destacada { font-size: 1.15rem; font-weight: 800; color: var(--white); margin: 0 0 4px; }

/* Fila/encabezado de grilla exclusivos de la hoja impresa (Producto | Marca
   | Cant. | Valor unit.) — ver seller/pedido-detalle.php. En pantalla no se
   usan (la vista de edición ya tiene su propio layout con foto + stepper). */
.seller-pedido-item-print-header, .seller-pedido-item-print-row { display: none; }

/* Hoja para entregar al cliente/repartidor: sin sidebar ni fotos, cliente y
   dirección arriba (comuna primero, es lo que más le importa a quien
   despacha), sin fondos de color para no gastar tinta de más. */
@media print {
  @page { size: auto; margin: 10mm; }

  .seller-sidebar, .seller-pedido-detalle-acciones, .site-header, .site-footer, .cenefa-anuncios, .whatsapp-float, .no-imprimir, .pedido-estado { display: none !important; }
  .seller-layout { display: block; padding: 0 !important; max-width: none; }
  .seller-main { width: 100%; }
  .pedido-card { border: none; box-shadow: none; padding: 0; }
  .seller-page { padding: 0 !important; }
  .seller-editar-top { margin-bottom: 8px !important; }
  .seller-pedido-detalle-titulo-fila { margin-top: 0 !important; }

  /* Orden de lectura para el repartidor/cliente: Pedido N°, Cliente,
     Dirección, y recién ahí el detalle de productos — por eso el sidebar
     (Cliente + Dirección) va con order:-1 antes que el principal (items).
     Se usa flex + order (no basta con el orden del HTML) porque más abajo
     en este mismo archivo, @media (max-width:900px) define
     .seller-editar-layout y .seller-editar-sidebar con la MISMA
     especificidad, y al ser una hoja impresa más angosta que 900px esa
     media query también se activa al imprimir — sin !important esa regla
     (por ir después en el archivo) le gana a esta. */
  .seller-editar-layout { display: flex !important; flex-direction: column !important; }
  .seller-editar-principal { margin-top: 0 !important; order: 1 !important; display: flex !important; gap: 6px !important; }
  .seller-editar-sidebar { margin-bottom: 6px !important; order: -1 !important; display: flex !important; gap: 6px !important; }

  .seller-pedido-item-info,
  .seller-pedido-item-stock,
  .seller-pedido-item-check,
  .seller-pedido-items-header,
  .seller-pedido-marca-heading,
  .seller-pedido-accion-card,
  .fila-menu,
  .pedido-card-chevron { display: none !important; }

  /* Compactado vertical: la hoja debe alcanzar para 1 sola página. Texto
     más chico, espacios entre tarjetas/filas reducidos al mínimo. */
  body, .pedido-fecha, .seller-pedido-cliente-datos, .pedido-items { font-size: 11px !important; }
  .seller-producto-editar-eyebrow { display: none !important; }
  .seller-producto-editar-titulo { font-size: 1.05rem !important; margin-bottom: 4px !important; }
  .seller-editar-card h2 { font-size: 0.8rem !important; margin-bottom: 4px !important; padding-bottom: 2px !important; border-bottom: none !important; }
  .seller-pedido-cliente-datos { gap: 1px !important; }
  .seller-pedido-comuna-destacada { font-size: 0.95rem !important; margin: 0 0 1px !important; }
  .pedido-items.seller-pedido-items li { padding: 1px 0 !important; }

  /* La marca ya no se agrupa bajo un encabezado grande (se ocultó arriba):
     va como una columna más, discreta, junto al nombre del producto —
     el nombre del producto queda levemente más grande que el resto. */
  .seller-pedido-item-print-header, .seller-pedido-item-print-row {
    display: grid !important;
    grid-template-columns: 34px 1fr 100px 70px 50px;
    gap: 4px 10px;
    align-items: baseline;
  }
  .seller-pedido-item-print-header {
    font-size: 8px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #666 !important;
    padding-bottom: 1px;
    border-bottom: 1px solid #ccc !important;
    margin-bottom: 2px;
  }
  .seller-pedido-item-print-header span:nth-child(1),
  .seller-pedido-item-print-cantidad { text-align: center; }
  .seller-pedido-item-print-header span:nth-child(4),
  .seller-pedido-item-print-valor { text-align: right; }
  .seller-pedido-item-print-header span:nth-child(5),
  .seller-pedido-item-print-dscto { text-align: right; }
  .seller-pedido-item-print-nombre { font-size: 12.5px !important; font-weight: 700 !important; }
  .seller-pedido-item-print-marca { font-size: 9.5px !important; color: #555 !important; }
  .seller-pedido-item-print-cantidad { font-size: 11px !important; font-weight: 700 !important; }
  .seller-pedido-item-print-valor { font-size: 11px !important; white-space: nowrap; }
  .seller-pedido-item-print-dscto { font-size: 9.5px !important; color: #555 !important; white-space: nowrap; }

  /* Sin cajas ni sombras: solo texto ordenado, para no gastar tinta ni
     mostrar líneas que no aportan al repartidor/cliente. */
  * { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .seller-editar-card { border: none !important; padding: 0 0 4px !important; margin-bottom: 4px !important; }
  .seller-pedido-comuna-destacada { border: none !important; padding: 0; }
  .seller-pedido-total-card { border-top: 1px solid #000 !important; padding-top: 4px !important; font-size: 0.95rem !important; }
}
.admin-datos-check {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: 999px;
  background: var(--bg-black-soft); color: var(--text-muted);
}
.admin-datos-check svg { display: none; }
.admin-datos-check-ok { background: var(--green); color: #FFFFFF; }
.admin-datos-check-ok svg { display: block; }

.seller-marca-estado {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--bg-black-soft);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 22px;
}
.seller-marca-logo-col { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.seller-marca-logo-box {
  width: 96px; height: 96px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
}
.seller-marca-logo-box img { width: 100%; height: 100%; object-fit: contain; }
.seller-marca-logo-pendiente {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--text-muted);
}
.seller-marca-logo-pendiente span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; }
.seller-form-plano .seller-logo-btn.seller-logo-btn {
  display: inline-block;
  width: 96px;
  text-align: center;
  padding: 7px 0;
  font-size: 0.72rem;
  cursor: pointer;
}
.seller-logo-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.seller-marca-datos { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.seller-marca-estado-nombre { display: block; font-weight: 700; font-size: 1.5rem; color: var(--white); letter-spacing: 0.01em; margin-bottom: 4px; }
.seller-dato-fila { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); }
.seller-dato-icono { display: flex; color: var(--border-subtle); }
.seller-dato-fila.seller-dato-ok { color: var(--text-body); }
.seller-dato-fila.seller-dato-ok .seller-dato-icono { color: var(--green); }
.seller-dato-label { min-width: 130px; }
.seller-dato-valor { font-weight: 600; }
.seller-marca-final { margin-top: 6px; }

/* Páginas de gestión del panel Seller (mi marca, productos): se sacan de la
   caja/tarjeta angosta de .form-col (pensada para login/registro) y usan un
   layout más ancho y directo, sobre todo pensado para desktop. */
.seller-page { padding: 40px 0 80px; }
.seller-page .container { max-width: 860px; }
.seller-form-plano {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  max-width: 860px;
}
.seller-form-plano::before, .seller-form-plano::after { display: none; }
.seller-form-plano h3 { font-size: 1.5rem; margin-bottom: 6px; }
.seller-form-plano .form-subtitle { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 26px; }
.seller-form-plano .form-row { gap: 20px; }
.seller-form-plano .form-field input,
.seller-form-plano .form-field select,
.seller-form-plano .form-field textarea { padding: 12px 14px; }
.seller-form-plano .btn { width: auto; padding: 13px 34px; }
.seller-form-seccion {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--orange);
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.seller-form-seccion:first-of-type { margin-top: 0; }

/* Menú lateral izquierdo del panel Seller (includes/seller-sidebar.php),
   estilo admin de Shopify. Envuelve el <section> propio de cada página; el
   <div class="container"> que tenía cada una se sacó (el ancho ya lo da
   .seller-main), así que si alguna página necesita un tope de ancho propio
   se le pone directo a su selector (ver .seller-form-plano, más abajo). */
.seller-layout {
  max-width: var(--container);
  margin: 0 auto;
  padding: 32px 24px 80px;
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.seller-sidebar {
  width: 200px;
  flex-shrink: 0;
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 18px 0;
}
.seller-sidebar-header { padding: 0 18px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--border-subtle); }
.seller-sidebar-nombre { font-weight: 700; font-size: 0.9rem; color: var(--white); overflow-wrap: break-word; }
.seller-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.seller-sidebar-divider { height: 1px; background: var(--border-subtle); margin: 8px 18px; }
.seller-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.seller-sidebar-link svg { flex-shrink: 0; }
.seller-sidebar-badge {
  margin-left: auto;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--orange);
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 800;
}
/* Mismo amarillo que el badge "Pendiente pago" — para "Franquicias", cuyo
   número son pedidos pendientes de pago o sin entregar. */
.seller-sidebar-badge-amarilla { background: #F2B705; color: #17181B; }
/* Cantidad simple entre paréntesis (Productos/Clientes) — a diferencia de
   .seller-sidebar-badge, esto no es una alerta, así que va sin burbuja: solo
   texto chico y apagado. */
.seller-sidebar-cantidad { color: var(--text-muted); font-size: 0.78rem; font-weight: 400; }
.cuenta-acceso-globo { margin-left: 6px; vertical-align: middle; }
.seller-sidebar-link:hover { background: var(--bg-black-soft); color: var(--text-body); }
.seller-sidebar-link.active { color: var(--orange); border-left-color: var(--orange); background: rgba(255,255,255,0.03); }
.seller-sidebar-cliente { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.seller-sidebar-link-alerta { font-weight: 800; color: var(--orange); }
.seller-sidebar-link-alerta:hover { color: var(--orange); }
.seller-sidebar-logout {
  margin: 10px 18px 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: none;
}
.seller-sidebar-logout:hover { color: var(--red-accent); }
.seller-main { flex: 1; min-width: 0; }

@media (max-width: 900px) {
  .seller-layout { flex-direction: column; padding: 16px 16px 60px; gap: 16px; }
  .seller-sidebar { width: 100%; position: static; padding: 8px 0; }
  .seller-sidebar-header { display: none; }
  .seller-sidebar-nav { flex-direction: row; overflow-x: auto; padding: 0 8px; gap: 2px; }
  .seller-sidebar-link { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; padding: 8px 14px; }
  .seller-sidebar-link.active { border-left-color: transparent; border-bottom-color: var(--orange); }
  .seller-sidebar-logout { margin: 0 8px; border-top: none; padding: 8px 6px; }
  /* En la fila horizontal de mobile, una línea de 1px de alto no separa
     nada — se convierte en un separador vertical angosto en vez de eso. */
  .seller-sidebar-divider { width: 1px; height: auto; align-self: stretch; margin: 4px 6px; flex-shrink: 0; }
}

/* producto-editar.php: layout en dos columnas al estilo del editor de
   productos de Shopify (tarjetas apiladas a la izquierda, estado y
   organización en la barra lateral derecha). */
.seller-editar-page .container-ancho { max-width: 1080px; }
.seller-editar-top { margin-bottom: 18px; }
.seller-editar-top .btn-chico { margin-bottom: 14px; }
.seller-editar-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}
.seller-editar-principal { display: flex; flex-direction: column; gap: 16px; }
.seller-editar-sidebar { display: flex; flex-direction: column; gap: 16px; }
.seller-editar-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 20px;
}
.seller-editar-card h2 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.seller-editar-card .form-field:last-child { margin-bottom: 0; }
.seller-editar-card .form-subtitle { font-size: 0.82rem; color: var(--text-muted); margin: -8px 0 16px; }

/* Buscador de SKU Bsale (producto-editar.php, solo superadmin): input +
   botón en una fila, y el resultado como una píldora de color según qué tan
   apurado está el stock — misma idea que los badges de margen. */
.seller-bsale-buscar-fila { display: flex; gap: 8px; }
.seller-bsale-buscar-fila input { flex: 1 1 auto; min-width: 0; }
.seller-bsale-buscar-fila .btn { flex-shrink: 0; width: auto; white-space: nowrap; }
.seller-bsale-stock-badge {
  display: inline-block;
  margin: 4px 0 12px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}
.seller-bsale-stock-badge.bsale-stock-alto { background: rgba(91,194,54,0.14); color: var(--green); }
.seller-bsale-stock-badge.bsale-stock-medio { background: rgba(26,115,232,0.14); color: var(--blue); }
.seller-bsale-stock-badge.bsale-stock-bajo { background: rgba(241,90,36,0.14); color: var(--orange); }
.seller-bsale-stock-badge.bsale-stock-agotado { background: rgba(226,56,77,0.12); color: var(--red-accent); }

/* Editor enriquecido de "Descripción larga" (producto-editar.php): un
   contenteditable + toolbar que arma el mismo look que los <input> de
   .form-field, pero con foco propio (:focus-within, porque el foco real
   cae en .editor-enriquecido-contenido, no en el wrapper). */
.editor-enriquecido {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  overflow: hidden;
}
.editor-enriquecido:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(241,90,36,0.15);
}
.editor-enriquecido-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.02);
}
.editor-enriquecido-toolbar button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.78rem;
  color: var(--text-body);
  cursor: pointer;
  white-space: nowrap;
}
.editor-enriquecido-toolbar button:hover { border-color: var(--border-subtle); background: rgba(255,255,255,0.06); }
.editor-enriquecido-contenido {
  min-height: 160px;
  padding: 13px 14px;
  color: var(--white);
  font-size: 0.92rem;
  line-height: 1.6;
}
.editor-enriquecido-contenido:focus { outline: none; }
.editor-enriquecido-contenido p { margin: 0 0 10px; }
.editor-enriquecido-contenido ul, .editor-enriquecido-contenido ol { margin: 0 0 10px 20px; }
.editor-enriquecido-contenido h3 { font-size: 1.05rem; margin: 0 0 8px; }
.editor-enriquecido-contenido table { border-collapse: collapse; margin: 0 0 10px; }
.editor-enriquecido-contenido table td, .editor-enriquecido-contenido table th { border: 1px solid var(--border-subtle); padding: 6px 10px; }

/* Tiles de imagen estilo Shopify: miniaturas cuadradas + un tile "+" al
   final que abre el picker nativo (el <input type="file"> real está oculto). */
.imagen-tiles-fila { display: flex; flex-wrap: wrap; gap: 10px; }
.imagen-tile {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 8px;
  flex-shrink: 0;
  overflow: hidden;
}
.imagen-tile img { width: 100%; height: 100%; object-fit: contain; background: var(--img-frame-bg); }
.imagen-tile-quitar {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(23,24,27,0.75);
  color: #FFFFFF;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.imagen-tile-quitar:hover { background: var(--red-accent); }
.imagen-tile-agregar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1.5px dashed var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-fast), color 0.2s var(--ease-fast);
}
.imagen-tile-agregar:hover { border-color: var(--orange); color: var(--orange); }
.imagen-tile-agregar span { font-size: 0.7rem; font-weight: 600; }
.imagen-input-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.importar-suples-preview {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  background: var(--bg-black-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  margin-top: 8px;
}
.importar-suples-preview img { width: 70px; height: 70px; object-fit: contain; background: var(--img-frame-bg); border-radius: 6px; flex-shrink: 0; }
.importar-suples-preview-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.importar-suples-preview-datos strong { color: var(--white); font-size: 0.95rem; }
.importar-suples-preview-datos span { color: var(--orange); font-weight: 700; font-size: 0.9rem; }
.importar-suples-preview-datos p { font-size: 0.8rem; color: var(--text-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.importar-suples-preview-acciones { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.importar-suples-preview-acciones .btn { width: auto; padding: 8px 16px; font-size: 0.8rem; }

/* Libreta de direcciones de envío en mis-datos.php */
.direcciones-lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.direccion-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-black-soft);
}
.direccion-item-activa { border-color: var(--green); background: rgba(91,194,54,0.06); }
.direccion-item-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.direccion-item-etiqueta { font-weight: 700; font-size: 0.88rem; color: var(--white); display: flex; align-items: center; gap: 8px; }
.direccion-item-badge {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700;
  color: var(--green); background: rgba(91,194,54,0.14);
  padding: 2px 8px; border-radius: 999px;
}
.direccion-item-texto { font-size: 0.82rem; color: var(--text-muted); overflow-wrap: break-word; }
.direccion-item-acciones { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.direccion-item-acciones form { display: contents; }
.btn-eliminar-direccion {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.btn-eliminar-direccion:hover { color: var(--red-accent); border-color: var(--red-accent); }

.direccion-agregar { border-top: 1px solid var(--border-subtle); padding-top: 14px; }
.direccion-agregar summary {
  cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--orange);
  list-style: none;
}
.direccion-agregar summary::-webkit-details-marker { display: none; }
.direccion-agregar-form { margin-top: 14px; }
.direccion-agregar-form .btn { margin-top: 4px; }
.seller-editar-principal .btn { width: auto; padding: 13px 34px; align-self: flex-start; }

.seller-seo-preview {
  display: block;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.seller-seo-preview-url { display: block; font-size: 0.78rem; color: var(--green); margin-bottom: 3px; }
.seller-seo-preview-titulo { display: block; font-size: 1.05rem; color: #8AB4F8; margin-bottom: 3px; }
.seller-seo-preview-desc { display: block; font-size: 0.82rem; color: var(--text-muted); }

@media (max-width: 900px) {
  .seller-editar-layout { grid-template-columns: 1fr; }
  .seller-editar-sidebar { order: -1; }
}

@media (max-width: 720px) {
  .seller-page .container { max-width: 100%; }
  .seller-form-plano .btn { width: 100%; }
  .seller-editar-principal .btn { width: 100%; }
}

.cuenta-acceso-marca { gap: 14px; }
.seller-marca-mini { display: flex; gap: 14px; align-items: center; width: 100%; }
.seller-marca-mini-datos { flex: 1; min-width: 0; }
.seller-marca-mini-logo {
  flex-shrink: 0;
  width: 84px; height: 84px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-black-soft);
  display: flex; align-items: center; justify-content: center;
}
.seller-marca-mini-logo img { width: 100%; height: 100%; object-fit: contain; }
.seller-marca-mini-inicial {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem;
  color: #FFFFFF;
  text-transform: uppercase;
}
.marca-avatar-color-0 { background: linear-gradient(135deg, #F15A24, #FDD208); }
.marca-avatar-color-1 { background: linear-gradient(135deg, #1A73E8, #5BC2FF); }
.marca-avatar-color-2 { background: linear-gradient(135deg, #5BC236, #A8E063); }
.marca-avatar-color-3 { background: linear-gradient(135deg, #9C27B0, #E040FB); }
.marca-avatar-color-4 { background: linear-gradient(135deg, #E2384D, #FF8A80); }
.marca-avatar-color-5 { background: linear-gradient(135deg, #00897B, #4DD0E1); }

.seller-imagen-sugerencia { display: block; margin-top: 6px; font-size: 0.75rem; color: var(--text-muted); }
.seller-margen-badge { text-transform: none; letter-spacing: normal; font-weight: 700; color: var(--green); }

.seller-productos-acciones-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.seller-productos-buscador { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seller-productos-buscador input[type="text"] {
  width: 220px;
  padding: 8px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text-body);
  font-size: 0.85rem;
}
.seller-paginador { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.seller-paginador-nota { font-size: 0.82rem; color: var(--text-muted); }
.seller-paginador span[aria-disabled] { opacity: 0.4; pointer-events: none; }
.btn-chico {
  width: auto;
  padding: 9px 16px;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-color: var(--border-subtle);
}
.btn-chico:hover { color: var(--text-body); border-color: var(--input-hover-border); background: transparent; box-shadow: none; }
.seller-productos-tabla { display: flex; flex-direction: column; gap: 6px; }
.seller-producto-fila {
  display: grid;
  grid-template-columns: 44px 1fr 100px 90px 90px 60px 90px 22px 36px;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-panel);
}
.seller-producto-fila-header {
  padding: 0 16px 4px;
  border: none;
  background: none;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.seller-producto-col-img { display: block; }
.seller-producto-col-img img {
  width: 44px; height: 44px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--bg-black-soft);
}
.seller-producto-col-nombre { display: block; text-decoration: none; min-width: 0; }
.seller-producto-nombre { font-size: 0.99rem; font-weight: 700; color: var(--white); white-space: normal; overflow-wrap: break-word; }
.seller-producto-col-nombre:hover .seller-producto-nombre { color: var(--orange); }
.seller-producto-sku { display: block; font-size: 0.74rem; font-weight: 400; color: var(--text-muted); margin-top: 1px; }
.seller-producto-col-marca { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.seller-producto-editar-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.seller-producto-editar-titulo {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 18px;
}
.seller-producto-col-precio { font-size: 0.9rem; color: var(--green); font-weight: 700; white-space: nowrap; }
.seller-producto-col-pvp { font-size: 0.9rem; color: var(--text-body); white-space: nowrap; }
.seller-producto-fila:not(.seller-producto-fila-header) .seller-producto-col-pvp { font-size: 0.78rem; }
.seller-producto-col-margen { font-size: 0.9rem; color: var(--text-muted); white-space: nowrap; }
.seller-producto-col-margen.seller-margen-alto { color: var(--green); font-weight: 700; }
.seller-producto-col-margen.seller-margen-medio { color: var(--orange); }
.seller-producto-col-margen.seller-margen-bajo { color: var(--red-accent); }

.seller-producto-fila-incompleta { background: rgba(255, 209, 60, 0.09); }
.seller-campo-faltante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--red-accent);
  border-radius: 50%;
  padding: 3px 10px;
  justify-self: start;
}
.seller-producto-col-stock { font-size: 0.9rem; color: var(--text-muted); white-space: nowrap; }
.seller-producto-fila-stock-bajo { background: rgba(255, 221, 87, 0.13); }
.seller-producto-col-stock.seller-producto-stock-bajo { color: var(--red-accent); font-weight: 700; }

.seller-producto-estado-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  cursor: default;
  justify-self: center;
}
.seller-producto-estado-dot.activo { background: var(--green); }
.seller-producto-estado-dot.inactivo { background: var(--text-muted); }
.seller-producto-estado-dot::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-black);
  color: var(--white);
  font-size: 0.72rem;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 30;
}
.seller-producto-estado-dot:hover::after { opacity: 1; visibility: visible; }

.seller-producto-menu { position: relative; justify-self: end; }
.seller-producto-menu-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.seller-producto-menu-btn:hover { background: var(--bg-black-soft); color: var(--white); }
.seller-producto-menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  min-width: 150px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 20;
}
.seller-producto-menu:hover .seller-producto-menu-dropdown,
.seller-producto-menu.open .seller-producto-menu-dropdown { display: block; }
.seller-producto-menu-dropdown a,
.seller-producto-menu-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--text-body);
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
}
.seller-producto-menu-dropdown form { margin: 0; }
.seller-producto-menu-dropdown a:hover,
.seller-producto-menu-dropdown button:hover { background: var(--bg-black-soft); color: var(--orange); }

@media (max-width: 720px) {
  .seller-producto-fila-header { display: none; }
  .seller-producto-fila { grid-template-columns: 44px 1fr auto auto; row-gap: 6px; }
  .seller-producto-col-marca, .seller-producto-col-precio, .seller-producto-col-pvp, .seller-producto-col-margen, .seller-producto-col-stock { grid-column: 2; }
  .seller-producto-estado-dot, .seller-producto-menu { grid-column: auto; }
  /* En mobile se esconde el encabezado de columnas — sin la palabra "Stock"
     antes del número, quedaría un número suelto sin contexto entre el resto
     de los valores apilados. */
  .seller-producto-col-stock::before { content: "Stock: "; }
}
.seller-marca-mini-datos h3 { margin: 0 0 6px; font-size: 0.95rem; }
.seller-marca-mini-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.seller-marca-mini-lista li { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--text-muted); }
.pedido-marcas { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 10px; }
.pedido-items { list-style: none; padding: 0; margin: 0 0 10px; color: var(--text-body); font-size: 0.88rem; }
.pedido-items li { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.pedido-items li img { width: 44px; height: 44px; object-fit: contain; background: var(--bg-black-soft); border-radius: 8px; flex-shrink: 0; }
.pedido-despacho { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 4px; }
.pedido-despacho strong { color: var(--white); }
.pedido-total { font-weight: 700; color: var(--white); font-size: 1.1rem; }

/* ========================================
   CARRITO.PHP (revisión agrupada por marca)
   ======================================== */
.carrito-pagina { padding: 40px 0 130px; }
.carrito-pagina h1 { margin-bottom: 8px; }
.carrito-pagina-subtitulo { color: var(--text-muted); margin-bottom: 32px; }
.carrito-items-agrupado-pagina { margin-bottom: 32px; }
/* Fijo abajo en toda resolución (no solo mobile) para que el total y el
   botón de continuar siempre estén visibles sin tener que scrollear, sin
   ocupar mucha altura. */
.carrito-pagina-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
  padding: 14px 100px 14px 24px; /* espacio a la derecha para no taparse con el botón flotante de WhatsApp */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
.carrito-pagina-footer .carrito-total-row { flex-direction: column; align-items: flex-end; gap: 2px; }
.carrito-pagina-footer .carrito-total-row span { font-size: 0.8rem; color: var(--text-muted); }
.carrito-pagina-footer .carrito-total-row strong { font-size: 1.2rem; color: var(--white); }
.carrito-pagina-footer .btn { min-width: 0; padding: 12px 26px; }

/* ========================================
   CARRITO (drawer)
   ======================================== */
.carrito-icono {
  position: relative;
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-body);
  cursor: pointer;
}
/* Visible siempre en el header, pero sin acción mientras no haya sesión
   (el carrito no tiene modo invitado, vive ligado a un usuario logueado). */
.carrito-icono:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.carrito-icono:hover { border-color: var(--orange); color: var(--orange); }
.carrito-icono-mobile { display: none; }
.carrito-contador {
  position: absolute;
  top: -8px; right: -8px;
  background: var(--orange);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

.carrito-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
}
.carrito-overlay.open { display: block; }

.carrito-drawer {
  position: fixed;
  top: 0; right: 0;
  bottom: 0;
  width: 440px;
  max-width: 90vw;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-subtle);
  box-shadow: -12px 0 40px rgba(0,0,0,0.3);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
}
.carrito-drawer.open { transform: translateX(0); }

.carrito-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
}
.carrito-drawer-header h3 { font-size: 1.1rem; }
.carrito-cerrar {
  background: none; border: none; cursor: pointer;
  font-size: 1.6rem; line-height: 1;
  color: var(--text-muted);
}
.carrito-cerrar:hover { color: var(--orange); }

.carrito-items { flex: 1; overflow-y: auto; padding: 16px 24px; }
.carrito-vacio { color: var(--text-muted); font-size: 0.85rem; text-align: center; margin-top: 20px; }

/* Producto estrella cuando el carrito está vacío (drawer y carrito.php) —
   los datos ya vienen calculados server-side (includes/footer.php), así que
   esto es puro CSS/HTML, sin request ni librería extra. */
.carrito-vacio-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 4px 4px 20px; }
.carrito-promo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 22px 18px;
  background: linear-gradient(165deg, var(--bg-panel) 0%, var(--bg-black-soft) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  animation: carritoPromoAparecer 0.4s ease both;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.carrito-promo-card:hover { transform: translateY(-3px); border-color: var(--orange); }
.carrito-promo-badge {
  display: inline-block;
  background: var(--orange);
  color: var(--bg-black);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.carrito-promo-img { width: 110px; height: 110px; object-fit: contain; margin-bottom: 10px; }
.carrito-promo-marca { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.carrito-promo-nombre { display: block; font-weight: 700; font-size: 0.92rem; margin: 3px 0 6px; color: var(--white); }
.carrito-promo-precio { display: block; color: var(--green); font-weight: 700; font-size: 1rem; margin-bottom: 10px; }
.carrito-promo-cta { display: block; font-size: 0.8rem; color: var(--orange); font-weight: 600; }

@keyframes carritoPromoAparecer {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .carrito-promo-card { animation: none; }
}

/* Vista agrupada por marca — solo vive en carrito.php.
   Cada marca es una fila de columnas (check | marca | fotos | resumen |
   mínimo) para leer varias marcas sin tanto scroll vertical; el detalle
   de productos queda colapsado hasta que se pide "Revisar productos". */
.carrito-marca-grupo {
  max-width: 1100px;
  margin: 0 auto 20px;
  padding: 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-panel);
}
.carrito-marca-grupo:last-child { margin-bottom: 0; }

.carrito-marca-fila {
  display: grid;
  grid-template-columns: 28px 150px 1fr 220px 200px;
  gap: 20px;
  align-items: center;
}

.carrito-marca-col-check input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--orange); }
.carrito-marca-col-check input:disabled { cursor: not-allowed; opacity: 0.4; }

.carrito-marca-col-nombre h4 { font-size: 1rem; color: var(--white); margin-bottom: 2px; }
.carrito-marca-col-nombre h4 a { color: inherit; text-decoration: none; }
.carrito-marca-col-nombre h4 a:hover { color: var(--orange); text-decoration: underline; }
.carrito-marca-col-nombre span { font-size: 0.8rem; color: var(--text-muted); }

.carrito-marca-full-icono {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  background: var(--bg-green-panel);
  color: var(--green-dark);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 999px;
}

.producto-full-badge { margin: 0; }
.producto-full-badge .carrito-marca-full-icono { font-size: 0.76rem; padding: 4px 10px; gap: 5px; }

.carrito-marca-col-fotos { display: flex; flex-wrap: wrap; gap: 6px; }
.carrito-marca-col-fotos img {
  width: 44px; height: 44px;
  object-fit: contain;
  background: var(--img-frame-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 3px;
  box-sizing: border-box;
}

.carrito-marca-col-resumen p { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 4px; }
.carrito-marca-col-resumen p:last-child { margin-bottom: 0; }
.carrito-marca-col-resumen .resumen-valor { text-align: right; white-space: nowrap; }
.carrito-marca-col-resumen strong { color: var(--white); font-weight: 700; }

.carrito-marca-col-minimo .carrito-progreso { margin-bottom: 6px; }
.carrito-marca-msg { font-size: 0.78rem; color: var(--red-accent); margin: 0; }
.carrito-marca-msg-ok { color: var(--green); }

.carrito-marca-toggle {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  color: var(--orange);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  margin-top: 16px;
}
.carrito-marca-toggle-flecha { display: inline-block; transition: transform 0.2s var(--ease-fast); }
.carrito-marca-toggle.active .carrito-marca-toggle-flecha { transform: rotate(180deg); }

@keyframes carritoAtencionShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.atencion-shake { animation: carritoAtencionShake 0.5s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .atencion-shake { animation: none; }
}

.carrito-marca-detalle {
  margin-top: 14px;
  padding: 14px 16px;
  border-top: 1px solid var(--border-subtle);
  background: rgba(0,0,0,0.035);
  border-radius: var(--radius);
}

.carrito-marca-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 4px 32px;
}

.carrito-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.carrito-item img {
  width: 56px; height: 56px;
  object-fit: contain;
  background: var(--img-frame-bg);
  border-radius: 4px;
  padding: 4px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.carrito-item-info { flex: 1; min-width: 0; }
.carrito-item-nombre { font-size: 0.88rem; color: var(--white); margin-bottom: 4px; }
.carrito-item-sabor { font-size: 0.76rem; color: var(--orange); margin-bottom: 4px; }
.seller-pedido-item-sabor {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--orange);
  background: rgba(241,90,36,0.12);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
}
.carrito-item-full-tag {
  display: inline-block;
  background: var(--bg-green-panel);
  color: var(--green-dark);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
}
.carrito-item-precio { font-size: 0.82rem; color: var(--text-muted); }
.carrito-item-qty { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.carrito-qty-btn {
  width: 30px; height: 30px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-body);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
}
.carrito-qty-btn:hover { border-color: var(--orange); color: var(--orange); }
.carrito-item-cantidad { font-size: 0.8rem; min-width: 18px; text-align: center; }
.carrito-item-subtotal { font-size: 0.9rem; font-weight: 700; color: var(--white); white-space: nowrap; }
.carrito-item-quitar {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
  padding: 4px;
}
.carrito-item-quitar:hover { color: var(--red-accent); }

.carrito-drawer-footer { padding: 18px 24px 24px; border-top: 1px solid var(--border-subtle); }
.carrito-envio { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 10px; }
.carrito-full-progreso-wrap { margin-bottom: 14px; }
.carrito-full-progreso-wrap .carrito-progreso { margin-bottom: 6px; }
.carrito-full-progreso-wrap .carrito-marca-msg { margin: 0; }

.carrito-progreso {
  width: 100%;
  height: 6px;
  background: var(--bg-black-soft);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.carrito-progreso-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--red-accent);
  transition: width 0.3s var(--ease-fast), background-color 0.3s var(--ease-fast);
}
.carrito-progreso-fill.nivel-medio { background: #F2B705; }
.carrito-progreso-fill.nivel-completo { background: var(--green); }

/* Se reproduce una sola vez justo al cruzar el mínimo de compra (no en cada
   re-render del carrito mientras ya está completo). */
@keyframes carritoMinimoPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
@keyframes carritoMinimoGlow {
  0% { box-shadow: 0 0 0 0 rgba(91,194,54,0.55); }
  100% { box-shadow: 0 0 0 12px rgba(91,194,54,0); }
}
.carrito-progreso-fill.recien-completo { animation: carritoMinimoGlow 0.7s var(--ease-fast); }
.carrito-marca-msg-ok.recien-completo { animation: carritoMinimoPop 0.4s var(--ease); transform-origin: left center; }

/* Mientras el mínimo ya está listo pero el usuario todavía no marca el check
   para incluir esa marca en el pedido, el check "llama la atención" en loop
   (se detiene solo al tildarlo). */
@keyframes carritoCheckLlama {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}
.carrito-marca-checkbox:not(:disabled):not(:checked) {
  animation: carritoCheckLlama 1.8s ease-in-out infinite;
}

.carrito-listo-msg {
  color: var(--green);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}
@keyframes carritoListoMsgIn {
  0% { opacity: 0; transform: translateX(10px) scale(0.85); }
  60% { opacity: 1; transform: translateX(0) scale(1.08); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.carrito-listo-msg-anim { animation: carritoListoMsgIn 0.45s var(--ease); }

.carrito-total-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  font-size: 1rem;
}
.carrito-total-row strong { color: var(--white); font-size: 1.25rem; }
#carrito-continuar:disabled { opacity: 0.5; cursor: not-allowed; }

.filtros-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.filtro-search input {
  background: var(--bg-black-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  max-width: 100%;
  padding: 10px 16px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  min-width: 220px;
}
.filtro-search input:focus { outline: none; border-color: var(--orange); }
.filtro-search { position: relative; }
.filtro-search-icono {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  opacity: 0.6;
  pointer-events: none;
}
.filtro-search input { padding-left: 38px; }
.nav-search { flex: 1 1 auto; min-width: 120px; max-width: none; }
.nav-search input { width: 100%; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.buscador-movil-fijo { display: none; }
.filtro-grupo { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro-pill {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.8rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s var(--ease-fast), color 0.2s var(--ease-fast), background 0.2s var(--ease-fast);
}
.filtro-pill:hover { border-color: var(--orange); color: var(--white); }
.filtro-pill.active { background: var(--blue); border-color: var(--blue); color: var(--white); }
/* Burbuja de pedidos pendientes dentro de una pastilla (ej. tienda de
   seller/franquicias.php) — mismo amarillo que el badge "Pendiente pago". */
.filtro-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: #F2B705;
  color: #17181B;
  font-size: 0.74rem;
  font-weight: 800;
  vertical-align: middle;
}

/* Buscador/filtros destacados dentro del hero de distribucion.php */
.dist-hero-filtros {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin-top: 12px;
}
.dist-hero-filtros .filtro-search { width: 100%; }
.dist-hero-filtros .filtro-search input {
  width: 100%;
  font-size: 1.05rem;
  padding: 16px 20px;
  text-align: center;
}
.dist-hero-filtros .filtro-grupo { justify-content: center; }

.filtros-avanzados { display: none; text-align: right; align-self: stretch; width: 100%; min-width: 0; }
.filtros-avanzados summary {
  cursor: pointer;
  list-style: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.filtros-avanzados summary::-webkit-details-marker { display: none; }
.filtros-avanzados summary:hover { color: var(--white); }
.filtros-avanzados-chevron { font-size: 0.65rem; transition: transform 0.2s var(--ease-fast); }
.filtros-avanzados[open] .filtros-avanzados-chevron { transform: rotate(180deg); }
.filtros-avanzados .filtro-grupo { justify-content: center; margin-top: 8px; }
.filtros-avanzados .filtro-grupo + .filtro-grupo { margin-top: 6px; }

/* ========================================
   THEME CLARO — distribucion.php + auth/*.php
   ======================================== */
body.tema-claro {
  /* Antes las 3 quedaban en blanco puro y las tarjetas/paneles se perdían
     contra el fondo de la página. Se deja --bg-panel blanco (las tarjetas
     siguen siendo la superficie "más clara", igual que en el tema oscuro)
     y --bg-black/--bg-black-soft con un gris muy tenue para que se note el
     contorno de cada contenedor sin ser un cambio de tema fuerte. */
  --bg-black: #F5F5F6;
  --bg-black-soft: #FAFAFB;
  --bg-panel: #FFFFFF;
  --bg-green-panel: #EAF6E6;
  --border-subtle: #E5E5E5;
  --white: #17181B;
  --text-body: #2B2B2B;
  --text-muted: #55524A;
  --img-frame-bg: #FFFFFF;
  --input-hover-border: #C7C7C7;
  /* --orange, --orange-dark, --green, --green-dark, --red-accent: sin cambios */
}

/* Texto naranja/verde sobre el nuevo fondo claro necesita más contraste que el
   accent puro (fondos, bordes e íconos siguen usando --orange/--green tal cual). */
body.tema-claro .eyebrow { color: var(--orange-dark); }
body.tema-claro .eyebrow-nutri { color: var(--green-dark); }
body.tema-claro .btn-outline { color: var(--orange-dark); }
body.tema-claro .producto-precio-mayorista { color: var(--green-dark); }
body.tema-claro .producto-login-link,
body.tema-claro .dist-auth-link:hover,
body.tema-claro .auth-alt-link a:not(.btn) { color: var(--orange-dark); }
body.tema-claro .auth-exito p { color: var(--green-dark); }

/* Botones con fondo naranja: texto blanco literal (no var(--white),
   que en este scope está remapeada a casi-negro). */
body.tema-claro .btn-primary,
body.tema-claro .btn-agregar-carrito,
body.tema-claro .filtro-pill.active,
body.tema-claro .form-field select option:hover { color: #FFFFFF; }

/* Los inputs usan un fondo blanquecino translúcido pensado para fondo oscuro
   (rgba(255,255,255,.03)) — en tema claro eso los deja casi invisibles sobre
   el fondo ya claro de la tarjeta, hay que darles fondo/borde propios. */
body.tema-claro .form-field input,
body.tema-claro .form-field select,
body.tema-claro .form-field textarea {
  background: #FFFFFF;
  border-color: #CFCFCF;
}
body.tema-claro .form-field input:hover,
body.tema-claro .form-field select:hover,
body.tema-claro .form-field textarea:hover {
  background: #FFFFFF;
  border-color: #ADADAD;
}
body.tema-claro .form-field input:focus,
body.tema-claro .form-field select:focus,
body.tema-claro .form-field textarea:focus {
  background: #FFFFFF;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(26,115,232,0.15);
}
body.tema-claro .seller-seo-preview { background: var(--bg-black); }

body.tema-claro .editor-enriquecido { background: #FFFFFF; border-color: #CFCFCF; }
body.tema-claro .editor-enriquecido-toolbar { background: #F5F5F5; border-color: #CFCFCF; }
body.tema-claro .editor-enriquecido-toolbar button:hover { background: #EDEDED; border-color: #CFCFCF; }
body.tema-claro .editor-enriquecido-contenido { color: #1A1A1A; }
body.tema-claro .editor-enriquecido-contenido table td,
body.tema-claro .editor-enriquecido-contenido table th { border-color: #CFCFCF; }
body.tema-claro .editor-enriquecido:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(26,115,232,0.15); }

/* Header y footer: antes se mantenían negros a propósito sin importar el
   theme (fondo oscuro hardcodeado en .site-header). Ahora pasan a amarillo
   #FDD208 con texto oscuro, igual que el resto del sitio. */
body.tema-claro .site-header {
  /* Opaco: antes era 0.97 y solo dejaba pasar un 3%, invisible en la práctica,
     pero obligaba a componer transparencia sobre todo lo que pasara debajo. */
  background: #FDD208;
  border-bottom-color: rgba(0,0,0,0.08);
}

@media (min-width: 721px) {
  body.tema-claro .main-nav a { color: #2B2B2B; }
  body.tema-claro .main-nav a:hover { color: #000000; }
  body.tema-claro .btn-nav-cta { color: #FFFFFF; }
  body.tema-claro .dist-auth-name { color: #2B2B2B; }
  body.tema-claro .main-nav .btn-outline { color: #17181B; border-color: #17181B; }
  body.tema-claro .main-nav .btn-outline:hover { background: rgba(0,0,0,0.08); border-color: #000000; }

  /* Header de distribucion.php y sus páginas interiores: los links de
     navegación quedan pegados al logo (izquierda) y el grupo de
     sesión/carrito se empuja al borde derecho del header. */
  body.tema-claro .main-nav { justify-content: flex-start; }
}

/* El ícono hamburguesa y el del carrito NO están dentro de .main-nav —
   viven siempre sobre la barra del header, en cualquier ancho
   (a diferencia del nav, que en mobile se despliega sobre un panel claro).
   Por eso estos 2 van SIN media query. */
body.tema-claro .hamburger span { background: #17181B; }
body.tema-claro .hamburger:hover span { background: #000000; }
body.tema-claro .carrito-icono { border-color: rgba(0,0,0,0.3); color: #2B2B2B; }
body.tema-claro .carrito-icono:hover { border-color: #000000; color: #000000; }

/* El hero y la grilla de productos del catálogo mantienen fondo blanco
   (como antes), en vez del amarillo #FDD208 que ahora usa el resto de las
   secciones (header, footer). */
body.tema-claro .dist-hero { background: var(--bg-black); }
body.tema-claro .dist-brand-section { background: var(--bg-black); }
body.tema-claro .producto-pagina { background: var(--bg-black); }

/* El footer también pasa a amarillo #FDD208 con texto oscuro, igual que el
   header — antes se reseteaba a oscuro a propósito, ya no aplica. */
body.tema-claro .site-footer {
  --bg-black-soft: #FDD208;
  --border-subtle: rgba(0,0,0,0.15);
  --text-muted: #55524A;
}
body.tema-claro .footer-links a:hover,
body.tema-claro .footer-social a:hover { color: #000000; }

.dist-testimonios-track {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 780px;
  margin: 0 auto;
}

.dist-form-section { padding: 80px 0; background: var(--bg-black-soft); }
.dist-form-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.dist-form-grid .faq-col {
  background: linear-gradient(165deg, var(--bg-panel) 0%, var(--bg-black-soft) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 36px 32px;
}
.dist-form-grid .faq-col h3 { font-size: 1.25rem; margin-bottom: 22px; }
.dist-form-grid .faq-question { font-size: 0.94rem; }
.dist-form-grid .faq-item:last-of-type { border-bottom: none; }
.dist-seller-center-btn { margin-top: 24px; width: 100%; text-align: center; }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 980px) {
  .split-section { grid-template-columns: 1fr; }
  .split-media { height: 260px; }
  .proceso-grid { grid-template-columns: repeat(3, 1fr); }
  .calidad-grid { grid-template-columns: 1fr; }
  .testimonios-track { grid-template-columns: repeat(2, 1fr); }
  .paraquien-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-contact-grid { grid-template-columns: 1fr; }
  .dist-form-grid { grid-template-columns: 1fr; }
  .admin-solicitud-cols { grid-template-columns: 1fr; gap: 16px; }
  .condiciones-grid { grid-template-columns: repeat(2, 1fr); }
  .productos-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

@media (max-width: 720px) {
  .carrito-marca-fila { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .carrito-marca-col-resumen { width: 100%; }
  .carrito-marca-col-minimo { width: 100%; }

  /* La barra fija ya viene del estilo base (todas las resoluciones); acá
     solo se ajustan tamaños/paddings para que quepa cómodo en mobile. */
  .carrito-pagina { padding-bottom: 100px; }
  .carrito-pagina-footer {
    padding: 10px 84px 10px 16px; /* espacio a la derecha para no taparse con el botón flotante de WhatsApp */
    gap: 12px;
    justify-content: flex-start;
  }
  /* Sin espacio para el mensaje "¡Todo listo!" además del botón y el total —
     el botón ya avisa que está listo cambiando su propio texto. */
  .carrito-listo-msg { display: none; }
  .carrito-pagina-footer .carrito-total-row { gap: 0; align-items: flex-start; }
  .carrito-pagina-footer .carrito-total-row span { font-size: 0.68rem; }
  .carrito-pagina-footer .carrito-total-row strong { font-size: 1.1rem; }
  .carrito-pagina-footer .btn { padding: 12px 20px; font-size: 0.85rem; }

  .main-nav {
    position: fixed;
    top: 68px; left: 0; right: 0;
    z-index: 20;
    background: var(--bg-black-soft);
    flex-direction: column;
    align-items: stretch;
    padding: 20px 24px;
    gap: 18px;
    border-bottom: 1px solid var(--border-subtle);
    transform: translateY(-150%);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    /* Sin esto, si el contenido (categorías + login abierto) supera el alto
       de la pantalla, la parte de abajo queda fuera del viewport y, al ser
       fixed, no hay forma de llegar a ella haciendo scroll de la página. */
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main-nav.open { transform: translateY(0); opacity: 1; }
  .main-nav-categorias { display: flex; flex-direction: column; gap: 16px; }
  .nav-session-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-left: 0;
    padding-top: 18px;
    border-top: 1px solid var(--border-subtle);
  }
  .hamburger { display: flex; }
  .btn-nav-cta { display: none; }
  .carrito-icono-nav { display: none; }
  .carrito-icono-mobile { display: flex; }

  .trust-bar-home { display: none; }
  .trust-grid { grid-template-columns: 1fr; max-width: 340px; }
  .proceso-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonios-track { grid-template-columns: 1fr; }
  .testimonios-track .testimonio-card:nth-child(n+4) { display: none; }
  .paraquien-grid { grid-template-columns: 1fr; }
  .condiciones-grid { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
  .dist-testimonios-track { grid-template-columns: 1fr; }
  .productos-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .hero-inner { padding: 80px 20px 40px; }
  .split-panel { padding: 48px 24px; }
  .logo-img {height:41px;}
  .logo {padding-left:10px; padding-top:8px;}
  .header-inner {padding:6px 20px 6px 10px;}
  .nav-search { display: none; }
  .buscador-movil-fijo {
    display: flex;
    width: 100%;
    max-width: 100%;
    padding: 8px 12px 12px;
    box-sizing: border-box;
  }
  .buscador-movil-fijo input { width: 100%; }
  .site-header {min-height: 92px;}
  .site-header.header-compacto {min-height: 44px;}
  .site-header.header-compacto .header-inner {padding:2px 20px 2px 10px;}
  .cuenta-accesos { grid-template-columns: 1fr; }
  .cuenta-acceso-mobile-oculto { display: none; }
  .trust-item p {font-size:1.1rem}
  .trust-item strong {font-size:1.2rem}
  .auth-page { padding: 33px 0 24px; }

  /* registro.php tiene 2 campos más que login.php (nombre + confirmar
     contraseña) — comprime un poco más el formulario para que entre
     mejor en el primer pantallazo en mobile. */
  .auth-page-registro .form-col { padding: 24px 24px 28px; }
  .auth-page-registro .form-col h3 { margin-bottom: 4px; }
  .auth-page-registro .form-col .form-subtitle { margin-bottom: 14px; }
  .auth-page-registro .form-field { margin-bottom: 10px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }

  /* Optimización mobile de distribucion.php: acercar la grilla de
     productos al primer pantallazo (sin scroll). */
  .dist-hero-texto { padding: 28px 0 20px; }
  .dist-hero h1 { margin: 0 0 10px; }
  .seller-hero-grid { grid-template-columns: 1fr; }
  .seller-hero-texto p { max-width: 480px; margin: 0 auto 16px; text-align: center; }
  .seller-hero-texto h4 { text-align: center; }
  .seller-hero-lista { max-width: 280px; margin: 0 auto 22px; }
  .dist-hero p { margin: 0 auto 16px; }
  .dist-hero-filtros { margin-top: 4px; }

  .dist-brand-section { padding: 32px 0; }
  .dist-brand-section .desc { margin-bottom: 16px; }

  .filtro-grupo {
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px;
  }
  .filtro-grupo::-webkit-scrollbar { display: none; }
  .dist-hero-filtros .filtro-grupo { justify-content: flex-start; }

  /* Optimizacion mobile de producto.php: acercar el boton de agregar al
     carrito al primer pantallazo (sin scroll). */
  .producto-pagina { padding: 12px 0 40px; }
  .producto-detalle { grid-template-columns: 1fr; gap: 16px; }
  .producto-detalle-imagen { position: static; top: auto; padding: 12px; }
  .producto-detalle-imagen img { max-height: 220px; }
  .producto-detalle-info .eyebrow { margin-bottom: 6px; }
  .producto-detalle-info h1 { margin-bottom: 4px; }
  .producto-sku { margin-bottom: 10px; }
  .producto-detalle-descripcion { margin-top: 20px; padding-top: 14px; margin-bottom: 14px; }
  .producto-sabores { margin-bottom: 12px; }
  .producto-detalle-info .producto-precio-mayorista { margin-top: 6px; }
  .producto-cantidad { margin-top: 12px; }
  .producto-detalle-info .producto-cantidad + .btn-agregar-carrito { margin-top: 10px; }
  .producto-compra-fila { flex-direction: column; margin-top: 12px; }
  .producto-compra-fila .producto-cantidad { margin-top: 0; }
  .producto-compra-fila .btn-agregar-carrito { max-width: none; width: 100%; }
}

@media (max-width: 480px) {
  .productos-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .producto-card { padding: 5px; }
  .producto-card img { padding: 4px; }
  .producto-card h4 { font-size: 0.88rem; }
  .producto-precio-publico { font-size: 0.92rem; }
  .producto-precio-mayorista .precio-valor { font-size: 1.21rem; }
}

/* ========================================
   COLECCION.PHP — productos de una colección
   ======================================== */
.coleccion-pagina { padding: 22px 0 80px; }
.coleccion-pagina .producto-volver { margin-bottom: 10px; }
.coleccion-titulo { margin: 6px 0 18px; }

/* ========================================
   MARCAS.PHP — listado de todas las marcas
   ======================================== */
.marcas-pagina { padding: 40px 0 80px; text-align: center; }
.marcas-pagina h1 { margin-bottom: 6px; }
.marcas-subtitulo { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 36px; }
.marcas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
  text-align: left;
}
.marca-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  text-decoration: none;
  text-align: center;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease-fast);
}
.marca-card:hover { transform: translateY(-4px); border-color: var(--orange); }
.marca-card-logo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--img-frame-bg);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.marca-card-logo img { width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; }
.marca-card-logo-inicial { font-size: 1.9rem; font-weight: 800; color: var(--text-muted); }
.marca-card-nombre { font-size: 0.88rem; font-weight: 700; color: var(--white); }

/* ========================================
   MARCA.PHP — ficha pública de marca
   ======================================== */
.marca-pagina { padding: 22px 0 80px; }
.marca-pagina .producto-volver { margin-bottom: 10px; }
.marca-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  margin-bottom: 24px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}
.marca-hero-logo {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--img-frame-bg);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.marca-hero-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
.marca-hero-logo-inicial { font-size: 1.7rem; font-weight: 800; color: var(--text-muted); }
.marca-hero-info h1 { margin-bottom: 6px; }
.marca-hero-descripcion { color: var(--text-body); font-size: 0.95rem; line-height: 1.55; max-width: 640px; margin-bottom: 8px; }
.marca-estrellas-resumen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.estrella { color: var(--border-subtle); }
.estrella-llena { color: var(--orange); }
.marca-estrellas-texto { color: var(--text-muted); font-size: 0.85rem; margin-left: 4px; }

.marca-seccion-titulo { font-size: 1.2rem; margin-bottom: 14px; }

.marca-resenas { margin-top: 32px; max-width: 720px; }
.marca-resena-exito { color: var(--green-dark); font-size: 0.9rem; margin-bottom: 16px; }
.marca-resena-login { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 20px; }
.marca-resena-login a { color: var(--orange); text-decoration: underline; }

.marca-resena-form {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 28px;
}
.marca-resena-estrellas-input {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  font-size: 1.8rem;
  margin-bottom: 12px;
}
.marca-resena-estrellas-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.marca-resena-estrellas-input label { cursor: pointer; color: var(--border-subtle); line-height: 1; transition: color 0.15s ease; }
.marca-resena-estrellas-input input:checked ~ label,
.marca-resena-estrellas-input label:hover,
.marca-resena-estrellas-input label:hover ~ label { color: var(--orange); }
.marca-resena-form textarea {
  width: 100%;
  min-height: 80px;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-body);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  box-sizing: border-box;
}
.marca-resena-form textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(241,90,36,0.15);
}
body.tema-claro .marca-resena-form textarea { background: #FFFFFF; border-color: #CFCFCF; }
body.tema-claro .marca-resena-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(26,115,232,0.15); }
.marca-resena-btn { width: auto; padding: 11px 26px; }

.marca-resenas-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.marca-resena-item { padding-bottom: 18px; border-bottom: 1px solid var(--border-subtle); }
.marca-resena-item:last-child { border-bottom: none; padding-bottom: 0; }
.marca-resena-item-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.marca-resena-autor { font-weight: 700; color: var(--white); font-size: 0.9rem; }
.marca-resena-fecha { color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; }
.marca-resena-estrellas { display: flex; gap: 2px; margin-bottom: 6px; }
.marca-resena-comentario { color: var(--text-body); font-size: 0.9rem; line-height: 1.5; margin: 0; }

@media (max-width: 640px) {
  .marca-hero { flex-direction: column; text-align: center; padding: 24px 20px; }
  .marca-hero-descripcion { margin-left: auto; margin-right: auto; }
  .marca-estrellas-resumen { justify-content: center; }
}
/* ---------------------------------------------------------------
   Menú de tres puntos para quitar filas (historial de franquicias
   y solicitudes de seller). "Quitar" oculta, nunca borra.
   --------------------------------------------------------------- */
.seller-historial-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.seller-historial-toggle {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.seller-historial-toggle:hover { color: var(--orange); border-bottom-color: currentColor; }

.fila-menu { position: relative; flex: 0 0 auto; }
.fila-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.fila-menu-btn:hover,
.fila-menu-btn[aria-expanded="true"] { background: rgba(0,0,0,.06); color: var(--text); }

.fila-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 148px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.fila-menu-panel[hidden] { display: none; }
.fila-menu-panel form { margin: 0; }
.fila-menu-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 6px;
  background: none;
  font: inherit;
  /* 16px para que iOS no haga zoom si el menú queda sobre un input */
  font-size: 0.9rem;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.fila-menu-item:hover { background: rgba(0,0,0,.06); }

/* Dentro de <summary> el cursor por defecto es de toggle: lo corregimos. */
summary .fila-menu, summary .fila-menu * { cursor: pointer; }

/* Quitar/Restaurar/Marcar pagado por AJAX (ver .fila-menu-form-ajax en
   js/script.js): la fila se desvanece suave en vez de que la página
   recargue de golpe. */
.fila-desapareciendo {
  transition: opacity 0.25s ease, transform 0.25s ease;
  opacity: 0;
  transform: scale(0.97) translateY(-4px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .fila-desapareciendo { transition: none; opacity: 0; }
}

@media (max-width: 600px) {
  .fila-menu-panel { min-width: 132px; }
  .seller-historial-cabecera { align-items: flex-start; }
}


/* ========================================
   CARGAS AMIGABLES (sutiles)
   - Botones ocupados: spinner + leve pulso mientras corre la acción.
   - Fotos: aparecen con un fundido suave al terminar de cargar.
   - Tarjetas: entran con un fundido corto al mostrarse (cambio de página).
   ======================================== */
button.is-loading, .btn.is-loading { cursor: progress; opacity: 0.88; animation: cargaPulso 1.2s ease-in-out infinite; }
button.is-loading::before, .btn.is-loading::before {
  content: '';
  display: inline-block;
  width: 0.95em; height: 0.95em;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.12em;
  animation: productoImgSpin 0.7s linear infinite;
}
/* El corazón de favoritos no lleva texto: late en vez de mostrar spinner. */
.producto-favorito.is-loading::before { display: none; }
.producto-favorito.is-loading svg { animation: cargaLatido 0.8s ease-in-out infinite; }
@keyframes cargaPulso { 0%, 100% { opacity: 0.88; } 50% { opacity: 0.6; } }
@keyframes cargaLatido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

.producto-img-wrap img { animation: cargaFundido 0.4s ease-out both; }
@keyframes cargaFundido { from { opacity: 0; } to { opacity: 1; } }
.producto-card { animation: cargaEntrada 0.3s ease-out backwards; }
@keyframes cargaEntrada { from { opacity: 0.35; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  button.is-loading, .btn.is-loading, .producto-favorito.is-loading svg,
  .producto-img-wrap img, .producto-card { animation: none; }
  button.is-loading::before, .btn.is-loading::before { animation-duration: 1.6s; }
}


/* ========================================
   BANNER DE COOKIES
   ======================================== */
.cookies-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 400; display: flex; justify-content: center; opacity: 0; transform: translateY(24px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; }
.cookies-banner[hidden] { display: none; }
.cookies-banner.visible { opacity: 1; transform: none; }
.cookies-caja { pointer-events: auto; width: 100%; max-width: 680px; background: #fff; color: #222; border: 1px solid #E2E2E2; border-radius: 14px; padding: 12px 16px; box-shadow: 0 10px 32px rgba(0,0,0,0.22); }
.cookies-titulo { margin: 0 0 4px; font-weight: 800; font-size: 0.85rem; }
.cookies-texto { margin: 0 0 10px; font-size: 0.74rem; line-height: 1.45; color: #444; }
.cookies-texto a { color: var(--blue); text-decoration: underline; }
.cookies-config { margin: 0 0 14px; display: grid; gap: 10px; }
.cookies-config[hidden] { display: none; }
.cookies-opcion { display: flex; gap: 8px; align-items: flex-start; font-size: 0.74rem; line-height: 1.4; color: #333; }
.cookies-opcion input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--blue); flex: none; }
.cookies-botones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cookies-btn[hidden] { display: none; }
/* Rechazar y Aceptar con el mismo peso visual (sin patrones oscuros). */
.cookies-btn { min-height: 34px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--blue); background: #fff; color: var(--blue); font-weight: 700; font-size: 0.78rem; font-family: inherit; cursor: pointer; transition: background 0.18s, color 0.18s, transform 0.18s; }
.cookies-btn:hover { background: #EAF2FE; }
.cookies-btn:active { transform: scale(0.96); }
.cookies-btn-ok, .cookies-btn-guardar { background: var(--blue); color: #fff; }
.cookies-btn-ok:hover, .cookies-btn-guardar:hover { background: var(--blue-dark); }
.cookies-btn-config { border-color: #D0D0D0; color: #555; }
@media (max-width: 560px) { .cookies-botones .cookies-btn { flex: 1 1 calc(50% - 8px); padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .cookies-banner { transition: none; } }

/* buscar.php: resumen de resultados y estado vacío */
.buscar-resumen { margin: -8px 0 18px; color: var(--text-muted); font-size: 0.9rem; }
.buscar-vacio { text-align: center; padding: 30px 0 10px; }
.buscar-vacio .btn { margin-top: 14px; display: inline-block; }

/* Modal de login: texto de apoyo bajo el título */
.modal-login-sub { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 16px; }
#modal-login .modal-caja { max-height: calc(100vh - 40px); overflow-y: auto; }

/* Modales: entrada suave (fundido del fondo + la caja sube y crece un poco).
   Se reproduce cada vez que el modal pasa de oculto a visible. */
.modal-overlay { animation: modalFondoIn 0.22s ease-out; }
.modal-overlay .modal-caja { animation: modalCajaIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes modalFondoIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalCajaIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal-overlay .modal-caja { animation: none; }
}

/* Modal de login -> registro (mismo modal, se ensancha) */
#modal-login .modal-caja { transition: max-width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
#modal-login .modal-caja.modal-caja-registro { max-width: 640px; }
#modal-registro-vista.vista-in, #modal-login-vista { animation: modalVistaIn 0.25s ease-out; }
@keyframes modalVistaIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.auth-promo-card.auth-promo-card-modal { max-width: none; }
.auth-promo-card-modal h3 { padding-right: 24px; }
.modal-cargando { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); padding: 40px 0; margin: 0; }
.modal-spinner { width: 18px; height: 18px; border: 2px solid rgba(0,0,0,0.12); border-top-color: var(--blue); border-radius: 50%; animation: productoImgSpin 0.7s linear infinite; }
@media (prefers-reduced-motion: reduce) { #modal-login .modal-caja { transition: none; } #modal-registro-vista.vista-in, #modal-login-vista { animation: none; } }


/* ========================================
   MIS DATOS (mis-datos.php) — más compacto y guiado
   ======================================== */
.mis-datos-pagina { padding: 22px 0 90px; }
.mis-datos-pagina .container { max-width: 1060px; counter-reset: paso; }
.md-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.md-top .btn-chico { margin-bottom: 0; flex: none; }
.md-top .seller-producto-editar-eyebrow { margin: 0 0 2px; }
.md-top .seller-producto-editar-titulo { margin: 0; }
.md-aviso-completar { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #FFF6D6; border: 1px solid #F2D56B; color: #6b5200; font-size: 0.9rem; font-weight: 600; }

/* Panel de progreso */
.md-progreso { background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 14px 18px; margin-bottom: 8px; }
.md-progreso-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 0.95rem; }
.md-progreso-conteo { color: var(--text-muted); font-size: 0.85rem; font-weight: 700; }
.md-progreso-barra { height: 8px; border-radius: 999px; background: #E8EEF8; overflow: hidden; }
.md-progreso-barra span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--green)); transition: width 0.4s cubic-bezier(0.4,0,0.2,1); }
.md-progreso-pendientes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.md-progreso-pendientes:empty { display: none; }
.md-chip { border: 1px solid #F3B7BF; background: #FFF1F3; color: var(--red-accent); border-radius: 999px; padding: 6px 12px; font-size: 0.8rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: transform 0.15s, background 0.15s; }
.md-chip:hover { background: #FFE2E6; transform: translateY(-1px); }
.md-progreso.md-completo { border-color: #BFE3B0; background: #F3FBEF; }
.md-progreso.md-completo #md-progreso-titulo { color: var(--green-dark); }
.mis-datos-pagina .form-obligatorios-leyenda { margin: 0 0 12px; }

/* Rejilla de 2 columnas en escritorio */
.mis-datos-pagina .seller-editar-principal { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.mis-datos-pagina #form-datos-generales { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.mis-datos-pagina .md-card-ancha { grid-column: 1 / -1; }
.mis-datos-pagina .md-guardar-barra { grid-column: 1 / -1; }
.mis-datos-pagina .seller-editar-card { padding: 16px 18px; margin: 0; }
.mis-datos-pagina .seller-editar-card h2 { font-size: 0.92rem; margin-bottom: 12px; padding-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.mis-datos-pagina .form-field { margin-bottom: 12px; }
.mis-datos-pagina .form-row { gap: 12px; }
.mis-datos-pagina .form-row .form-field { margin-bottom: 12px; }
.mis-datos-pagina .seller-editar-card .form-field:last-child { margin-bottom: 0; }
.mis-datos-pagina .form-field label { font-size: 0.74rem; margin-bottom: 4px; }
.mis-datos-pagina .form-field input, .mis-datos-pagina .form-field select { padding-top: 10px; padding-bottom: 10px; }

/* Número de paso y visto verde en cada tarjeta */
.mis-datos-pagina .md-paso h2::before { counter-increment: paso; content: counter(paso); flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 0.78rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.mis-datos-pagina .md-paso.md-ok h2::before { content: '✓'; background: var(--green-dark); }
.md-opcional { margin-left: auto; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); background: #EEF0F3; border-radius: 999px; padding: 3px 9px; }
.md-nota { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); }

/* Barra de guardado siempre a la vista */
.md-guardar-barra { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(255,255,255,0.96); backdrop-filter: none; border: 1px solid var(--border-subtle); border-radius: 14px; padding: 10px 14px; box-shadow: 0 -6px 20px rgba(0,0,0,0.08); }
.md-guardar-estado { font-size: 0.85rem; font-weight: 700; color: var(--red-accent); }
.md-guardar-estado.md-ok { color: var(--green-dark); }
.mis-datos-pagina .md-guardar-barra .btn { width: auto; padding: 11px 30px; }

@media (max-width: 860px) {
  .mis-datos-pagina .seller-editar-principal, .mis-datos-pagina #form-datos-generales { grid-template-columns: 1fr; }
  .md-top { align-items: center; }
}
@media (max-width: 560px) {
  .mis-datos-pagina { padding-top: 14px; }
  .md-top .btn-chico { padding: 8px 12px; font-size: 0.78rem; }
  .md-guardar-barra { flex-direction: column; align-items: stretch; gap: 8px; }
  .md-guardar-estado { text-align: center; }
  .mis-datos-pagina .md-guardar-barra .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .md-progreso-barra span, .md-chip { transition: none; } }

/* Mis datos: ajustes tras revisar la presentación */
/* Negocio: tienda física + cantidad en una fila, región completa debajo (antes se cortaba "Metropolitana"). */
#md-card-negocio .form-row-3 { grid-template-columns: 1fr 1fr; }
#md-card-negocio .form-row-3 .form-field:nth-child(3) { grid-column: 1 / -1; }
#md-card-negocio .form-field label { white-space: nowrap; }
/* Casillas: caja y texto alineados */
.mis-datos-pagina .auth-checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; line-height: 1.35; text-transform: none; letter-spacing: 0; }
.mis-datos-pagina .auth-checkbox input[type="checkbox"], .mis-datos-pagina #f-misma-direccion { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--blue); }
/* Sin dirección: el aviso rojo ya lo dice, se oculta el texto repetido */
#card-direccion-envio .aviso-falta-dato + .cuenta-vacio { display: none; }
#card-direccion-envio .aviso-falta-dato { margin-bottom: 12px; }


/* ========================================
   MI CUENTA (mi-cuenta.php) — bienvenida, regalo de primera compra
   ======================================== */

.mc-hero { margin-bottom: 18px; }
.mc-hero h1 { margin: 0 0 4px; }
.mc-saludo-mano { display: inline-block; transform-origin: 70% 70%; animation: mcSaludo 2.2s ease-in-out 0.4s 2; }
@keyframes mcSaludo { 0%,60%,100% { transform: rotate(0); } 10%,30% { transform: rotate(16deg); } 20%,40% { transform: rotate(-10deg); } 50% { transform: rotate(8deg); } }
.mc-hero-sub { margin: 0; color: var(--text-muted); font-size: 1rem; }

/* Regalo de bienvenida */
.mc-regalo { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 16px; padding: 24px 28px; border-radius: 18px; background: linear-gradient(120deg, #FFD60A 0%, #FFB703 100%); color: #1d1d1d; box-shadow: 0 14px 34px -16px rgba(255,170,0,0.7); }
.mc-regalo::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.45), transparent 70%); pointer-events: none; }
.mc-regalo-texto { position: relative; z-index: 1; max-width: 520px; }
.mc-regalo-etiqueta { display: inline-block; background: #1d1d1d; color: #FFD60A; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; }
.mc-regalo h2 { margin: 0 0 8px; font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.15; color: #1d1d1d; }
.mc-regalo-gratis { display: inline-block; background: #fff; color: #D93A00; padding: 0 10px; border-radius: 8px; transform: rotate(-2deg); }
.mc-regalo p { margin: 0 0 14px; font-size: 0.95rem; line-height: 1.5; color: #2b2b2b; }
.mc-regalo-cta { width: auto; display: inline-block; padding: 12px 26px; background: #1d1d1d; border-color: #1d1d1d; color: #fff; }
.mc-regalo-cta:hover { background: #000; }
.mc-regalo-nota { display: block; margin-top: 10px; font-size: 0.72rem; color: rgba(0,0,0,0.6); }
.mc-regalo-botellones { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, auto); gap: 6px 8px; flex: none; }
.mc-botellon { filter: drop-shadow(0 4px 4px rgba(0,0,0,0.18)); animation: mcFlota 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes mcFlota { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 3 pasos */
.mc-pasos { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mc-pasos li { display: flex; align-items: center; gap: 12px; background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 12px 14px; }
.mc-paso-num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.mc-pasos strong { display: block; font-size: 0.92rem; }
.mc-pasos span:not(.mc-paso-num) { display: block; font-size: 0.78rem; color: var(--text-muted); line-height: 1.35; }

/* Tarjetas de acceso más amigables */
.cuenta-pagina .cuenta-accesos { gap: 14px; margin-bottom: 30px; }
.cuenta-pagina .cuenta-acceso { border-radius: 16px; padding: 18px 20px; box-shadow: 0 6px 18px -12px rgba(0,0,0,0.25); }
.mc-sin-pedidos { font-size: 1.15rem; }

/* Estados vacíos */
.mc-vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 18px; background: var(--bg-panel); border: 2px dashed var(--border-subtle); border-radius: 16px; }
.mc-vacio-emoji { font-size: 2.2rem; line-height: 1; }
.mc-vacio p { margin: 0 0 8px; max-width: 420px; color: var(--text-muted); font-size: 0.88rem; }
.mc-vacio .btn { width: auto; }

/* Secciones: título con barrita de color */
.cuenta-pagina .cuenta-seccion h2 { display: flex; align-items: center; gap: 10px; }
.cuenta-pagina .cuenta-seccion h2::before { content: ''; width: 5px; height: 1.1em; border-radius: 3px; background: var(--blue); }

@media (max-width: 760px) {
  .mc-regalo { flex-direction: column; align-items: flex-start; padding: 20px 18px; }
  .mc-regalo-botellones { align-self: center; grid-template-columns: repeat(6, auto); gap: 4px; }
  .mc-botellon { width: 34px; height: 50px; }
  .mc-regalo-cta { display: block; width: 100%; text-align: center; }
  .mc-pasos { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .mc-botellon, .mc-saludo-mano { animation: none; } }

/* Favoritos: huecos punteados "esperando" más productos */
.mc-fav-hueco { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 260px; padding: 16px; text-align: center; border: 2px dashed #C9D3E3; border-radius: var(--radius); background: rgba(26,115,232,0.03); color: #7C8AA3; text-decoration: none; transition: border-color 0.2s, background 0.2s, transform 0.2s, color 0.2s; }
.mc-fav-hueco svg { color: #B6C2D6; transition: color 0.2s, transform 0.2s; }
.mc-fav-hueco strong { font-size: 0.85rem; color: #55637C; }
.mc-fav-hueco span { font-size: 0.74rem; }
.mc-fav-hueco:hover { border-color: var(--blue); background: rgba(26,115,232,0.07); transform: translateY(-3px); }
.mc-fav-hueco:hover svg { color: #E2384D; transform: scale(1.12); }
@media (max-width: 760px) { .mc-fav-hueco ~ .mc-fav-hueco ~ .mc-fav-hueco { display: none; } .mc-fav-hueco { min-height: 200px; } }

/* Foto publicitaria del regalo: ocupa la mitad derecha del banner y se funde con el amarillo */
.mc-regalo:has(.mc-regalo-foto) { min-height: 300px; padding-right: 0; }
.mc-regalo-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 54%; z-index: 0; }
.mc-regalo-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
@media (max-width: 760px) {
  .mc-regalo:has(.mc-regalo-foto) { padding-bottom: 0; }
  .mc-regalo-foto { position: relative; width: calc(100% + 36px); margin: 8px -18px 0; aspect-ratio: 3 / 2; align-self: stretch; }
  .mc-regalo-foto img { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); object-position: center; }
}

/* Foto del regalo: se ve completa (sin recortar botellones) pegada a la derecha y fundida con el banner */
.mc-regalo:has(.mc-regalo-foto) { min-height: 320px; }
.mc-regalo-foto { width: auto; left: auto; }
.mc-regalo-foto img { position: absolute; right: 0; top: 0; width: auto; height: 100%; max-width: none; object-fit: unset; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%); }
.mc-regalo-foto { aspect-ratio: 3 / 2; }
@media (max-width: 760px) {
  .mc-regalo:has(.mc-regalo-foto) { min-height: 0; }
  .mc-regalo-foto { position: relative; width: calc(100% + 36px); aspect-ratio: 3 / 2; }
  .mc-regalo-foto img { position: static; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); }
}

/* Pedidos vacíos con foto (primera compra): foto a la izquierda, mensaje a la derecha */
.mc-vacio-texto { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mc-vacio.mc-vacio-foto { flex-direction: row; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-style: solid; border-width: 1px; text-align: left; }
.mc-vacio-foto .mc-vacio-img { width: 42%; max-width: 440px; aspect-ratio: 3 / 2; height: auto; object-fit: cover; display: block; flex: none; }
.mc-vacio-foto .mc-vacio-texto { align-items: flex-start; justify-content: center; padding: 22px 28px; }
.mc-vacio-foto .mc-vacio-texto strong { font-size: 1.15rem; }
.mc-vacio-foto .mc-vacio-texto p { max-width: 380px; }
@media (max-width: 700px) {
  .mc-vacio.mc-vacio-foto { flex-direction: column; }
  .mc-vacio-foto .mc-vacio-img { width: 100%; max-width: none; }
  .mc-vacio-foto .mc-vacio-texto { align-items: center; text-align: center; padding: 16px 18px 20px; }
}

/* Público objetivo bajo el regalo */
.mc-regalo-publico { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; }
.mc-regalo-publico li { background: rgba(255,255,255,0.7); color: #1d1d1d; font-size: 0.74rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; }

/* Carrito: aviso discreto del regalo de primera compra (una línea, sin barra) */
.carrito-regalo { margin: 0 0 10px; padding: 7px 10px; border-radius: 8px; background: #FFF8DC; color: #6b5200; font-size: 0.76rem; line-height: 1.35; border: 1px solid #F3E2A0; }
.carrito-regalo strong { color: #5a4400; }
.carrito-regalo.carrito-regalo-ok { background: #EEF9E8; border-color: #BFE3B0; color: #2f6b1f; }
.carrito-regalo.carrito-regalo-ok strong { color: #2b6a1c; }

/* Carrito: los avisos del mínimo de bodega y del regalo caben siempre en una línea */
.carrito-full-progreso-wrap .carrito-marca-msg, .carrito-regalo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carrito-full-progreso-wrap .carrito-marca-msg { font-size: 0.76rem; }

/* Carrito: banner del regalo más lúdico — 6 botellones que se encienden según el avance */
.carrito-regalo { display: flex; align-items: center; gap: 10px; white-space: normal; overflow: visible; padding: 8px 10px; border-radius: 12px; background: linear-gradient(120deg, #FFF3C4, #FFE48A); border: 1px solid #F2D56B; color: #4a3a00; }
.carrito-regalo .cr-icono { font-size: 1.35rem; line-height: 1; flex: none; animation: crMeneo 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
.carrito-regalo .cr-cuerpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.carrito-regalo .cr-titulo { font-size: 0.82rem; color: #3b2d00; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carrito-regalo .cr-sub { font-size: 0.72rem; color: #6b5200; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carrito-regalo .cr-botellones { display: flex; gap: 3px; flex: none; align-items: flex-end; }
.carrito-regalo .cr-bot { color: #C9CED6; transition: color 0.3s, transform 0.3s; }
.carrito-regalo .cr-bot .cr-bot-cuerpo { fill: #EEF0F3; transition: fill 0.3s; }
.carrito-regalo .cr-bot.on { color: #3a3a3a; }
.carrito-regalo .cr-bot.on .cr-bot-cuerpo { fill: var(--c); }
.carrito-regalo .cr-bot.cr-pop { animation: crPop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
.carrito-regalo.carrito-regalo-ok { background: linear-gradient(120deg, #E6F8DC, #C9EDB4); border-color: #A5D88D; color: #24591a; }
.carrito-regalo.carrito-regalo-ok .cr-titulo, .carrito-regalo.carrito-regalo-ok .cr-sub { color: #24591a; }
.carrito-regalo.cr-festejo { animation: crFestejo 0.7s ease-out; }
@keyframes crMeneo { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-12deg); } 85% { transform: rotate(10deg); } 92% { transform: rotate(-6deg); } }
@keyframes crPop { 0% { transform: scale(0.6) translateY(4px); } 60% { transform: scale(1.25) translateY(-3px); } 100% { transform: scale(1); } }
@keyframes crFestejo { 0% { box-shadow: 0 0 0 0 rgba(90,190,60,0.55); transform: scale(1); } 40% { transform: scale(1.03); } 100% { box-shadow: 0 0 0 12px rgba(90,190,60,0); transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .carrito-regalo .cr-icono, .carrito-regalo .cr-bot.cr-pop, .carrito-regalo.cr-festejo { animation: none; } }


/* ========================================
   FICHA DE PRODUCTO (producto.php) — carga con animación sutil
   ======================================== */
.producto-detalle-imagen { animation: pdMarcoIn 0.5s ease-out backwards; }
.producto-detalle-info > * { animation: pdSube 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.producto-detalle-info > *:nth-child(1) { animation-delay: 0.05s; }
.producto-detalle-info > *:nth-child(2) { animation-delay: 0.1s; }
.producto-detalle-info > *:nth-child(3) { animation-delay: 0.15s; }
.producto-detalle-info > *:nth-child(4) { animation-delay: 0.2s; }
.producto-detalle-info > *:nth-child(5) { animation-delay: 0.25s; }
.producto-detalle-info > *:nth-child(6) { animation-delay: 0.3s; }
.producto-detalle-info > *:nth-child(7) { animation-delay: 0.35s; }
.producto-detalle-info > *:nth-child(n+8) { animation-delay: 0.4s; }
.producto-galeria-miniatura { animation: pdMiniIn 0.35s ease-out backwards; }
.producto-galeria-miniatura:nth-child(1) { animation-delay: 0.25s; }
.producto-galeria-miniatura:nth-child(2) { animation-delay: 0.3s; }
.producto-galeria-miniatura:nth-child(3) { animation-delay: 0.35s; }
.producto-galeria-miniatura:nth-child(4) { animation-delay: 0.4s; }
.producto-galeria-miniatura:nth-child(5) { animation-delay: 0.45s; }
.producto-galeria-miniatura:nth-child(n+6) { animation-delay: 0.5s; }

/* Foto principal: fundido al aparecer, brillo mientras carga y fundido al cambiar de miniatura */
#producto-imagen-principal { animation: pdFotoIn 0.5s ease-out backwards; transition: opacity 0.25s ease, transform 0.25s ease; }
#producto-imagen-principal.pd-cambiando { opacity: 0.25; transform: scale(0.985); }
#producto-imagen-principal.pd-cargando { min-height: 300px; border-radius: 10px; background: linear-gradient(100deg, #EDF0F4 30%, #F8F9FB 50%, #EDF0F4 70%); background-size: 220% 100%; animation: pdBrillo 1.2s linear infinite; }
.producto-galeria-miniatura { transition: border-color 0.2s, transform 0.2s; }
.producto-galeria-miniatura:hover { transform: translateY(-2px); }

@keyframes pdMarcoIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pdSube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pdMiniIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes pdFotoIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes pdBrillo { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) {
  .producto-detalle-imagen, .producto-detalle-info > *, .producto-galeria-miniatura, #producto-imagen-principal { animation: none; }
  #producto-imagen-principal.pd-cargando { animation: none; }
}

/* "Tú ganas: $X (Y%)" en lugar de solo el margen */
.margen-ganancia { color: var(--green-dark); font-weight: 800; }
.producto-detalle-info .margen-label { font-size: 0.85rem; font-weight: 700; color: var(--text-body); }
.producto-detalle-info .producto-margen .margen-ganancia { font-size: 1.05rem; }
.producto-detalle-info .producto-margen .margen-valor { font-size: 0.85rem; color: var(--text-muted); }

/* "Tú ganas": línea más chica y en negrita (tarjetas de producto) */
.producto-card .producto-margen { font-size: 0.78rem; font-weight: 700; color: #4b5563; }
.producto-card .producto-margen .margen-ganancia { font-size: 0.82rem; font-weight: 800; }

/* PVP más discreto en las tarjetas (el precio mayorista es el protagonista) */
.producto-card .producto-precio-publico { font-size: 0.8rem; margin-top: 3px; }
.producto-card .producto-precio-publico .pvp-label { font-size: 0.9em; }

/* Ficha de producto: PVP sugerido y "Tú ganas" más discretos (el precio mayorista manda) */
.producto-detalle-info .producto-precio-publico { font-size: 0.9rem; }
.producto-detalle-info .margen-label { font-size: 0.75rem; }
.producto-detalle-info .producto-margen .margen-ganancia { font-size: 0.9rem; }
.producto-detalle-info .producto-margen .margen-valor { font-size: 0.75rem; }


/* ========================================
   CARRITO (carrito.php): sin footer + mensaje "solo faltan $X" + modal de sugerencias
   ======================================== */
body.pagina-carrito .site-footer { display: none; }
body.pagina-carrito .carrito-pagina { padding-bottom: 120px; }

.carrito-marca-msg-casi { color: #8a5a00; font-size: 0.82rem; line-height: 1.35; }
.carrito-marca-msg-casi strong { color: #c24a00; }
.carrito-sugerir-btn { margin-top: 8px; border: 0; border-radius: 999px; padding: 7px 14px; background: linear-gradient(120deg, #FFD60A, #FFB703); color: #1d1d1d; font: 800 0.78rem inherit; font-family: inherit; cursor: pointer; box-shadow: 0 6px 14px -8px rgba(255,170,0,0.9); transition: transform 0.18s, box-shadow 0.18s; animation: sugLatido 2.8s ease-in-out infinite; }
.carrito-sugerir-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 18px -8px rgba(255,170,0,0.95); animation: none; }
@keyframes sugLatido { 0%, 80%, 100% { transform: scale(1); } 88% { transform: scale(1.06); } 94% { transform: scale(0.98); } }

.modal-caja.modal-caja-sug { max-width: 760px; max-height: calc(100vh - 40px); overflow-y: auto; }
.sug-sub { margin: 0 0 14px; color: var(--text-body); font-size: 0.92rem; line-height: 1.45; }
.sug-sub strong { color: #c24a00; }
.sug-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; min-height: 120px; }
.sug-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 12px 10px; background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 14px; animation: sugEntra 0.35s ease-out backwards; }
.sug-card:nth-child(2) { animation-delay: 0.05s; } .sug-card:nth-child(3) { animation-delay: 0.1s; } .sug-card:nth-child(4) { animation-delay: 0.15s; } .sug-card:nth-child(5) { animation-delay: 0.2s; } .sug-card:nth-child(6) { animation-delay: 0.25s; }
@keyframes sugEntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sug-estrella { position: absolute; top: 8px; left: 8px; z-index: 1; background: #1d1d1d; color: #FFD60A; font-size: 0.64rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.sug-foto { display: block; width: 100%; }
.sug-foto img { width: 100%; height: 110px; object-fit: contain; display: block; }
.sug-marca { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.sug-nombre { font-size: 0.84rem; font-weight: 700; line-height: 1.25; color: var(--white); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.sug-precio { font-weight: 800; color: var(--green-dark); font-size: 0.95rem; }
.sug-agregar { width: 100%; margin-top: 4px; padding: 8px 10px; font-size: 0.8rem; }
.sug-agregar.sug-agregado { background: #2f9e44; border-color: #2f9e44; opacity: 1; }
.sug-vacio { grid-column: 1 / -1; text-align: center; color: var(--text-muted); font-size: 0.9rem; padding: 24px 0; }
.sug-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.sug-catalogo { font-size: 0.85rem; font-weight: 700; color: var(--blue); text-decoration: none; }
.sug-catalogo:hover { text-decoration: underline; }
.sug-listo { width: auto; padding: 10px 28px; }
@media (max-width: 640px) {
  .sug-lista { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sug-foto img { height: 90px; }
  .sug-pie { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .sug-listo { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .carrito-sugerir-btn, .sug-card { animation: none; } }

/* Banner del regalo en carrito.php: más ancho y con botellones más grandes que el del carrito lateral */
.carrito-regalo.carrito-regalo-pagina { margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; gap: 14px; }
.carrito-regalo-pagina .cr-icono { font-size: 1.9rem; }
.carrito-regalo-pagina .cr-titulo { font-size: 1rem; }
.carrito-regalo-pagina .cr-sub { font-size: 0.85rem; }
.carrito-regalo-pagina .cr-botellones { gap: 6px; }
@media (max-width: 560px) { .carrito-regalo-pagina .cr-bot { width: 16px; height: 24px; } .carrito-regalo-pagina .cr-botellones { gap: 3px; } }

/* Revisar carrito: todo en una misma columna (título, regalo, marcas y barra de abajo alineados) */
.carrito-pagina .container { max-width: 1100px; }
.carrito-pagina .carrito-marca-grupo { max-width: none; }
.carrito-pagina .carrito-regalo-pagina { max-width: none; }
.carrito-marca-toggle { padding: 0; }
/* Barra fija: su contenido termina en el borde derecho de la columna, sin chocar con el botón de WhatsApp */
.carrito-pagina-footer { padding-right: max(100px, calc((100vw - 1100px) / 2 + 24px)); }
@media (max-width: 720px) { .carrito-pagina-footer { padding-right: 90px; } }

/* Total seleccionado: pop + color cuando cambia el monto */
#carrito-total-seleccionado { display: inline-block; transform-origin: right center; font-variant-numeric: tabular-nums; }
#carrito-total-seleccionado.total-sube { animation: totalSube 0.6s cubic-bezier(0.3, 1.4, 0.5, 1); }
#carrito-total-seleccionado.total-baja { animation: totalBaja 0.6s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes totalSube { 0% { transform: scale(1); color: inherit; } 35% { transform: scale(1.22); color: #2f9e44; } 100% { transform: scale(1); color: inherit; } }
@keyframes totalBaja { 0% { transform: scale(1); color: inherit; } 35% { transform: scale(0.92); color: #e8590c; } 100% { transform: scale(1); color: inherit; } }
@media (prefers-reduced-motion: reduce) { #carrito-total-seleccionado.total-sube, #carrito-total-seleccionado.total-baja { animation: none; } }

/* Detalle de marca (Revisar productos): los productos entran con un leve escalonado al desplegar */
.carrito-marca-detalle .carrito-item { animation: carritoDetItem 0.35s ease-out backwards; }
.carrito-marca-detalle .carrito-item:nth-child(2) { animation-delay: 0.05s; }
.carrito-marca-detalle .carrito-item:nth-child(3) { animation-delay: 0.1s; }
.carrito-marca-detalle .carrito-item:nth-child(n+4) { animation-delay: 0.15s; }
@keyframes carritoDetItem { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.carrito-marca-toggle-flecha { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .carrito-marca-detalle .carrito-item { animation: none; } }

/* Revisar carrito — líneas de producto: nombre con aire, cantidad en píldora, subtotal y quitar ordenados a la derecha.
   (Acotado a .carrito-marca-items: el carrito lateral no cambia.) */
.carrito-marca-items { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 0 28px; }
.carrito-marca-items .carrito-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  grid-template-areas: "img info quitar" "img info total";
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
  padding: 14px 0;
}
.carrito-marca-items .carrito-item img { grid-area: img; width: 64px; height: 64px; align-self: center; }
.carrito-marca-items .carrito-item-info { grid-area: info; }
.carrito-marca-items .carrito-item-nombre { font-size: 0.92rem; font-weight: 600; line-height: 1.3; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carrito-marca-items .carrito-item-sabor { display: inline-block; background: rgba(241,90,36,0.1); border-radius: 999px; padding: 1px 9px; margin-bottom: 4px; font-weight: 600; }
.carrito-marca-items .carrito-item-precio { font-size: 0.8rem; }
.carrito-marca-items .carrito-item-qty { display: inline-flex; gap: 0; margin-top: 8px; border: 1px solid var(--border-subtle); border-radius: 999px; overflow: hidden; background: #fff; }
.carrito-marca-items .carrito-qty-btn { border: 0; border-radius: 0; width: 32px; height: 30px; font-size: 1rem; }
.carrito-marca-items .carrito-qty-btn:hover { background: rgba(241,90,36,0.08); }
.carrito-marca-items .carrito-item-cantidad { min-width: 34px; font-size: 0.88rem; font-weight: 700; line-height: 30px; }
.carrito-marca-items .carrito-item-subtotal { grid-area: total; align-self: end; justify-self: end; font-size: 1.02rem; text-align: right; }
.carrito-marca-items .carrito-item-quitar { grid-area: quitar; justify-self: end; align-self: start; width: 26px; height: 26px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: background 0.15s, color 0.15s; }
.carrito-marca-items .carrito-item-quitar:hover { background: rgba(226,56,77,0.12); color: var(--red-accent); }
@media (max-width: 520px) {
  .carrito-marca-items { grid-template-columns: 1fr; }
  .carrito-marca-items .carrito-item { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .carrito-marca-items .carrito-item img { width: 56px; height: 56px; }
}

/* Descuento por volumen en cada línea del carrito: dato discreto junto al precio c/u */
.carrito-item-desc { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: rgba(47,158,68,0.1); color: #2f7d3a; font-size: 0.68rem; font-weight: 700; line-height: 1.5; vertical-align: 1px; cursor: help; }


/* Revisar carrito — productos del bloque desplegado: 3 por fila, compactos y pegados a la izquierda */
.carrito-marca-items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.carrito-marca-items .carrito-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0 14px;
}
.carrito-marca-items .carrito-item img { width: 56px; height: 56px; align-self: flex-start; }
.carrito-marca-items .carrito-item-info { flex: 1; min-width: 0; padding-right: 4px; }
.carrito-marca-items .carrito-item-nombre { font-size: 0.86rem; padding-right: 70px; }
.carrito-marca-items .carrito-item-qty { margin-top: 6px; }
/* Subtotal a la derecha, a la altura de la cantidad; "Quitar" arriba a la derecha */
.carrito-marca-items .carrito-item-subtotal { position: absolute; right: 0; bottom: 16px; font-size: 0.95rem; }
.carrito-marca-items .carrito-item-quitar { position: absolute; top: 10px; right: 0; width: auto; height: 24px; padding: 0 8px 0 6px; border-radius: 999px; gap: 4px; font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.carrito-marca-items .carrito-item-quitar-txt { display: inline; }
.carrito-marca-items .carrito-item-quitar:hover { background: rgba(226,56,77,0.1); color: var(--red-accent); }
/* En el carrito lateral basta el ícono de papelera */
.carrito-item-quitar svg { flex-shrink: 0; }
.carrito-item-quitar .carrito-item-quitar-txt { display: none; }
.carrito-marca-items .carrito-item-quitar .carrito-item-quitar-txt { display: inline; }
@media (max-width: 1000px) { .carrito-marca-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .carrito-marca-items { grid-template-columns: 1fr; } }

/* Cantidad editable (se puede escribir) */
input.carrito-item-cantidad { width: 44px; min-width: 0; height: 30px; padding: 0; margin: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 0.88rem; font-weight: 700; text-align: center; -moz-appearance: textfield; appearance: textfield; border-radius: 0; box-shadow: none; }
input.carrito-item-cantidad::-webkit-outer-spin-button, input.carrito-item-cantidad::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.carrito-item-cantidad:focus { outline: none; background: rgba(26,115,232,0.08); }
input.carrito-item-cantidad:disabled { opacity: 0.5; }
.carrito-item-qty:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,115,232,0.15); }
/* iOS hace zoom en inputs con letra menor a 16px */
@media (max-width: 720px) { input.carrito-item-cantidad { font-size: 16px; } }

/* Tabla de precio por volumen: la columna "P. Mayorista" en verde y más grande, como el resto de precios mayoristas */
.producto-precio-volumen-tabla td:nth-child(2) { color: var(--green-dark); font-size: 1.05rem; font-weight: 800; }

/* Tabla de volumen: "Tú ganas" unifica monto y porcentaje en una sola columna */
.producto-precio-volumen-tabla .pv-pct { font-weight: 600; font-size: 0.78rem; color: var(--text-muted); }

/* Tarjetas: si el producto tiene más de una foto, al pasar el mouse aparece la segunda con un fundido suave */
.producto-card .producto-img-2 { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 10px); max-height: none; margin: 0; opacity: 0; pointer-events: none; animation: none; transition: opacity 0.45s ease, transform 0.6s ease; transform: scale(1.03); }
@media (hover: hover) {
  .producto-card:hover .producto-img-2 { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .producto-card .producto-img-2 { transition: opacity 0.2s ease; transform: none; } }


/* Marcas: carrusel continuo con logos redondos (se repiten si son pocas para que el bloque se vea lleno) */
.marcas-strip.marcas-carrusel { display: block; overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.marcas-pista { display: flex; width: max-content; animation: marcasDesliza 38s linear infinite; }
.marcas-carrusel:hover .marcas-pista { animation-play-state: paused; }
.marcas-grupo { display: flex; align-items: center; gap: 28px; padding-right: 28px; flex: none; }
.marcas-carrusel .marcas-strip-logo { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #fff; border: 1px solid var(--border-subtle); box-shadow: 0 6px 14px -8px rgba(0,0,0,0.35); opacity: 0.9; transition: opacity 0.2s var(--ease-fast), transform 0.25s var(--ease-fast), box-shadow 0.25s var(--ease-fast); }
.marcas-carrusel .marcas-strip-logo:hover { opacity: 1; transform: scale(1.12); box-shadow: 0 12px 22px -10px rgba(0,0,0,0.45); }
.marcas-carrusel .marcas-strip-logo img { width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 50%; display: block; }
@keyframes marcasDesliza { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) { .marcas-carrusel .marcas-strip-logo { width: 72px; height: 72px; } .marcas-grupo { gap: 20px; padding-right: 20px; } .marcas-pista { animation-duration: 64s; } }
/* Sin movimiento: se muestra una sola vuelta, centrada y envuelta */
@media (prefers-reduced-motion: reduce) {
  .marcas-pista { animation: none; width: auto; justify-content: center; }
  .marcas-grupo[aria-hidden="true"] { display: none; }
  .marcas-grupo { flex-wrap: wrap; justify-content: center; padding-right: 0; }
}


/* ========================================
   MARCA (marca.php) — cabecera con más presencia
   ======================================== */
.marca-hero { position: relative; overflow: hidden; gap: 28px; padding: 28px 32px; background: linear-gradient(120deg, #FFFBE6 0%, #FFF1B8 100%); border-color: #F2DE8A; box-shadow: 0 14px 34px -22px rgba(255,170,0,0.7); animation: marcaHeroIn 0.5s ease-out backwards; }
.marca-hero::after { content: ''; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,10,0.45), transparent 70%); pointer-events: none; }
.marca-hero-logo { position: relative; z-index: 1; width: 128px; height: 128px; background: #fff; border: 4px solid #fff; box-shadow: 0 0 0 2px #F2D56B, 0 14px 28px -10px rgba(0,0,0,0.4); animation: marcaLogoIn 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) 0.1s backwards, marcaLogoFlota 5s ease-in-out 0.8s infinite; }
.marca-hero-logo img { padding: 0; object-fit: cover; }
.marca-hero-logo-inicial { font-size: 3rem; }
.marca-hero-info { position: relative; z-index: 1; animation: marcaInfoIn 0.5s ease-out 0.15s backwards; }
.marca-hero-info h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 8px; }
.marca-hero-descripcion { color: #4a3f10; }
.marca-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; }
.marca-chips li { background: rgba(255,255,255,0.8); color: #3b3000; font-size: 0.78rem; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.06); }
.marca-chips li strong { font-weight: 800; }
.marca-chips .marca-chip-ok { background: #E6F8DC; color: #24591a; }
.marca-chips .marca-chip-full { background: #1d1d1d; color: #FFD60A; font-weight: 700; }
.marca-estrellas-resumen { margin-top: 12px; }
@keyframes marcaHeroIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes marcaLogoIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes marcaLogoFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes marcaInfoIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .marca-hero { gap: 14px; padding: 22px 16px; }
  .marca-hero-logo { width: 104px; height: 104px; }
  .marca-chips { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .marca-hero, .marca-hero-logo, .marca-hero-info { animation: none; } }

/* Marca: cabecera más baja para que los productos suban (logo y título algo más chicos) */
.marca-hero { gap: 20px; padding: 14px 24px; margin-bottom: 16px; }
.marca-hero::after { width: 200px; height: 200px; right: -60px; top: -70px; }
.marca-hero-logo { width: 92px; height: 92px; border-width: 3px; box-shadow: 0 0 0 2px #F2D56B, 0 10px 20px -10px rgba(0,0,0,0.4); }
.marca-hero-logo-inicial { font-size: 2.2rem; }
.marca-hero-info h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 4px; }
.marca-hero-descripcion { font-size: 0.88rem; margin-bottom: 4px; }
.marca-chips { margin-top: 6px; gap: 6px; }
.marca-chips li { font-size: 0.74rem; padding: 4px 10px; }
.marca-estrellas-resumen { margin-top: 8px; }
.marca-pagina { padding-top: 16px; }
@media (max-width: 640px) {
  .marca-hero { padding: 14px 14px; gap: 10px; }
  .marca-hero-logo { width: 76px; height: 76px; }
}

/* Todas las marcas: el logo llena el círculo (un logo cuadrado como el de Fast ya no se ve con esquinas) */
.marca-card-logo img { object-fit: cover; padding: 0; border-radius: 50%; }


/* ========================================
   REGISTRO (modal y /auth/registro.php) — lectura fácil y menos fricción
   ======================================== */
.reg-regalo { display: inline-block; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; background: linear-gradient(120deg, #FFF3C4, #FFE48A); border: 1px solid #F2D56B; color: #4a3a00; font-size: 0.82rem; }
.reg-regalo strong { color: #3b2d00; }
.reg-hint { display: block; min-height: 1.1em; margin-top: 5px; font-size: 0.74rem; color: var(--text-muted); }
.reg-hint-ok { color: #2f7d3a; font-weight: 600; }
.reg-hint-mal { color: #c2410c; font-weight: 600; }
.reg-consent { margin: 4px 0 16px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: 12px; background: rgba(0,0,0,0.025); display: grid; gap: 10px; }
.reg-consent .form-field { margin: 0; }
.reg-consent .auth-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 0.84rem; line-height: 1.4; text-transform: none; letter-spacing: 0; color: var(--text-body); cursor: pointer; }
.reg-consent .auth-checkbox input[type="checkbox"] { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--blue); }
.auth-promo-card .reg-submit { width: 100%; padding: 14px 20px; font-size: 1rem; }
.auth-promo-card-modal .form-row { gap: 14px; }
@media (max-width: 640px) { .auth-promo-card-modal .form-row { gap: 0; } }


/* Registro: formulario más compacto (sobre todo en altura) */
.reg-consent { margin: 2px 0 12px; padding: 8px 12px; gap: 6px; border-radius: 10px; }
.reg-consent .auth-checkbox { font-size: 0.74rem; line-height: 1.3; gap: 8px; align-items: center; }
.reg-consent .auth-checkbox input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.reg-consent .auth-checkbox span { display: block; }
.reg-consent .auth-checkbox a { text-decoration: underline; }
.auth-promo-card-modal h3 { font-size: 1.25rem; margin-bottom: 2px; }
.auth-promo-card-modal .form-subtitle { font-size: 0.85rem; margin-bottom: 8px; }
.auth-promo-card-modal .reg-regalo { margin-bottom: 10px; padding: 4px 11px; font-size: 0.78rem; }
.auth-promo-card-modal .form-field { margin-bottom: 8px; }
.auth-promo-card-modal .form-row .form-field { margin-bottom: 8px; }
.auth-promo-card-modal .form-field label { font-size: 0.7rem; margin-bottom: 3px; }
.auth-promo-card-modal .form-field input, .auth-promo-card-modal .form-field select { padding-top: 9px; padding-bottom: 9px; font-size: 0.92rem; }
.auth-promo-card-modal .google-btn { padding-top: 9px; padding-bottom: 9px; }
.auth-promo-card-modal .auth-divisor { margin: 8px 0; }
.auth-promo-card-modal .reg-hint { margin-top: 3px; min-height: 0; font-size: 0.7rem; }
.auth-promo-card-modal .reg-submit { padding: 11px 18px; font-size: 0.95rem; }
.auth-promo-card-modal .auth-alt-link { margin: 8px 0 0; font-size: 0.82rem; }
@media (max-width: 640px) { .auth-promo-card-modal .form-field input, .auth-promo-card-modal .form-field select { font-size: 16px; } }

/* Ficha: capa que muestra la siguiente foto al pasar el mouse sobre la foto grande */
.producto-detalle-imagen .pd-hover-capa { position: absolute; z-index: 1; object-fit: contain; opacity: 0; pointer-events: none; background: var(--img-frame-bg); border-radius: 4px; transition: opacity 0.35s ease; max-height: none; margin: 0; animation: none; }
@media (prefers-reduced-motion: reduce) { .producto-detalle-imagen .pd-hover-capa { transition: none; } }

/* Descripción larga del producto: las listas muestran viñetas/números (el reset global las ocultaba) */
.producto-detalle-descripcion ul { list-style: disc; }
.producto-detalle-descripcion ol { list-style: decimal; }
.producto-detalle-descripcion li { margin-bottom: 4px; }
.producto-detalle-descripcion h3 { font-size: 1.05rem; }
.producto-detalle-descripcion h4 { font-size: 0.95rem; margin: 14px 0 4px; }

/* Tablas de las descripciones (información nutricional): más compactas */
.producto-detalle-descripcion table { font-size: 0.8rem; line-height: 1.25; max-width: 460px; width: 100%; margin: 6px 0 12px; }
.producto-detalle-descripcion table td, .producto-detalle-descripcion table th { padding: 4px 10px; font-size: 0.8rem; font-weight: 400; }
.producto-detalle-descripcion table th { font-weight: 700; font-size: 0.74rem; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.producto-detalle-descripcion table td:not(:first-child), .producto-detalle-descripcion table th:not(:first-child) { text-align: right; white-space: nowrap; }
.producto-detalle-descripcion table tr:last-child td { font-weight: 700; }
.producto-detalle-descripcion table tr:last-child td { font-weight: 400; }
.producto-detalle-descripcion table th:first-child { white-space: normal; }

/* Información nutricional: versión extra compacta (letra chica, filas bajas, sin bordes pesados) */
.producto-detalle-descripcion table { font-size: 0.72rem; line-height: 1.2; max-width: 360px; margin: 4px 0 10px; border-collapse: collapse; }
.producto-detalle-descripcion table td, .producto-detalle-descripcion table th { padding: 2px 8px; font-size: 0.72rem; line-height: 1.2; border-width: 0 0 1px 0; border-style: solid; border-color: var(--border-subtle); }
.producto-detalle-descripcion table th { background: rgba(0,0,0,0.04); font-size: 0.68rem; font-weight: 700; padding-top: 3px; padding-bottom: 3px; }
.producto-detalle-descripcion table tr:last-child td { border-bottom: 0; }
.producto-detalle-descripcion table td:not(:first-child), .producto-detalle-descripcion table th:not(:first-child) { padding-left: 14px; }

/* Información nutricional — tarjeta blanca con encabezado amarillo, filas alternadas y el nutriente clave destacado */
.producto-detalle-descripcion table { display: table; width: 100%; max-width: 420px; margin: 8px 0 16px; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #E3E5E8; border-radius: 12px; box-shadow: 0 8px 18px -12px rgba(0,0,0,0.3); font-size: 0.8rem; line-height: 1.25; overflow: visible; }
.producto-detalle-descripcion table th { background: #FFD60A; color: #1d1d1d; font-size: 0.72rem; font-weight: 800; padding: 8px 12px; border: 0; white-space: normal; }
.producto-detalle-descripcion table th:not(:first-child) { white-space: nowrap; text-align: right; }
.producto-detalle-descripcion table th:first-child { border-top-left-radius: 11px; }
.producto-detalle-descripcion table th:last-child { border-top-right-radius: 11px; }
.producto-detalle-descripcion table td { padding: 6px 12px; font-size: 0.8rem; color: #2b2b2b; border: 0; border-bottom: 1px solid #F0F1F3; background: #fff; font-variant-numeric: tabular-nums; }
.producto-detalle-descripcion table td:not(:first-child) { text-align: right; white-space: nowrap; padding-left: 16px; }
.producto-detalle-descripcion table tbody tr:nth-child(even) td { background: #FAFAFB; }
.producto-detalle-descripcion table tbody tr:last-child td { border-bottom: 0; }
.producto-detalle-descripcion table tbody tr:last-child td:first-child { border-bottom-left-radius: 11px; }
.producto-detalle-descripcion table tbody tr:last-child td:last-child { border-bottom-right-radius: 11px; }
.producto-detalle-descripcion table tr.fila-clave td { background: #EAF8E2; color: #1f5a14; font-weight: 800; }


/* Tarjetas: fin del "temblor" al acercar el mouse al botón.
   Causa: la tarjeta sube 6 px y el botón sube 3 px más al pasar el mouse; si el cursor está en el borde inferior
   deja de estar encima, todo baja y vuelve a subir en bucle. Se estabiliza dejando el botón quieto y
   alargando la zona de hover de la tarjeta unos píxeles hacia abajo. */
.producto-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; }
.producto-card .btn-agregar-carrito:hover, .producto-card .btn-agregar-carrito:active { transform: none; }

/* Selector de cantidad directo en la tarjeta */
.card-compra { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.card-compra .btn-agregar-carrito { flex: 1 1 auto; width: auto; min-width: 0; margin-top: 0; padding-left: 10px; padding-right: 10px; }
.card-qty { display: inline-flex; align-items: center; flex: none; border: 1px solid var(--border-subtle); border-radius: 999px; background: #fff; overflow: hidden; }
.card-qty-btn { width: 28px; height: 36px; border: 0; background: transparent; color: var(--text-body); font-size: 1.05rem; line-height: 1; cursor: pointer; font-family: inherit; }
.card-qty-btn:hover { background: rgba(26,115,232,0.1); color: var(--blue); }
.card-qty-btn:active { background: rgba(26,115,232,0.2); }
input.card-qty-input { width: 34px; height: 36px; padding: 0; margin: 0; border: 0; background: transparent; text-align: center; font: 700 0.9rem/36px inherit; font-family: inherit; color: var(--white); -moz-appearance: textfield; appearance: textfield; box-shadow: none; border-radius: 0; }
input.card-qty-input::-webkit-outer-spin-button, input.card-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.card-qty-input:focus { outline: none; background: rgba(26,115,232,0.08); }
.card-qty:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,115,232,0.15); }
@media (max-width: 720px) { input.card-qty-input { font-size: 16px; } .card-qty-btn { width: 26px; } input.card-qty-input { width: 28px; } }

/* Sabor elegible en la tarjeta */
.card-sabor { display: block; width: 100%; margin-top: 8px; padding: 8px 28px 8px 10px; border: 1px solid var(--border-subtle); border-radius: 10px; background-color: #fff; color: var(--white); font: 600 0.8rem inherit; font-family: inherit; cursor: pointer; }
.card-sabor:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,115,232,0.15); }
.card-sabor + .card-compra { margin-top: 6px; }
.card-sabor.card-sabor-falta { border-color: var(--red-accent); animation: sabor-falta 0.45s ease; }
@keyframes sabor-falta { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (max-width: 720px) { .card-sabor { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .card-sabor.card-sabor-falta { animation: none; } }

/* Carrito lateral más ancho: los nombres largos ya no se parten en 3 líneas */
.carrito-drawer { width: 560px; max-width: 94vw; }
.carrito-drawer .carrito-items { padding-left: 28px; padding-right: 28px; }
.carrito-drawer .carrito-drawer-footer { padding-left: 28px; padding-right: 28px; }
.carrito-drawer .carrito-drawer-header { padding-left: 28px; padding-right: 28px; }
@media (max-width: 640px) { .carrito-drawer { width: 100vw; max-width: 100vw; } .carrito-drawer .carrito-items, .carrito-drawer .carrito-drawer-footer, .carrito-drawer .carrito-drawer-header { padding-left: 18px; padding-right: 18px; } }


/* Pack regalo (6 botellones) como producto del carrito */
.carrito-item-regalo { background: linear-gradient(120deg, #FFF8DC, #FFEFA8); border: 1px dashed #E6C34A; border-radius: 12px; padding: 10px 12px; margin: 8px 0; animation: packRegaloIn 0.5s cubic-bezier(0.3, 1.3, 0.5, 1); }
.carrito-item-regalo img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 8px; padding: 2px; }
.carrito-item-regalo-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #1d1d1d; color: #FFD60A; font-size: 0.64rem; font-weight: 800; vertical-align: middle; }
.carrito-item-regalo .carrito-item-precio { color: #6b5200; font-size: 0.76rem; }
.carrito-item-regalo-cant { margin-top: 6px; font-size: 0.8rem; font-weight: 700; color: #3b2d00; }
.carrito-item-regalo-precio { color: #2f7d3a; font-weight: 800; letter-spacing: 0.04em; }
.carrito-pack-regalo:empty { display: none; }
.carrito-pack-regalo { max-width: none; margin: 0 0 16px; }
.carrito-pack-regalo .carrito-item-regalo { display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin: 0; }
.carrito-pack-regalo .carrito-item-regalo img { width: 88px; height: 88px; }
.carrito-pack-regalo .carrito-item-nombre { font-size: 1rem; }
.carrito-pack-regalo .carrito-item-regalo-precio { font-size: 1.05rem; }
@keyframes packRegaloIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .carrito-item-regalo { animation: none; } }

/* "(IVA incluido)" discreto junto a los totales del carrito */
.iva-nota { font-size: 0.68rem; font-weight: 400; color: var(--text-muted); opacity: 0.85; letter-spacing: 0; text-transform: none; white-space: nowrap; }

/* "IVA incluido" debajo del monto, alineado a la derecha */
.total-monto { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.total-monto .iva-nota, .carrito-pagina-footer .carrito-total-row .iva-nota { display: block; margin-top: 2px; text-align: right; }
.carrito-pagina-footer .carrito-total-row { align-items: flex-end; }

/* Carrito lateral: con el regalo desbloqueado se oculta la franja y queda solo el pack con foto */
.carrito-regalo.carrito-regalo-oculto { display: none; }


/* Confirmación del pedido (mi-cuenta.php?pedido_confirmado=1): más compacta, con regalo y próximos pasos */
.pedido-recien-confirmado-hero { padding: 20px 20px 22px; gap: 8px; margin-bottom: 18px; }
.pedido-recien-confirmado-hero .pedido-recien-confirmado-check { width: 40px; height: 40px; }
.pedido-recien-confirmado-hero h3 { font-size: 1.2rem; }
.pedido-recien-regalo { background: #FFF3C4; border: 1px solid #F2D56B; color: #4a3a00 !important; padding: 6px 14px; border-radius: 999px; font-size: 0.86rem !important; max-width: none !important; }
.pedido-recien-pasos { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 4px 0 6px; padding: 0; font-size: 0.8rem; color: var(--text-body); }
.pedido-recien-pasos li { display: inline-flex; align-items: center; gap: 6px; }
.pedido-recien-pasos li span { width: 20px; height: 20px; border-radius: 50%; background: var(--green-dark); color: #fff; font-weight: 800; font-size: 0.7rem; display: inline-flex; align-items: center; justify-content: center; }
.pedido-recien-confirmado-whatsapp { margin-top: 2px; }
.pedido-pack-regalo { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 8px 12px; border: 1px dashed #E6C34A; border-radius: 10px; background: linear-gradient(120deg, #FFF8DC, #FFEFA8); font-size: 0.86rem; color: #4a3a00; }
.pedido-pack-regalo img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 6px; flex: none; }
.pedido-pack-regalo span { flex: 1; }
.pedido-pack-regalo em { font-style: normal; font-weight: 800; letter-spacing: 0.04em; color: #2f7d3a; }

/* Aviso previo al envío del pedido (carrito.php): aclara que no hay cobro */
.carrito-envio-aviso { margin: 0 auto 0 0; max-width: 360px; font-size: 0.78rem; line-height: 1.35; color: var(--text-muted); text-align: left; }
.carrito-envio-aviso strong { color: var(--green-dark); font-weight: 700; }
.carrito-pagina-footer .btn { white-space: nowrap; }
@media (max-width: 720px) {
  .carrito-envio-aviso { flex: 1 1 100%; max-width: none; font-size: 0.72rem; margin: 0 0 6px; }
  .carrito-pagina-footer { flex-wrap: wrap; }
}

/* Confirmación arriba, sobre "Mis datos": plazo de contacto y nota del botón de WhatsApp */
.pedido-recien-plazo { margin: 0; font-size: 0.86rem; color: var(--text-body); }
.pedido-recien-plazo strong { color: var(--green-dark); }
.pedido-recien-confirmado-horario { max-width: 420px; font-size: 0.78rem; color: var(--text-muted); line-height: 1.35; }
.cuenta-pagina .pedido-recien-confirmado-hero { margin: 0 0 22px; }


/* Estado de la sincronización de stock con Bsale (seller/productos.php) */
.stock-sync { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; padding: 10px 14px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-panel); }
.stock-sync-punto { width: 10px; height: 10px; border-radius: 50%; background: #9aa3af; flex: none; }
.stock-sync-ok .stock-sync-punto { background: #2f9e44; box-shadow: 0 0 0 4px rgba(47,158,68,0.18); }
.stock-sync-atrasado .stock-sync-punto { background: #f08c00; box-shadow: 0 0 0 4px rgba(240,140,0,0.2); }
.stock-sync-atrasado { border-color: #F2D56B; background: #FFFBEA; }
.stock-sync-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.82rem; line-height: 1.3; }
.stock-sync-texto strong { font-size: 0.85rem; }
.stock-sync-texto span { color: var(--text-muted); }
.stock-sync .btn { width: auto; flex: none; white-space: nowrap; }
.stock-sync-aviso { margin: -6px 0 12px; font-size: 0.82rem; color: var(--text-muted); }
.stock-sync-aviso.stock-sync-aviso-error { color: var(--red-accent); font-weight: 600; }
@media (max-width: 560px) { .stock-sync { flex-wrap: wrap; } .stock-sync .btn { width: 100%; } }


/* Stock y foto por sabor/SKU (seller/producto-editar.php) */
.sabores-tabla { display: grid; gap: 8px; }
.sabor-fila { display: grid; grid-template-columns: minmax(150px, 1.1fr) auto minmax(0, 2fr); align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 12px; background: #fff; }
.sabor-fila-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sabor-fila-info strong { font-size: 0.9rem; }
.sabor-fila-sku { font-size: 0.74rem; color: var(--text-muted); overflow-wrap: anywhere; }
.sabor-fila-stock { font-weight: 800; font-size: 1.05rem; color: var(--green-dark); text-align: center; min-width: 56px; }
.sabor-fila-stock small { font-weight: 600; font-size: 0.68rem; color: var(--text-muted); }
.sabor-fila-stock.sabor-sin-stock { color: var(--red-accent); }
.sabor-fila-fotos { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.sabor-foto-op { position: relative; display: inline-flex; cursor: pointer; }
.sabor-foto-op input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sabor-foto-op img, .sabor-foto-auto span { width: 44px; height: 44px; border-radius: 8px; border: 2px solid var(--border-subtle); background: #fff; object-fit: contain; padding: 2px; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.sabor-foto-auto span { display: inline-flex; align-items: center; justify-content: center; font-size: 0.66rem; font-weight: 700; color: var(--text-muted); }
.sabor-foto-op:hover img, .sabor-foto-op:hover span { transform: translateY(-2px); }
.sabor-foto-op input:checked + img, .sabor-foto-op input:checked + span { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,115,232,0.18); }
.sabor-foto-op input:focus-visible + img, .sabor-foto-op input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.sabor-fila-total { grid-template-columns: 1fr auto; background: rgba(0,0,0,0.03); }
@media (max-width: 720px) { .sabor-fila { grid-template-columns: 1fr auto; } .sabor-fila-fotos { grid-column: 1 / -1; justify-content: flex-start; } }


/* ========================================
   CATÁLOGO (distribucion.php): barra de filtros visible, orden y contador
   ======================================== */
.cat-barra { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 10px 14px; background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 14px; }
.cat-pastillas { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 2px 0; }
.cat-pastillas::-webkit-scrollbar { display: none; }
.cat-pastillas { padding: 6px 4px; margin: -4px 0; }
.cat-pastillas .filtro-pill { flex: none; white-space: nowrap; }
.cat-pastillas .filtro-pill:hover { transform: none; }
.cat-herramientas { flex: none; display: flex; align-items: center; gap: 12px; padding: 0 0 0 14px; border-left: 1px solid var(--border-subtle); }
.cat-select { max-width: 170px; padding: 7px 26px 7px 10px; border: 1px solid var(--border-subtle); border-radius: 10px; background-color: #fff; color: var(--white); font: 600 0.82rem inherit; font-family: inherit; cursor: pointer; }
.cat-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; user-select: none; }
.cat-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cat-switch-pista { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #cfd5df; transition: background 0.2s; flex: none; }
.cat-switch-pista::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.2s; }
.cat-switch input:checked + .cat-switch-pista { background: var(--green-dark); }
.cat-switch input:checked + .cat-switch-pista::after { transform: translateX(16px); }
.cat-switch input:focus-visible + .cat-switch-pista { outline: 2px solid var(--blue); outline-offset: 2px; }
.cat-contador { margin-left: auto; font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }
.cat-limpiar { border: 0; background: none; color: var(--blue); font: 700 0.82rem inherit; font-family: inherit; text-decoration: underline; cursor: pointer; padding: 4px 2px; }
@media (max-width: 1100px) {
  .cat-barra { flex-wrap: wrap; }
  .cat-pastillas { flex: 1 1 100%; }
  .cat-herramientas { flex: 1 1 100%; padding-left: 0; border-left: 0; flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .cat-barra { padding: 10px 12px; gap: 10px; }
  .cat-herramientas { gap: 8px 10px; }
  .cat-select { font-size: 16px; max-width: none; flex: 1 1 140px; }
  .cat-contador { margin-left: 0; }
}


/* Modal "Avísame cuando llegue stock": más cálido y persuasivo */
.modal-overlay { backdrop-filter: blur(2px); }
.modal-overlay:not([hidden]) { animation: avisarFondo 0.2s ease-out; }
.modal-overlay:not([hidden]) .modal-avisar { animation: avisarEntra 0.34s cubic-bezier(.2,1.2,.4,1); }
@keyframes avisarFondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes avisarEntra { from { opacity: 0; transform: translateY(18px) scale(0.94); } to { opacity: 1; transform: none; } }
.modal-avisar { max-width: 400px; padding: 0 0 22px; overflow: hidden; border-radius: 18px; }
.modal-avisar .modal-cerrar { z-index: 2; color: #3a3320; }
.avisar-cabeza { padding: 26px 24px 18px; text-align: center; background: linear-gradient(160deg, #FFE45C, #FFC400); color: #17181B; }
.modal-avisar .avisar-cabeza h3 { margin: 8px 0 6px; padding: 0; font-size: 1.3rem; text-transform: none; letter-spacing: 0; color: #17181B; }
.avisar-sub { margin: 0; font-size: 0.86rem; line-height: 1.4; color: #3a3320; }
.avisar-campana { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; font-size: 1.7rem; box-shadow: 0 6px 16px -6px rgba(0,0,0,0.35); transform-origin: 50% 12%; animation: avisarCampana 2.4s ease-in-out 0.4s infinite; }
@keyframes avisarCampana { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(16deg); } 20% { transform: rotate(-14deg); } 30% { transform: rotate(10deg); } 40% { transform: rotate(-6deg); } 50% { transform: rotate(3deg); } }
.avisar-producto { display: flex; align-items: center; gap: 12px; margin: 16px 24px 14px; padding: 10px 12px; border: 1px dashed var(--border-subtle); border-radius: 12px; background: rgba(0,0,0,0.02); }
.avisar-producto img { flex: none; width: 52px; height: 52px; object-fit: contain; border-radius: 8px; background: #fff; }
#form-avisar-stock, .avisar-exito { padding: 0 24px; }
.avisar-campo { position: relative; display: block; }
.avisar-campo-icono { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 1rem; opacity: 0.6; pointer-events: none; }
#form-avisar-stock input[type="email"] { padding: 13px 14px 13px 40px; font-size: 16px; margin-bottom: 10px; }
.avisar-error { margin: 0 0 10px; color: var(--red-accent); font-size: 0.8rem; font-weight: 600; }
.avisar-btn { width: 100%; padding: 13px 16px; font-size: 0.95rem; font-weight: 800; border-radius: 12px; }
.avisar-puntos { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 0.74rem; color: var(--text-muted); }
.avisar-exito { text-align: center; }
.avisar-exito strong { display: block; font-size: 1.1rem; margin: 6px 0; }
.avisar-exito p { margin: 0 0 16px; font-size: 0.86rem; color: var(--text-muted); line-height: 1.45; }
.avisar-exito-icono { font-size: 2.6rem; margin-top: 18px; animation: avisarPop 0.5s cubic-bezier(.2,1.6,.4,1); }
@keyframes avisarPop { from { transform: scale(0.2) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .avisar-campana, .modal-overlay:not([hidden]) .modal-avisar, .avisar-exito-icono { animation: none; } }


/* ========================================
   MATERIAL PARA DISTRIBUIDORES (material.php)
   ======================================== */
.mat-pagina { padding: 28px 0 70px; }
.mat-hero { text-align: center; max-width: 720px; margin: 0 auto 22px; }
.mat-hero-sello { display: inline-block; padding: 5px 14px; border-radius: 999px; background: #FFE45C; color: #17181B; font-size: 0.78rem; font-weight: 800; }
.mat-hero h1 { margin: 12px 0 8px; font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.15; }
.mat-hero-destacado { color: var(--green-dark); }
.mat-hero p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
.mat-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 22px; }
.mat-paso { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 14px; }
.mat-paso > span { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #FFC400; color: #17181B; font-weight: 800; }
.mat-paso strong { display: block; font-size: 0.9rem; }
.mat-paso small { color: var(--text-muted); font-size: 0.76rem; }
.mat-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.mat-contador { margin-left: auto; font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.mat-lista { display: grid; gap: 14px; }
.mat-producto { background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 14px 16px 16px; }
.mat-producto[hidden] { display: none; }
.mat-producto-cab { margin-bottom: 12px; }
.mat-producto-marca { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.mat-producto-cab h2 { margin: 2px 0 0; font-size: 1.05rem; line-height: 1.25; }
.mat-piezas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mat-pieza { display: flex; flex-direction: column; gap: 10px; transition: transform 0.2s; }
.mat-pieza:not(.mat-pieza-pronto):hover { transform: translateY(-3px); }
.mat-pieza-vista { display: flex; align-items: center; justify-content: center; height: 230px; border-radius: 12px; background: #f3f3f0; overflow: hidden; border: 1px solid var(--border-subtle); }
.mat-pieza-vista img { width: 100%; height: 100%; object-fit: contain; }
.mat-pieza-pronto .mat-pieza-vista { background: repeating-linear-gradient(135deg, #f6f6f3 0 10px, #efefeb 10px 20px); }
.mat-pronto { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 1.8rem; opacity: 0.5; }
.mat-pronto small { font-size: 0.74rem; font-weight: 700; }
.mat-pieza-info { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; }
.mat-pieza-info strong { font-size: 0.88rem; }
.mat-pieza-info small { grid-column: 1; font-size: 0.7rem; color: var(--text-muted); line-height: 1.3; }
.mat-descargar { grid-column: 2; grid-row: 1 / span 2; padding: 8px 14px; font-size: 0.8rem; border-radius: 10px; white-space: nowrap; }
.mat-reglas { margin-top: 24px; padding: 16px 18px; background: #fffbe6; border: 1px solid #f0e2a0; border-radius: 14px; }
.mat-reglas h3 { margin: 0 0 8px; font-size: 0.95rem; }
.mat-reglas ul { margin: 0; padding-left: 18px; font-size: 0.82rem; line-height: 1.55; color: var(--text-body); }
.mat-acceso { max-width: 460px; margin: 10px auto 0; padding: 28px 24px; text-align: center; background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 18px; }
.mat-acceso-icono { font-size: 2.2rem; }
.mat-acceso h2 { margin: 8px 0 6px; font-size: 1.15rem; }
.mat-acceso p { margin: 0 0 16px; color: var(--text-muted); font-size: 0.9rem; }
.mat-acceso-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (max-width: 900px) { .mat-piezas { grid-template-columns: 1fr; } .mat-pasos { grid-template-columns: 1fr; } .mat-pieza-vista { height: 200px; } }

.mat-sabores { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.mat-sabores-etiqueta { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-right: 4px; }
.mat-sabor { padding: 6px 12px; border: 1px solid var(--border-subtle); border-radius: 999px; background: #fff; font: 600 0.8rem inherit; font-family: inherit; color: var(--text-body); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.mat-sabor:hover { border-color: var(--green-dark); }
.mat-sabor.active { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.mat-piezas[hidden] { display: none; }

/* Zoom de las piezas de material.php (al pasar el mouse) */
.mat-pieza-vista img { cursor: zoom-in; }
.mat-zoom { position: fixed; z-index: 400; display: none; padding: 8px; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px -12px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.08); pointer-events: none; }
.mat-zoom.visible { display: block; animation: matZoomIn 0.16s ease-out; }
.mat-zoom img { display: block; border-radius: 8px; background: #f3f3f0; object-fit: contain; }
.mat-zoom.centrado { left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: auto; max-width: 94vw; max-height: 90vh; }
.mat-zoom.centrado img { width: auto !important; height: auto !important; max-width: 90vw; max-height: 84vh; }
@keyframes matZoomIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.mat-zoom.centrado.visible { animation: none; }
@media (prefers-reduced-motion: reduce) { .mat-zoom.visible { animation: none; } }

/* ========================================
   MÓVIL: CTA del hero en una línea + modal de registro/login como hoja a pantalla completa
   (100vh en iOS incluye las barras del navegador y cortaba el modal; dvh usa el alto visible real)
   ======================================== */
@media (max-width: 720px) {
  .dist-hero-cta { width: 100%; align-self: stretch; justify-content: center; white-space: nowrap; padding: 15px 12px; font-size: clamp(0.76rem, 3.5vw, 1rem); gap: 6px; }

  #modal-login.modal-overlay { padding: 0; align-items: stretch; }
  #modal-login .modal-caja,
  #modal-login .modal-caja.modal-caja-registro {
    max-width: none; width: 100%;
    height: 100vh; height: 100dvh; max-height: none;
    border-radius: 0; border: 0;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 18px 18px calc(28px + env(safe-area-inset-bottom));
  }
  /* La X queda fija arriba mientras se hace scroll, grande y fácil de tocar */
  #modal-login .modal-cerrar {
    position: sticky; top: 0; float: right; z-index: 10;
    width: 44px; height: 44px; margin: -6px -8px 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.7rem; color: var(--text-body);
    background: #fff; border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,0.22);
  }
}

/* Móvil: formulario de registro del modal más compacto en altura (menos scroll, X siempre alcanzable) */
@media (max-width: 720px) {
  #modal-registro-vista .auth-promo-card h3 { font-size: 1.15rem; margin: 0 0 2px; padding-right: 8px; line-height: 1.15; }
  #modal-registro-vista .form-subtitle { font-size: 0.8rem; margin-bottom: 8px; line-height: 1.3; }
  #modal-registro-vista .reg-regalo { padding: 7px 10px; margin-bottom: 10px; font-size: 0.8rem; }
  #modal-registro-vista .auth-promo-card .form-field,
  #modal-registro-vista .auth-promo-card .form-row .form-field { margin-bottom: 8px; }
  #modal-registro-vista .form-field label { font-size: 0.68rem; margin-bottom: 2px; }
  #modal-registro-vista .form-field input,
  #modal-registro-vista .form-field select { padding: 9px 12px; min-height: 42px; font-size: 16px; }
  #modal-registro-vista .reg-hint { font-size: 0.7rem; margin-top: 2px; }
  #modal-registro-vista .reg-consent { padding: 8px 10px; gap: 6px; }
  #modal-registro-vista .auth-divisor { margin: 8px 0; }
  #modal-registro-vista .reg-submit { min-height: 46px; }
}

/* Móvil: barra de filtros del catálogo lo más baja posible (3 filas finas en vez de 5 grandes) */
@media (max-width: 720px) {
  .cat-barra { padding: 8px 10px; gap: 6px; margin: 0 0 10px; border-radius: 12px; }
  .cat-pastillas { padding: 2px 2px; margin: 0; gap: 6px; }
  .cat-pastillas .filtro-pill { padding: 6px 13px; font-size: 0.82rem; }
  .cat-herramientas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; align-items: center; }
  .cat-select { width: 100%; min-width: 0; height: 40px; padding: 0 26px 0 10px; font-size: 16px; border-radius: 10px; flex: none; }
  .cat-switch { grid-column: 1; font-size: 0.8rem; gap: 6px; min-height: 28px; }
  .cat-switch-pista { width: 32px; height: 19px; }
  .cat-switch-pista::after { width: 13px; height: 13px; top: 3px; left: 3px; }
  .cat-switch input:checked + .cat-switch-pista::after { transform: translateX(13px); }
  .cat-contador { grid-column: 2; justify-self: end; font-size: 0.78rem; margin: 0; }
  .cat-limpiar { grid-column: 1 / -1; justify-self: end; margin-top: -4px; padding: 2px; }
}
@media (max-width: 720px) {
  .cat-herramientas select.cat-select:first-of-type { grid-row: 1; grid-column: 1; }
  .cat-herramientas select.cat-select:nth-of-type(2) { grid-row: 1; grid-column: 2; }
  .cat-switch { grid-row: 2; }
  .cat-contador { grid-row: 2; }
  .cat-limpiar { grid-row: 3; }
}

/* Material: Nutrivital tiene una pieza extra (4 columnas en escritorio, 2 en tablet) */
.mat-piezas.mat-piezas-4 { grid-template-columns: repeat(4, 1fr); }
.mat-piezas-4 .mat-pieza-info { grid-template-columns: 1fr; }
.mat-piezas-4 .mat-descargar { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; }
@media (max-width: 1100px) { .mat-piezas.mat-piezas-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .mat-piezas.mat-piezas-4 { grid-template-columns: 1fr; } }


/* ========================================
   FICHA DE PRODUCTO: zona de precios rediseñada (precio protagonista, ganancia en tarjeta verde,
   tabla de volumen con fila vigente resaltada y botón de compra negro)
   ======================================== */
.pz-precios { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 14px; }
.pz-precios > p { margin: 0; }
.pz-mayorista { display: flex; flex-direction: column; gap: 0; line-height: 1; }
.pz-etiqueta { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 4px; }
.pz-valor, .producto-detalle-info .pz-mayorista .precio-valor { font-size: clamp(2.2rem, 5vw, 3.1rem); font-weight: 800; letter-spacing: -0.02em; color: #111; line-height: 1; }
.producto-detalle-info .pz-mayorista { font-size: inherit; color: #111; }
.pz-pvp { padding-left: 22px; border-left: 1px solid var(--border-subtle); font-size: 0.95rem; color: var(--text-muted); }
.pz-pvp .pvp-valor { color: #222; font-weight: 600; }
.pz-ganancia { display: flex !important; align-items: center; gap: 12px; margin-left: auto !important; padding: 10px 18px; background: #e6f6e9; border-radius: 12px; color: #1a8f3c; }
.pz-ganancia-icono { flex: none; }
.pz-ganancia-texto { display: flex; flex-direction: column; line-height: 1.15; }
.pz-ganancia .margen-label { font-size: 0.8rem; color: #2d3b30; font-weight: 500; }
.pz-ganancia-cifra { font-size: 1.45rem; font-weight: 800; color: #1a8f3c; white-space: nowrap; }
.pz-ganancia .margen-ganancia, .pz-ganancia .margen-valor { color: inherit; font-size: inherit; font-weight: inherit; }
.pz-punto { margin: 0 2px; }

.producto-precio-volumen { max-width: none; margin-top: 18px; padding: 14px 16px 12px; background: #f7f7f5; border: 1px solid var(--border-subtle); border-radius: 12px; }
.producto-precio-volumen .pz-vol-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 8px; font-size: 0.92rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: #111; }
.pz-barras { color: #FFC400; flex: none; }
.pz-vol-titulo em { flex-basis: 100%; margin: 0 0 0 40px; font-style: normal; font-size: 0.7rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.producto-precio-volumen-tabla { background: #fff; border-radius: 8px; overflow: hidden; border-collapse: separate; border-spacing: 0; }
.producto-precio-volumen-tabla th { padding: 10px 12px 6px; font-size: 0.68rem; letter-spacing: 0.05em; color: #6b6f76; border-bottom: 0; background: #fff; }
.producto-precio-volumen-tabla td { padding: 11px 12px; border-bottom: 1px solid #ececea; font-size: 0.92rem; }
.producto-precio-volumen-tabla tr:last-child td { border-bottom: 0; }
.producto-precio-volumen-tabla td:nth-child(2) { color: #1a8f3c; font-size: 1rem; }
.producto-precio-volumen-tabla td:last-child { color: #1a8f3c; }
.producto-precio-volumen-tabla td:last-child .pv-pct { color: var(--text-body); font-weight: 500; }
.producto-precio-volumen-fila.active td { background: #fff3c4; }
.producto-precio-volumen-fila.active td:first-child { color: #111; position: relative; padding-left: 40px; }
.producto-precio-volumen-fila.active td:first-child::before { content: '\2713'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: #111; color: #fff; font-size: 0.72rem; line-height: 20px; text-align: center; }
.producto-precio-volumen-fila:not(.active):hover td { background: #fafaf7; }

.producto-detalle-info .producto-compra-fila { gap: 0; margin-top: 16px; }
.producto-detalle-info .producto-compra-fila .btn-agregar-carrito {
  flex: 1 1 auto; max-width: none; width: auto; margin-left: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: #111; color: #fff; border: 0; border-radius: 10px;
  font-size: 1rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; min-height: 54px;
}
.producto-detalle-info .producto-compra-fila .btn-agregar-carrito::after { content: '\203A'; font-size: 1.6rem; line-height: 1; color: #FFC400; transform: translateY(-1px); }
.producto-detalle-info .producto-compra-fila .btn-agregar-carrito:hover { background: #000; box-shadow: 0 10px 22px -10px rgba(0,0,0,0.6); }
.producto-precio-volumen-hint { margin-top: 10px; font-size: 0.85rem; }
@media (max-width: 640px) {
  .pz-precios { gap: 10px 16px; }
  .pz-pvp { padding-left: 0; border-left: 0; }
  .pz-ganancia { margin-left: 0 !important; width: 100%; box-sizing: border-box; }
  .producto-detalle-info .producto-compra-fila .btn-agregar-carrito { min-height: 52px; font-size: 0.92rem; margin-left: 10px; }
  .producto-precio-volumen-tabla th, .producto-precio-volumen-tabla td { padding-left: 8px; padding-right: 8px; }
  .producto-precio-volumen-tabla td { font-size: 0.85rem; }
}
.producto-detalle-info .pz-mayorista .pz-etiqueta { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; color: var(--text-muted); text-transform: uppercase; }
.producto-detalle-info .pz-pvp { font-size: 0.95rem; font-weight: 400; }
.producto-detalle-info .pz-pvp .pvp-valor { font-size: 1rem; }


/* Ficha de producto: encabezado, estado y cifras más protagonistas */
.producto-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.producto-estado-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: #e6f6e9; color: #1a8f3c; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.producto-estado-pill i { width: 8px; height: 8px; border-radius: 50%; background: #1fb04a; box-shadow: 0 0 0 3px rgba(31,176,74,0.2); }
.producto-estado-pill.agotado { background: #fdeaea; color: #c0392b; }
.producto-estado-pill.agotado i { background: #e04b3a; box-shadow: 0 0 0 3px rgba(224,75,58,0.2); }
.producto-detalle-info h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.02; letter-spacing: -0.01em; font-weight: 900; margin-bottom: 6px; }
.producto-detalle-info .eyebrow { color: var(--text-muted); letter-spacing: 0.04em; }
.producto-detalle-info .eyebrow a { color: #222; font-weight: 700; }
.producto-detalle-info .pz-ganancia { padding: 12px 20px; }
.producto-detalle-info .pz-ganancia .margen-label { font-size: 0.82rem; font-weight: 500; color: #2d3b30; }
.producto-detalle-info .pz-ganancia .pz-ganancia-cifra { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.01em; color: #1a8f3c; }
.producto-detalle-info .pz-ganancia .pz-ganancia-cifra .margen-ganancia,
.producto-detalle-info .pz-ganancia .pz-ganancia-cifra .margen-valor { font-size: inherit; font-weight: inherit; color: inherit; }
.producto-detalle-info .pz-ganancia-icono { width: 34px; height: 34px; }
.producto-detalle-info .producto-compra-fila .producto-cantidad { height: 56px; margin-top: 0; }
.producto-detalle-info .producto-compra-fila .producto-cantidad-btn,
.producto-detalle-info .producto-compra-fila .producto-cantidad-input { height: 100%; }
.producto-detalle-info .producto-compra-fila .producto-cantidad-btn { width: 50px; font-size: 1.3rem; }
.producto-detalle-info .producto-compra-fila .producto-cantidad-input { width: 62px; font-weight: 700; font-size: 1.05rem; color: #111; }
.producto-detalle-descripcion { font-size: 0.95rem; color: var(--text-muted); line-height: 1.65; margin-top: 22px; padding-top: 16px; max-width: none; }
.producto-detalle-descripcion > p:first-child { color: #222; font-weight: 600; }
@media (max-width: 640px) { .producto-detalle-info h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); } .producto-detalle-info .pz-ganancia .pz-ganancia-cifra { font-size: 1.5rem; } }

/* Título de la ficha: tamaño contenido; los nombres largos bajan un escalón para no ocupar media pantalla */
.producto-detalle-info h1 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.08; font-weight: 800; }
.producto-detalle-info h1.h1-largo { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.15; }
@media (max-width: 640px) { .producto-detalle-info h1 { font-size: clamp(1.35rem, 6vw, 1.8rem); } .producto-detalle-info h1.h1-largo { font-size: 1.2rem; } }
/* Título de la ficha con Manrope (tipografía normal, no extendida) en mayúscula/minúscula natural */
.producto-detalle-info h1, .producto-detalle-info h1.h1-largo { font-family: var(--font-body); text-transform: none; font-weight: 800; letter-spacing: -0.015em; }
.producto-detalle-info h1 { font-size: clamp(1.6rem, 2.9vw, 2.3rem); line-height: 1.12; }
.producto-detalle-info h1.h1-largo { font-size: clamp(1.4rem, 2.3vw, 1.85rem); line-height: 1.18; }
@media (max-width: 640px) { .producto-detalle-info h1 { font-size: clamp(1.4rem, 6.4vw, 1.9rem); } .producto-detalle-info h1.h1-largo { font-size: 1.3rem; } }

/* Zona de precios como UN solo bloque: precio mayorista | PVP sugerido | Tu ganancia */
.producto-detalle-info .pz-precios { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 0; margin-top: 16px; background: #fff; border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; }
.producto-detalle-info .pz-mayorista { justify-content: center; padding: 14px 22px; }
.producto-detalle-info .pz-mayorista .pz-valor,
.producto-detalle-info .pz-mayorista .precio-valor { font-size: clamp(1.8rem, 3.2vw, 2.4rem); color: #1a8f3c; }
.producto-detalle-info .pz-pvp { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 14px 22px; margin: 0; border-left: 1px solid var(--border-subtle); font-size: 0; }
.producto-detalle-info .pz-pvp .pvp-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.producto-detalle-info .pz-pvp .pvp-valor { font-size: 1.2rem; font-weight: 700; color: #222; }
.producto-detalle-info .pz-ganancia { flex: 1 1 auto; justify-content: flex-start; margin: 0 !important; padding: 14px 22px; border-radius: 0; border-left: 1px solid #cfe8d4; }
@media (max-width: 640px) {
  .producto-detalle-info .pz-precios { flex-wrap: wrap; }
  .producto-detalle-info .pz-mayorista { flex: 1 1 100%; padding: 12px 16px 8px; }
  .producto-detalle-info .pz-pvp { flex: 0 0 auto; padding: 8px 16px 12px; border-left: 0; }
  .producto-detalle-info .pz-ganancia { flex: 1 1 0; padding: 8px 14px; width: auto; border-left: 0; border-top: 0; }
}
.producto-detalle-info .pz-ganancia .pz-ganancia-cifra { font-size: 1.5rem; }
/* El bloque de precios no recorta el tooltip "Precio Venta a Público": overflow visible + esquinas en los extremos */
.producto-detalle-info .pz-precios { overflow: visible; }
.producto-detalle-info .pz-mayorista { border-radius: 13px 0 0 13px; }
.producto-detalle-info .pz-ganancia { border-radius: 0 13px 13px 0; }
@media (max-width: 640px) {
  .producto-detalle-info .pz-mayorista { border-radius: 13px 13px 0 0; }
  .producto-detalle-info .pz-ganancia { border-radius: 0 0 13px 0; }
  .producto-detalle-info .pz-pvp { border-radius: 0 0 0 13px; }
}
/* Ícono de "Tu ganancia" centrado con el texto (otra regla lo alineaba a la línea base) */
.producto-detalle-info .producto-margen.pz-ganancia { display: flex; align-items: center; gap: 12px; }
.producto-detalle-info .pz-ganancia .pz-ganancia-icono { align-self: center; flex: none; margin: 0; display: block; }
.producto-detalle-info .pz-ganancia .pz-ganancia-texto { display: flex; flex-direction: column; justify-content: center; align-self: center; }

/* Botones "Agregar" de las tarjetas: negro con detalle amarillo (igual que el de la ficha) */
.producto-card .btn-agregar-carrito:not(:disabled):not(.btn-agregar-carrito-disabled) {
  background: #111; color: #fff; border: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 800; letter-spacing: 0.02em;
}
.producto-card .btn-agregar-carrito:not(:disabled):not(.btn-agregar-carrito-disabled)::after { content: '\203A'; font-size: 1.25em; line-height: 1; color: #FFC400; transition: transform 0.18s ease; }
.producto-card .btn-agregar-carrito:not(:disabled):not(.btn-agregar-carrito-disabled):hover { background: #000; box-shadow: 0 8px 18px -10px rgba(0,0,0,0.65); }
.producto-card .btn-agregar-carrito:not(:disabled):not(.btn-agregar-carrito-disabled):hover::after { transform: translateX(3px); }
.producto-card .btn-agregar-carrito:focus-visible { outline: 2px solid #FFC400; outline-offset: 2px; }

/* =========================================================================
   Directorio de distribuidores autorizados (mis-datos.php #directorio y
   admin/directorio.php). Ver includes/directorio-helpers.php.
   ========================================================================= */
/* Inputs a 16px: iOS hace zoom al enfocar cualquier input menor a 16px. */
.md-directorio .form-field input, .md-directorio .form-field select, .md-directorio .form-field textarea { font-size: 16px; }
/* 2026-10-06: TODOS los inputs del sitio a 16px — bajo eso iOS hace zoom al enfocar y rompe la navegación */
.form-field input, .form-field select, .form-field textarea, .form-compacto .form-field input, .form-compacto .form-field select, .form-compacto .form-field textarea { font-size: 16px; }
.md-dir-estado { display: flex; flex-direction: column; gap: 6px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--bg-panel); font-size: 0.88rem; font-weight: 700; margin-bottom: 14px; color: var(--text-muted); }
.md-dir-estado small { font-weight: 500; color: var(--text-muted); font-size: 0.8rem; }
.md-dir-estado-ok { border-color: #BFE3B0; background: #F3FBEF; color: var(--green-dark); }
.md-dir-estado-falta { border-color: #F3B7BF; background: #FFF1F3; color: var(--red-accent); }
.md-dir-estado-espera { border-color: #F5D58A; background: #FFF8E6; color: #8A5B00; }
.md-dir-aviso-dias { font-weight: 600; color: #8A5B00; }
.md-dir-guardado { color: var(--green-dark); font-size: 0.86rem; font-weight: 700; margin: 0 0 12px; }
.md-dir-optin { align-items: flex-start; line-height: 1.45; }
.md-dir-optin strong { font-weight: 700; }
.md-dir-check-online { display: flex; align-items: flex-end; }
.md-dir-imagenes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 4px 0 18px; }
.md-dir-imagen { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; }
.md-dir-preview { width: 120px; height: 120px; }
.md-dir-preview.md-dir-preview-foto { width: 100%; max-width: 240px; height: 140px; }
.md-dir-preview img { width: 100%; height: 100%; object-fit: cover; }
.md-dir-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.md-dir-file:focus-visible + .md-dir-ayuda { outline: 2px solid var(--blue); border-radius: 4px; }
.md-dir-btn-archivo { cursor: pointer; }
.md-dir-ayuda { font-size: 0.78rem; color: var(--text-muted); }
.seller-editar-principal .md-dir-guardar { align-self: flex-start; }
.md-dir-guardar.md-dir-guardando { opacity: 0.7; cursor: progress; }
@media (max-width: 720px) {
  .md-dir-imagenes { grid-template-columns: 1fr; }
  .md-dir-form .form-row { grid-template-columns: 1fr; }
  .md-dir-preview.md-dir-preview-foto { max-width: 100%; }
}

/* Admin: admin/directorio.php */
.admin-directorio .form-subtitle { max-width: 760px; }
.admin-dir-resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 28px; }
.admin-dir-resumen > div { background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.admin-dir-resumen strong { font-size: 1.6rem; line-height: 1; }
.admin-dir-resumen span { font-size: 0.78rem; color: var(--text-muted); line-height: 1.3; }
.admin-dir-h2 { font-size: 1.1rem; margin: 30px 0 12px; }
.admin-dir-grupo { margin-bottom: 22px; }
.admin-dir-grupo-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-dir-grupo-cab h3 { font-size: 0.98rem; margin: 0; display: flex; align-items: center; gap: 8px; }
.admin-dir-conteo { font-size: 0.72rem; font-weight: 700; background: #EEF0F3; color: var(--text-muted); border-radius: 999px; padding: 2px 9px; }
.admin-dir-dist { display: flex; align-items: center; gap: 10px; }
.admin-dir-mini-logo { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border-subtle); flex-shrink: 0; }
.admin-dir-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-dir-chips .md-chip { cursor: default; }
.admin-dir-dias { font-weight: 700; color: var(--green-dark); }
.admin-dir-dias.por-vencer { color: #8A5B00; }
@media (max-width: 720px) {
  .admin-dir-resumen { grid-template-columns: 1fr; }
}


/* ========================================
   MARCA NUTRIVITAL: página con la identidad de la marca (verde hoja, crema, formas redondeadas).
   Solo estética; se activa con body.marca-tema-nutrivital (marca.php?slug=nutrivital)
   ======================================== */
body.marca-tema-nutrivital {
  background:
    radial-gradient(520px 360px at 105% 8%, rgba(110,190,70,0.16), transparent 70%),
    radial-gradient(460px 320px at -8% 30%, rgba(110,190,70,0.12), transparent 70%),
    linear-gradient(180deg, #F3F9EC 0, #FBFDF8 520px, #fff 100%);
}
.marca-tema-nutrivital .marca-hero {
  background: linear-gradient(120deg, #FFFFFF 0%, #EAF6DF 55%, #D6EDC0 100%);
  border-color: #BFE0A5;
  box-shadow: 0 18px 38px -24px rgba(47,143,42,0.65);
  border-radius: 22px;
}
.marca-tema-nutrivital .marca-hero::after { background: radial-gradient(circle, rgba(126,211,33,0.35), transparent 70%); }
.marca-tema-nutrivital .marca-hero::before {
  content: ''; position: absolute; right: 36px; bottom: -34px; width: 150px; height: 150px;
  border-radius: 0 100% 0 100%; background: linear-gradient(135deg, rgba(63,165,53,0.22), rgba(63,165,53,0.05));
  transform: rotate(-18deg); pointer-events: none;
}
.marca-tema-nutrivital .marca-hero-logo { box-shadow: 0 0 0 3px #4FB43A, 0 14px 26px -12px rgba(31,77,31,0.55); }
.marca-tema-nutrivital .marca-hero-info h1 { color: #1F4D1F; font-family: var(--font-body); font-weight: 800; letter-spacing: -0.02em; text-transform: none; }
.marca-tema-nutrivital .marca-lema { margin: -2px 0 6px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #3FA535; }
.marca-tema-nutrivital .marca-hero-descripcion { color: #2E4A2E; }
.marca-tema-nutrivital .marca-chips li { background: #fff; color: #2E4A2E; border-color: #D3E8C2; }
.marca-tema-nutrivital .marca-chips .marca-chip-ok { background: #E3F5D6; color: #1F6B1A; }
.marca-tema-nutrivital .marca-chips .marca-chip-full { background: #1F4D1F; color: #B8F26B; }

.marca-tema-nutrivital .producto-card { border: 1px solid #DDEBD0; border-radius: 18px; background: #fff; transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease; }
.marca-tema-nutrivital .producto-card:hover { border-color: #A9D68A; box-shadow: 0 18px 34px -20px rgba(47,143,42,0.55); }
.marca-tema-nutrivital .producto-marca, .marca-tema-nutrivital .producto-card .producto-marca-nombre { color: #3FA535; font-weight: 700; letter-spacing: 0.06em; }
.marca-tema-nutrivital .producto-card .producto-img-wrap, .marca-tema-nutrivital .producto-card .producto-imagen { background: linear-gradient(180deg, #F6FBF1, #fff); }
.marca-tema-nutrivital .producto-card .btn-agregar-carrito:not(:disabled):not(.btn-agregar-carrito-disabled) { background: linear-gradient(135deg, #4FB43A, #2F8F2A); color: #fff; border-radius: 999px; }
.marca-tema-nutrivital .producto-card .btn-agregar-carrito:not(:disabled):not(.btn-agregar-carrito-disabled)::after { color: #fff; }
.marca-tema-nutrivital .producto-card .btn-agregar-carrito:not(:disabled):not(.btn-agregar-carrito-disabled):hover { background: linear-gradient(135deg, #3FA535, #247A22); box-shadow: 0 10px 20px -10px rgba(47,143,42,0.8); }
.marca-tema-nutrivital .marca-seccion-titulo { color: #1F4D1F; }
.marca-tema-nutrivital .producto-volver { color: #2E6B2A; }
.marca-tema-nutrivital .producto-marca-label { color: #3FA535; font-weight: 700; letter-spacing: 0.06em; }

/* Página de marca: la grilla respeta el ancho de la caja de la cabecera (antes 6 columnas fijas desbordaban y asomaba una tarjeta de más) */
.marca-pagina .productos-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.marca-pagina .productos-grid > * { min-width: 0; }
.marca-pagina .container { overflow-x: clip; }
@media (max-width: 640px) { .marca-pagina .productos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ========================================
   MARCA FAST NUTRITION: identidad oscura (grafito + dorado + rojo), agresiva y deportiva.
   Solo estética; body.marca-tema-fast (marca.php?slug=fast_nutrition)
   ======================================== */
body.marca-tema-fast {
  background:
    radial-gradient(620px 420px at 100% 0%, rgba(214,40,40,0.20), transparent 70%),
    radial-gradient(560px 380px at 0% 18%, rgba(245,184,0,0.14), transparent 70%),
    linear-gradient(180deg, #17181B 0, #1D1E22 560px, #232428 100%);
}
.marca-tema-fast .marca-pagina { color: #e9e9e6; }
.marca-tema-fast .producto-volver { color: #cfcfca; }
.marca-tema-fast .producto-volver:hover { color: #F5B800; }
.marca-tema-fast .marca-hero {
  background: linear-gradient(120deg, #101113 0%, #1B1C20 55%, #2B1714 100%);
  border: 1px solid #3a3a3f; border-top: 3px solid #F5B800;
  box-shadow: 0 22px 44px -24px rgba(0,0,0,0.9);
  border-radius: 16px;
}
.marca-tema-fast .marca-hero::after { background: radial-gradient(circle, rgba(214,40,40,0.38), transparent 70%); }
.marca-tema-fast .marca-hero::before {
  content: ''; position: absolute; right: 30px; top: -10px; width: 120px; height: 160%;
  background: linear-gradient(115deg, transparent 38%, rgba(245,184,0,0.5) 38% 46%, transparent 46% 56%, rgba(245,184,0,0.3) 56% 62%, transparent 62%);
  transform: skewX(-12deg); opacity: 0.55; pointer-events: none;
}
.marca-tema-fast .marca-hero-logo { background: #000; border-color: #000; box-shadow: 0 0 0 3px #F5B800, 0 14px 28px -10px rgba(0,0,0,0.9); }
.marca-tema-fast .marca-hero-info h1 { color: #fff; letter-spacing: 0.01em; }
.marca-tema-fast .marca-lema { margin: -2px 0 6px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #F5B800; }
.marca-tema-fast .marca-hero-descripcion { color: #cfcfca; }
.marca-tema-fast .marca-chips li { background: rgba(255,255,255,0.07); color: #e9e9e6; border-color: rgba(255,255,255,0.14); }
.marca-tema-fast .marca-chips .marca-chip-ok { background: rgba(60,200,100,0.16); color: #7be3a0; border-color: rgba(60,200,100,0.35); }
.marca-tema-fast .marca-chips .marca-chip-full { background: #F5B800; color: #111; border-color: #F5B800; }
.marca-tema-fast .marca-estrellas-texto { color: #cfcfca; }

.marca-tema-fast .producto-card { background: #fff; border: 1px solid #2f3035; border-radius: 14px; border-top: 3px solid transparent; transition: box-shadow 0.25s ease, border-color 0.25s ease; }
.marca-tema-fast .producto-card:hover { border-top-color: #F5B800; box-shadow: 0 20px 38px -18px rgba(245,184,0,0.35), 0 0 0 1px rgba(245,184,0,0.5); }
.marca-tema-fast .producto-marca-label { color: #b8860b; font-weight: 800; letter-spacing: 0.08em; }
.marca-tema-fast .producto-card .btn-agregar-carrito:not(:disabled):not(.btn-agregar-carrito-disabled) { background: #F5B800; color: #111; border-radius: 10px; }
.marca-tema-fast .producto-card .btn-agregar-carrito:not(:disabled):not(.btn-agregar-carrito-disabled)::after { color: #111; }
.marca-tema-fast .producto-card .btn-agregar-carrito:not(:disabled):not(.btn-agregar-carrito-disabled):hover { background: #ffc81f; box-shadow: 0 10px 22px -10px rgba(245,184,0,0.9); }
.marca-tema-fast .marca-seccion-titulo { color: #fff; }
.marca-tema-fast .marca-resenas, .marca-tema-fast .marca-resena-item, .marca-tema-fast .marca-resena-login { color: #d6d6d1; }

/* Fast Nutrition: fondo de página CLARO; solo la caja de la cabecera conserva la identidad oscura (grafito, dorado, rojo) */
body.marca-tema-fast { background: linear-gradient(180deg, #F6F5F2 0, #FAFAF8 480px, #fff 100%); }
.marca-tema-fast .marca-pagina { color: inherit; }
.marca-tema-fast .producto-volver { color: var(--text-muted); }
.marca-tema-fast .producto-volver:hover { color: #b8860b; }
.marca-tema-fast .marca-seccion-titulo { color: #17181B; }
.marca-tema-fast .marca-resenas, .marca-tema-fast .marca-resena-item, .marca-tema-fast .marca-resena-login { color: inherit; }
.marca-tema-fast .producto-card { border-color: #E4E2DC; box-shadow: 0 8px 20px -16px rgba(0,0,0,0.35); }
.marca-tema-fast .producto-card:hover { box-shadow: 0 18px 34px -18px rgba(184,134,11,0.45), 0 0 0 1px rgba(245,184,0,0.6); }
.marca-tema-fast .marca-hero { box-shadow: 0 20px 40px -22px rgba(23,24,27,0.7); }


/* Ficha: producto sin stock. "Sin stock" ocupa el lugar, alto y ancho del botón de compra; "Avisarme" va debajo */
.producto-detalle-info .producto-agotado-acciones { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 16px; }
.producto-detalle-info .producto-agotado-acciones .btn-agregar-carrito,
.producto-detalle-info .producto-agotado-acciones .btn-agregar-carrito-disabled {
  width: 100%; min-height: 56px; padding: 0 20px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e7e7e3; color: #6b6f76; border: 1px solid #d8d8d3; opacity: 1; box-shadow: none; cursor: not-allowed;
  font-size: 1rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}
.producto-detalle-info .producto-agotado-acciones .btn-agregar-carrito::after { content: none; }
.producto-detalle-info .producto-agotado-acciones .btn-avisar-stock { width: 100%; min-height: 48px; border-radius: 10px; font-size: 0.92rem; font-weight: 800; background: #fff; }

/* Sin stock: la fila de cantidad + "Agregar al carrito" se oculta de verdad (display:flex pisaba el atributo hidden) */
.producto-compra-fila[hidden], .producto-detalle-info .producto-compra-fila[hidden], [data-rol="preventa"][hidden] { display: none !important; }


/* Preventa de producción (ficha de producto sin stock) */
.preventa-caja { margin-top: 16px; padding: 16px 18px; border: 2px solid #111; border-radius: 14px; background: linear-gradient(180deg, #fffbe6 0, #fff 70%); }
.preventa-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 6px; }
.preventa-sello { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #111; color: #FFC400; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.preventa-cab strong { font-size: 0.95rem; color: #111; }
.preventa-texto { margin: 0 0 10px; font-size: 0.85rem; line-height: 1.5; color: #3b3b3b; }
.preventa-tabla { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid #ececea; font-size: 0.9rem; }
.preventa-tabla th { padding: 8px 12px 5px; text-align: left; font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: #6b6f76; background: #fff; }
.preventa-tabla td { padding: 10px 12px; border-top: 1px solid #f0f0ec; color: var(--text-body); }
.preventa-tabla td:nth-child(3), .preventa-tabla td:nth-child(4) { font-weight: 700; color: #1a8f3c; }
.preventa-tabla td:nth-child(2) { font-weight: 800; color: #111; }
.preventa-tabla .pv-pct { color: var(--text-body); font-weight: 500; }
.preventa-fila-tramo { cursor: pointer; transition: background 0.15s; }
.preventa-fila-tramo:hover td { background: #fafaf7; }
.preventa-fila-tramo.active td { background: #fff3c4; }
.preventa-fila-tramo:focus-visible { outline: 2px solid #111; outline-offset: -2px; }
.preventa-compra { display: flex; align-items: stretch; gap: 0; margin-top: 12px; }
.preventa-compra .producto-cantidad { height: 52px; margin-top: 0; flex: none; }
.preventa-compra .producto-cantidad-btn, .preventa-compra .producto-cantidad-input { height: 100%; }
.preventa-compra .producto-cantidad-input { width: 66px; font-weight: 700; font-size: 1.05rem; color: #111; }
.preventa-agregar { flex: 1 1 auto; margin-left: 12px; min-height: 52px; border: 0; border-radius: 10px; background: #111; color: #fff; font: 800 0.95rem inherit; font-family: inherit; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.preventa-agregar::after { content: '\203A'; color: #FFC400; font-size: 1.5rem; line-height: 1; }
.preventa-agregar:hover { background: #000; box-shadow: 0 10px 22px -10px rgba(0,0,0,0.6); }
.preventa-resumen { margin: 10px 0 0; font-size: 0.88rem; color: #333; line-height: 1.5; }
.preventa-empuje { color: #1a8f3c; font-weight: 600; font-size: 0.82rem; }
@media (max-width: 640px) { .preventa-caja { padding: 14px; } .preventa-agregar { font-size: 0.82rem; margin-left: 8px; } .preventa-tabla th, .preventa-tabla td { padding-left: 8px; padding-right: 8px; } }

/* Carrito: etiqueta de línea de preventa */
.carrito-item-preventa-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #111; color: #FFC400; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }


/* Sin stock + Avisarme en UNA sola fila (en pantallas muy angostas bajan a dos filas) */
.producto-detalle-info .producto-agotado-acciones { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.producto-detalle-info .producto-agotado-acciones .btn-agregar-carrito,
.producto-detalle-info .producto-agotado-acciones .btn-agregar-carrito-disabled { flex: 1 1 200px; width: auto; }
.producto-detalle-info .producto-agotado-acciones .btn-avisar-stock { flex: 1 1 200px; width: auto; min-height: 56px; }
.preventa-compra .preventa-cantidad { cursor: default; caret-color: transparent; }

/* Con stock: "Sin stock" + "Avisarme" se ocultan de verdad (display:flex pisaba [hidden]); y quedan alineados en la fila */
.producto-agotado-acciones[hidden], .producto-detalle-info .producto-agotado-acciones[hidden] { display: none !important; }
.producto-detalle-info .producto-agotado-acciones > * { margin-top: 0; margin-bottom: 0; align-self: stretch; }

/* ========================================
   BOTONES PRIMARIOS EN TODO EL SITIO: negro con detalle amarillo (flecha), igual que "Agregar al carrito"
   ======================================== */
.btn-primary, .cookies-btn-ok, .cookies-btn-guardar {
  background: #111; color: #fff; box-shadow: none;
}
.btn-primary:hover, .cookies-btn-ok:hover, .cookies-btn-guardar:hover {
  background: #000; box-shadow: 0 10px 22px -10px rgba(0,0,0,0.65);
}
.btn-primary::after { content: '\203A'; margin-left: 8px; color: #FFC400; font-size: 1.35em; line-height: 1; transition: transform 0.18s ease; }
.btn-primary:hover::after { transform: translateX(3px); }
.btn-primary:focus-visible { outline: 2px solid #FFC400; outline-offset: 3px; }
.btn-agregar-carrito:not(:disabled):not(.btn-agregar-carrito-disabled) { background: #111; color: #fff; }
.btn-agregar-carrito:not(:disabled):not(.btn-agregar-carrito-disabled):hover { background: #000; }
.btn-agregar-carrito:not(:disabled):not(.btn-agregar-carrito-disabled)::after { content: '\203A'; margin-left: 6px; color: #FFC400; font-size: 1.25em; line-height: 1; }
/* sin flecha donde no tiene sentido (cargando, deshabilitados, iconos) */
.btn-primary:disabled::after, .btn-primary[aria-busy="true"]::after, .btn-primary.cargando::after { content: none; }
/* La flecha amarilla va en la MISMA línea que el texto (el .btn base apila en columna) */
.btn-primary { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; white-space: nowrap; }
.btn-primary::after { margin-left: 8px; flex: none; }

/* Catálogo en escritorio: el número de columnas se ajusta al ancho real (antes 6 fijas desbordaban y la última tarjeta se cortaba).
   Con mínimo de 250 px por tarjeta, la grilla siempre llena el ancho y queda alineada en ambos costados. */
@media (min-width: 1025px) {
  .productos-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
  .productos-grid > * { min-width: 0; }
}

/* "También te puede interesar": ocupa TODO el ancho de la caja (ya no está limitada a 1048 px) y las tarjetas no cortan el botón */
@media (min-width: 981px) {
  .productos-relacionados .productos-grid { max-width: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
}
@media (min-width: 1025px) {
  .productos-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
}
.card-compra .btn-agregar-carrito:not(:disabled):not(.btn-agregar-carrito-disabled) { letter-spacing: 0; padding-left: 8px; padding-right: 8px; white-space: nowrap; overflow: hidden; }
.card-compra .btn-agregar-carrito:not(:disabled):not(.btn-agregar-carrito-disabled)::after { margin-left: 4px; }

.productos-relacionados h2 .relacionados-sub { display: inline-block; margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: #111; color: #FFC400; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: middle; }

/* "También te puede interesar": MÁXIMO UNA FILA. Las filas implícitas miden 0 y se recortan, así que solo se ven
   las tarjetas que caben en una línea (sin dejar una tarjeta suelta debajo). Padding/margen negativo para no cortar sombras. */
.productos-relacionados .productos-grid { grid-template-rows: auto; grid-auto-rows: 0; overflow: hidden; padding: 8px 8px 14px; margin: -8px -8px -14px; }
.productos-relacionados .productos-grid > * { align-self: start; }


/* Franquicias: etiqueta de pedido de reposición de stock */
.fq-tag-reposicion { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: #111; color: #FFC400; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }


/* Panel seller: subítem del menú lateral (Carritos abandonados bajo Pedidos) */
.seller-sidebar-link.seller-sidebar-sublink { margin-left: 18px; padding-left: 28px; font-size: 0.86rem; position: relative; }
.seller-sidebar-link.seller-sidebar-sublink::before { content: ''; position: absolute; left: 12px; top: 0; bottom: 50%; width: 10px; border-left: 2px solid var(--border-subtle); border-bottom: 2px solid var(--border-subtle); border-bottom-left-radius: 6px; }
.seller-usuarios-atajo { margin: 4px 0 14px; }
@media (max-width: 900px) { .seller-sidebar-link.seller-sidebar-sublink { margin-left: 0; padding-left: 14px; font-size: 0.9rem; } .seller-sidebar-link.seller-sidebar-sublink::before { display: none; } }


/* Actividad de usuarios (seller/usuario-actividad.php y chip en seller/usuarios.php) */
.usuarios-actividad { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #eef6ff; color: #1a5fb4; font-size: 0.78rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.usuarios-actividad:hover { background: #dcebff; }
.usuarios-actividad-vacia { background: #f2f2ef; color: var(--text-muted); font-weight: 500; }
.act-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0 22px; }
.act-stat { padding: 14px 16px; background: #fff; border: 1px solid var(--border-subtle); border-radius: 12px; display: flex; flex-direction: column; gap: 4px; }
.act-stat span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.act-stat strong { font-size: 1.7rem; line-height: 1; }
.act-stat .act-stat-fecha { font-size: 1rem; }
.act-titulo { margin: 22px 0 10px; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.03em; }
.act-titulo small { font-size: 0.72rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.act-lista { display: grid; gap: 8px; }
.act-fila { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #fff; border: 1px solid var(--border-subtle); border-radius: 10px; text-decoration: none; color: inherit; }
.act-fila:hover { border-color: #bdbdb6; }
.act-fila img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: #f6f6f3; flex: none; }
.act-fila-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.act-fila-texto small { color: var(--text-muted); font-size: 0.74rem; }
.act-veces { flex: none; padding: 3px 10px; border-radius: 999px; background: #111; color: #FFC400; font-size: 0.74rem; font-weight: 800; }
.act-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.act-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.act-chips li { padding: 4px 12px; border-radius: 999px; background: #f2f2ef; font-size: 0.8rem; }
.act-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.act-timeline li { display: flex; align-items: baseline; gap: 10px; padding: 7px 4px; border-bottom: 1px solid #efefeb; font-size: 0.88rem; }
.act-hora { flex: none; width: 118px; color: var(--text-muted); font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.act-ico { flex: none; width: 22px; text-align: center; }
@media (max-width: 720px) { .act-stats { grid-template-columns: repeat(2, 1fr); } .act-hora { width: 96px; } }

/* Usuarios: la pastilla de actividad va DENTRO de la columna de accesos (no agrega una columna a la grilla) */
.usuarios-fila { grid-template-columns: minmax(160px, 1fr) 215px 90px 110px 130px 32px; }
.usuarios-accesos { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
@media (max-width: 900px) { .usuarios-fila { grid-template-columns: 1fr auto; } .usuarios-accesos { flex-wrap: wrap; } }
/* subítem del menú lateral en una sola línea */
.seller-sidebar-link.seller-sidebar-sublink { white-space: nowrap; font-size: 0.82rem; padding-left: 24px; }

.usuarios-wa { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #e6f6e9; color: #1a7a38; font-size: 0.78rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.usuarios-wa:hover { background: #cfeed6; }
.usuarios-fila { grid-template-columns: minmax(160px, 1fr) 250px 90px 110px 130px 32px; }
/* subítem del menú lateral: que no se salga de la caja */
.seller-sidebar-link.seller-sidebar-sublink { margin-left: 14px; padding-left: 22px; padding-right: 8px; gap: 6px; }
.seller-sidebar-link.seller-sidebar-sublink .seller-sidebar-cantidad { margin-left: 2px; }

.act-carrito { margin: 16px 0 6px; padding: 14px 16px; background: #fffbe6; border: 1px solid #f0e2a0; border-radius: 14px; }
.act-carrito .act-titulo { margin-top: 0; }
.act-carrito-items { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.act-carrito-items li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: #fff; border-radius: 8px; }
.act-carrito-items img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: #f6f6f3; flex: none; }
.act-carrito-sub { flex: none; font-weight: 700; font-size: 0.88rem; }
.act-carrito-total { margin: 4px 0 10px; font-size: 1rem; }