/* ==========================================================================
   MAIN.CSS — CSS consolidado MOBILE FIRST
   Grupo Crisol · new.grupocrisol.com
   Orden:
     1. Tokens (mobile-first)
     2. Base (reset, tipografía, iconos, enlaces)
     3. Layout (contenedores, grids, footer)
     4. Cabecera
   (continúa en siguientes secciones)
   ========================================================================== */


/* ── Accesibilidad: ocultar visualmente pero accesible para lectores de pantalla ── */
.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;
}

/* ==========================================================================
   1) TOKENS · MOBILE FIRST
   Base = móvil (<500px). Escala con min-width.
   ========================================================================== */

:root{
  /* ── Colores marca ── */
  --r: #8e1f30;
  --rO: #6a1724;
  --rC: #c78f98;
  --rC2: #e9d2d6;
  --rC3: #f1e7e9;
  --g: #545759;
  --gO: #1b1c1d;
  --g2: #6b6e70;
  --gM: #999;
  --gC: #ddd;
  --gC2: #efefef;
  --gC3: #eeeeee6b;
  --w2:#faf7f2;

  /* ── Tipografía base ── */
  --fuente-base: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";

  /* ── Escala tipográfica — BASE MÓVIL (<500px) ── */
  --fXS: clamp(0.86rem, calc(0.840rem + 0.100vw), 0.92rem);
  --fS:  clamp(1.02rem, calc(0.990rem + 0.140vw), 1.08rem);
  --fM:  clamp(1.10rem, calc(1.060rem + 0.200vw), 1.18rem);
  --fL:  clamp(1.17rem, calc(1.120rem + 0.220vw), 1.28rem);
  --fXL: clamp(1.28rem, calc(1.200rem + 0.350vw), 1.45rem);
  --f2XL: clamp(1.6rem, calc(1.443rem + 0.696vw), 2rem);
  --f3XL: clamp(2.1rem, calc(1.748rem + 1.565vw), 3rem);
  --f4XL: clamp(3rem,   calc(2.217rem + 3.478vw), 5rem);

  /* ── Espacios — BASE MÓVIL (768px -15%) ── */
  --eXS:  clamp(0.128rem, calc(0.110rem + 0.074vw), 0.170rem);
  --eS:   clamp(0.298rem, calc(0.247rem + 0.222vw), 0.425rem);
  --eM:   clamp(0.468rem, calc(0.401rem + 0.296vw), 0.638rem);
  --eL:   clamp(0.638rem, calc(0.554rem + 0.370vw), 0.850rem);
  --eX:   clamp(0.935rem, calc(0.802rem + 0.592vw), 1.275rem);
  --eXL:  clamp(1.190rem, calc(0.990rem + 0.887vw), 1.700rem);
  --e2XL: clamp(1.700rem, calc(1.368rem + 1.478vw), 2.550rem);
  --e3XL: clamp(2.210rem, calc(1.744rem + 2.070vw), 3.400rem);
  --e4XL: clamp(3rem, calc(3rem + 4vw), 8rem);

  /* ── Border-radius ── */
  --rP: 8px;
  --rM: 16px;
  --rB: 999px;

  /* ── Sombras ── */
  --shadowC: 0 2px 6px rgba(0, 0, 0, 0.18);

  /* ── Line-height ── */
  --lhXS: 1.45;
  --lhS:  1.50;
  --lhM:  1.50;
  --lhL:  1.45;
  --lhXL: 1.35;
  --lh2XL: 1.30;
  --lh3XL: 1.15;
  --lh4XL: 1.05;
}

/* ── 501px+: tipografía tablet ── */
@media (min-width: 501px){
  :root{
    --fXS: clamp(0.84rem, calc(0.820rem + 0.090vw), 0.90rem);
    --fS:  clamp(1.00rem, calc(0.970rem + 0.130vw), 1.06rem);
    --fM:  clamp(1.07rem, calc(1.030rem + 0.180vw), 1.16rem);
  }
}

/* ── 769px+: tipografía + espacios desktop ── */
@media (min-width: 769px){
  :root{
    --fXS: clamp(0.75rem, calc(0.730rem + 0.087vw), 0.8rem);
    --fS:  clamp(0.95rem, calc(0.930rem + 0.087vw), 1rem);
    --fM:  clamp(1.05rem, calc(0.991rem + 0.261vw), 1.2rem);
    --fL:  clamp(1.15rem, calc(1.091rem + 0.261vw), 1.3rem);
    --fXL: clamp(1.25rem, calc(1.152rem + 0.435vw), 1.5rem);

    --eXS:  clamp(0.15rem, calc(0.130rem + 0.087vw), 0.2rem);
    --eS:   clamp(0.35rem, calc(0.291rem + 0.261vw), 0.5rem);
    --eM:   clamp(0.55rem, calc(0.472rem + 0.348vw), 0.75rem);
    --eL:   clamp(0.75rem, calc(0.652rem + 0.435vw), 1rem);
    --eX:   clamp(1.1rem,  calc(0.943rem + 0.696vw), 1.5rem);
    --eXL:  clamp(1.4rem,  calc(1.165rem + 1.043vw), 2rem);
    --e2XL: clamp(2rem,    calc(1.609rem + 1.739vw), 3rem);
    --e3XL: clamp(2.6rem,  calc(2.052rem + 2.435vw), 4rem);
  }
}


/* ==========================================================================
   2) BASE · Reset + tipografía + iconos + enlaces
   ========================================================================== */

*,
*::before,
*::after{ box-sizing: border-box; }
*{ margin: 0; }

html{
  color: var(--gO);
  font-family: var(--fuente-base);
  font-size: 100%;
  font-weight: 400;
  font-style: normal;
}

body{
  margin: 0;
  font-size: var(--fS);
  line-height: var(--lhS);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > .estructura,
body > main.principal{ flex: 1 0 auto; }

:focus-visible{
  outline: 2px solid var(--rC);
  outline-offset: 2px;
}

/* ── Enlaces globales ── */
a, .item-accion{
  color: var(--r);
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease-out;
}

a::after, .item-accion:not(.sin-subrayado)::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.12em;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease-out;
}

a:hover, a:focus-visible{ color: var(--gO); }

a:hover::after, a:focus-visible::after,
.item-accion:hover::after, .item-accion:focus-visible::after{
  transform: scaleX(1);
}

a{ text-decoration: none; }

/* No subrayado en enlaces con imagen */
a:has(img):hover::after,
a:has(img):focus-visible::after,
a:has(*[style*="background-image"]):hover::after,
a:has(*[style*="background-image"]):focus-visible::after,
a:has(.bg-cover):hover::after,
a:has(.bg-cover):focus-visible::after{
  content: none !important;
}

.lateral-icono-enlace:after, .footer-ig:after{ display: none; }

/* ── Tipografía por defecto ── */
h1{
  font-size: var(--f3XL);
  font-weight: 300;
  line-height: var(--lh3XL);
}

p{
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--gO);
}

section header h2{
  font-weight: 300;
  font-size: var(--f2XL);
  line-height: var(--lh3XL);
  padding-top: var(--eXL);
}

/* En todas las páginas EXCEPTO la home, las cabeceras de bloques
   secundarios llevan un separador superior dotted que las distingue
   del H1 del contenido principal y refuerza que son secciones de
   apoyo. En la home no aplica porque allí los bloques son contenido
   principal, no apoyo lateral. */
body:not([data-pagina="inicio"]) section > header.bloque-cabecera h2{
  border-top: 1px dotted var(--rC);
  padding-top: var(--eL);
  margin-top: var(--e2XL);
}

section h3{
  font-weight: 400;
  font-size: var(--fXL);
  line-height: var(--lhXS);
}

/* ── Iconos ── */
.cabecera-icono{ font: inherit; }

.icono{
  width: 1.1rem;
  height: 1.1rem;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}

.i-color{ fill: var(--g); }

.icono-boton{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--eXS);
  padding: var(--eS);
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--rM);
  border: none;
  background: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  color: var(--rC);
}

.icono-boton:hover{ background: var(--gC2); }

.icono-boton-carrito{ position: relative; }

.icono-boton-carrito [data-js="carrito-badge"]{ font-size: var(--fS); color: var(--g); }
.icono-boton-listas{
  font-size: 0;
  line-height: 0;
  color: var(--g);
}

.icono-listas{ color: var(--rC); }
.icono-boton--login{ color: var(--rC); }
.icono-carrito{ color: var(--rC); }



/* ==========================================================================
   3) LAYOUT · Contenedores, grids, footer
   ========================================================================== */

.cabecera-top{
  display: none;
  justify-content: flex-end;
  align-items: baseline;
  padding: var(--eXS) var(--eL) 0 0;
  font-size: var(--fXS);
}

/* ── DosColumnas ── */
.DosColumnas-layout{
  display: flex;
  flex-direction: column-reverse;
  position: relative;
}

.DosColumnas-layout .columna-resumen{
  position: static;
  top: auto;
  width: 100%;
}

.DosColumnas-layout .columna-resumen .resumen{
  position: static;
  top: auto;
}

@media (min-width: 501px){
  .DosColumnas-layout{
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    gap: var(--eL);
    align-items: flex-start;
    padding-top: var(--eXL);
  }
  .DosColumnas-layout .columna-resumen{
    position: sticky;
    top: var(--eXL);
    align-self: start;
    margin-bottom: var(--e3XL);
    max-height: calc(100vh - (var(--eXL) * 2));
    width: auto;
  }
}

@media (min-width: 1025px){
  .DosColumnas-layout{
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  }
}

/* ── Variante Paso 2/3 ──
   Layout sin row-spanning: el principal contiene direcciones+líneas en orden
   natural, y el resumen va aparte. En móvil "deshacemos" el principal con
   display:contents para que sus hijos (datos, direcciones/avisos, líneas) se
   conviertan en hermanos directos del resumen y poder reordenarlos:
     · móvil: direcciones/avisos → resumen → líneas
     · desktop: principal (datos+direcciones+líneas apiladas) | resumen sticky */
.DosColumnas-layout--checkout{
  flex-direction: column;
}
.DosColumnas-layout--checkout > .checkout-columna-principal{
  display: contents;
}
.DosColumnas-layout--checkout > .columna-resumen{ order: 1; }
.DosColumnas-layout--checkout > .checkout-columna-principal > .DosColumnas-layout__lineas{ order: 2; }
.DosColumnas-layout--checkout > .checkout-columna-principal > .DosColumnas-layout__lineas{
  padding: 0;
  margin-top: var(--eL);
}

@media (min-width: 501px){
  .DosColumnas-layout--checkout{
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  }
  /* Restauramos display block del principal y reseteamos orders */
  .DosColumnas-layout--checkout > .checkout-columna-principal{
    display: block;
  }
  .DosColumnas-layout--checkout > .columna-resumen{ order: initial; }
  .DosColumnas-layout--checkout > .checkout-columna-principal > .DosColumnas-layout__lineas{ order: initial; }
}

/* ── Wrappers ── */
.pagina{
  max-width: var(--maxW);
  margin: 0 auto;
  padding: 0 var(--eXL);
}

.seccion{ padding: var(--eXL) 0; }
.seccion--estrecha{ max-width: 1200px; margin-inline: auto; }

.fila{
  display: flex;
  flex-wrap: wrap;
  gap: var(--eL);
  align-items: stretch;
}

.col{
  flex: 1 1 18rem;
  min-width: 0;
}

.principal{
  margin: 0 auto;
  padding: var(--eS) clamp(15px, 2vw, 40px);
}

@media (min-width: 1024px){ .principal{ padding: var(--eS) clamp(50px, 5vw, 80px); } }
@media (min-width: 1281px){ .principal{ padding: var(--eS) clamp(70px, 6vw, 120px); } }
@media (min-width: 1440px){ .principal{ padding: var(--eS) clamp(100px, 8vw, 160px); } }

h2.seccion-familia{
  font-size: var(--fXL);
  line-height: var(--lhXL);
  font-weight: 500;
  padding-top: var(--eXL);
}

/* ── Buscador ── */
.buscador{
  display: flex;
  align-items: center;
  gap: var(--eS);
  padding: 0 var(--eM);
  border-radius: var(--rB);
  background: var(--gC2);
  width: 100%;
  outline: none;
}

.buscador:focus-within{
  outline: 1px solid var(--rC2);
  outline-offset: 2px;
}

.buscador__campo{
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--eS) 0;
  font: inherit;
  color: var(--gO);
}

.buscador__campo:focus{ outline: none; }
.buscador__campo::placeholder{ color: var(--gM); }

.buscador__boton{
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--rC);
}

.buscador__icono{
  width: var(--eXL);
  height: var(--eXL);
}

.buscador__icono:hover{ fill: var(--g); }

@media (min-width: 769px){
  .buscador__icono{
    width: var(--eL);
    height: var(--eL);
  }
}

/* ── Sticky resúmenes ── */
.carrito-resumen, .resumen-presupuesto{
  position: sticky;
  top: var(--eXL);
  align-self: start;
}

/* ── Grids de listado ── */
.grid-productos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  justify-content: start;
  align-items: stretch;
  gap: var(--eM);
  padding-bottom: var(--e2XL);
}

@media (min-width: 501px){
  .grid-productos{
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr))
  }
}

.grid-nav{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  justify-content: stretch;
  align-items: stretch;
  gap: var(--eS);
  margin-top: var(--eL);
}

/* ── Filtros contenedor ── */
.contenedor-filtros-chip{
  display: flex;
  flex-wrap: wrap;
  gap: var(--eM);
  padding: 0;
  margin: var(--eL) 0;
  align-items: center;
}

/* Móvil: chips ocultos, solo "Ver filtros" + "Ordenar" */
.filtros-chips{
  display: none;
  flex: 1;
  min-width: 0;
  min-height: 2.2rem;
}
.filtros-mas{ display: inline-flex; }

.filtro-orden-wrapper{
  margin-left: auto;
}

@media (min-width: 501px){
  .filtros-chips{
    display: flex;
    flex-wrap: nowrap;
    gap: var(--eS);
    align-items: center;
  }
}

@media (min-width: 1025px){
  .filtros-mas{ display: none; }
}

/* ── Hero layout helpers ── */
.hero-layout__frase{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  white-space: pre-line;
}

.hero-layout__miga{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  text-transform: uppercase;
  color: var(--g);
}

/* ── Resultado indicador ── */
.resultado-indicador{
  margin: var(--eL) 0;
  font-size: var(--fXS);
  line-height: var(--lhS);
  color: var(--gM);
}

.contenedor-filtros-chip + .resultado-indicador{
  margin-top: 0;
  margin-left: var(--eL);
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer{
  margin-top: var(--e2XL);
  padding: var(--eL) var(--eXL);
  background: var(--rC3);
  border-top: 1px solid var(--rC);
  position: relative;
}

.footer-cols{
  display: flex;
  flex-direction: column;
  gap: var(--eL);
}

.footer-h{
  font-size: var(--fS);
  line-height: var(--lhS);
  font-weight: 700;
  margin-bottom: 0;
}

.footer-p{
  font-size: var(--fS);
  line-height: var(--lhS);
  font-weight: 300;
  opacity: 0.9;
}

.footer-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  row-gap: var(--eXS);
  column-gap: var(--eL);
  flex-wrap: wrap;
}

.footer-list a{ color: var(--gO); }
.footer-list a:hover{ color: var(--r); }

.footer-bottom{
  margin-top: var(--eXL);
  padding-top: var(--eM);
  border-top: 1px solid var(--gC);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--eS);
}

.footer-copy{ opacity: 0.8; }

/* Icono flotante Instagram */
.footer-ig{
  position: absolute;
  top: 0;
  right: var(--eM);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  color: var(--rC);
  z-index: 2;
  background: white;
  border-radius: var(--rB);
  border: 1px solid var(--rC);
}

.footer-ig:hover{ border-radius: var(--rP); }

.footer-ig-icon{
  width: 100%;
  height: 100%;
  display: block;
  fill: var(--rC);
  stroke: none;
}

.footer-ig:hover .footer-ig-icon{ fill: var(--gO); }

@media (min-width: 769px){
  .footer{ padding: var(--eXL) var(--eXL); }
  .footer-cols{
    flex-direction: row;
    gap: var(--eXL);
  }
  .footer-h{ margin-bottom: var(--eS); }
  .footer-list{
    display: grid;
    gap: var(--eXS);
  }
  .footer-bottom{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .footer-ig{
    right: var(--eXL);
    width: calc(var(--eL) * 2);
    height: calc(var(--eL) * 2);
  }
}

@media (min-width: 1025px){
  .footer{ padding: var(--eXL) var(--eXL); }
  .footer-cols{ gap: var(--e3XL); }
  .footer-list li a{ font-size: var(--fXS); }
}


/* ==========================================================================
   LEGAL / AYUDA
   ========================================================================== */

.hero-layout-ayuda{ max-height: fit-content !important; }
.hero-layout-ayuda .hero-texto{ max-width: 100% !important; }
.bloque-ayuda p{ padding-bottom: var(--eM); }
.bloque-ayuda h3{
  border-bottom: 1px dotted var(--g);
  width: fit-content;
  margin-bottom: var(--eL);
  margin-top: var(--eL);
  color: var(--rC);
}
.bloque-ayuda .enfatizado{ background: var(--rC3); padding: var(--eM); }
.bloque-ayuda li::marker{ color: var(--rC); }
.bloque-ayuda strong{ font-weight: 500; color: var(--rC); }
.bloque-ayuda ul, .bloque-ayuda ol{ margin: var(--eL) 0; }

/* Tablas legales (privacidad, cookies) — bordes finos, cabeceras destacadas. */
.bloque-ayuda .legal-tabla{
  width: 100%;
  border-collapse: collapse;
  margin: var(--eL) 0;
  font-size: var(--fS);
}
.bloque-ayuda .legal-tabla th,
.bloque-ayuda .legal-tabla td{
  border: 1px solid var(--gC2);
  padding: var(--eS) var(--eM);
  text-align: left;
  vertical-align: top;
}
.bloque-ayuda .legal-tabla th{
  background: var(--gC3);
  font-weight: 600;
}
.bloque-ayuda .legal-tabla tr:nth-child(even) td{ background: rgba(0,0,0,0.02); }
.bloque-ayuda .legal-tabla code{
  font-family: 'Consolas','Monaco',monospace;
  background: rgba(0,0,0,0.04);
  padding: 0 0.3em;
  border-radius: 3px;
  font-size: 0.92em;
}
/* Bloque del modelo Anexo B (formulario de desistimiento). */
.bloque-ayuda .legal-formulario{
  margin: var(--eL) 0;
  padding: var(--eL);
  background: var(--gC3);
  border-left: 4px solid var(--rC);
  font-style: normal;
}
.bloque-ayuda .legal-formulario p{ margin: 0 0 var(--eM) 0; padding-bottom: 0; }
.bloque-ayuda .legal-formulario em{ color: var(--g); }

.resumen-ayuda ul{ margin-top: var(--eL); }
.resumen-ayuda li{
  list-style: none;
  margin-bottom: var(--eS);
  background: transparent;
  padding: var(--eS) var(--eM);
}
.resumen-ayuda li:hover{
  background: var(--gC3);
  border-radius: var(--rP);
}
.site-footer-list{
  padding-left: 0;
  border-bottom: 1px solid var(--gC);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--eL);
  row-gap: 0;
}
.site-footer-p{ font-size: var(--fXS); }
.resumen-titulo .t-desktop{ display: none; }
.resumen-titulo .t-mobile{ display: block; }
.item-acciones-ayuda{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--eL); margin-top: var(--eL); }

@media (min-width: 501px){
  .site-footer-list{
    display: block;
    justify-content: initial;
  }
  .resumen-titulo .t-desktop{ display: block; }
  .resumen-titulo .t-mobile{ display: none; }
}


/* ==========================================================================
   4) CABECERA · MOBILE FIRST
   ========================================================================== */

.cabecera{
  position: relative;
  top: 0;
  z-index: 950;
  background: white;
  border-bottom: 1px solid var(--rC2);
  box-shadow: 0 2px 8px var(--rC3);
}

.cabecera-contenido{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eXS);
  padding: 0 var(--eS) var(--eM);
  border-bottom: 1px solid var(--rC2);
  flex-wrap: wrap;
  margin: 0;
}

.cabecera-identidad, .cabecera-buscador, .cabecera-acciones{
  display: flex;
  align-items: center;
}

/* ── Identidad (móvil base) ── */
.cabecera-hamburguesa{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--eXS);
  min-width: 44px;
  min-height: 44px;
  order: 0;
}
.cabecera-hamburguesa .icono{
  width: 1.1rem;
  height: 1.1rem;
}

.cabecera-identidad{
  flex: 1 1 auto;
  gap: var(--eM);
  order: 1;
  min-width: 0;
}

.cabecera-identidad .claim{ display: none; }

/* ── Buscador (móvil base: full width) ── */
.cabecera-buscador{
  flex: 1 1 100%;
  max-width: none;
  min-width: 0;
  order: 3;
}

/* ── Acciones (móvil base) ── */
.cabecera-acciones{
  flex: 0 0 auto;
  gap: 0;
  order: 2;
}

.cabecera-acciones a{ display: none; }

/* ── Saludo ── */
.cabecera-saludo{
  padding: var(--eXS) var(--eL) 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  text-align: right;
  color: var(--g);
}

.cabecera-saludo span{
  color: var(--r);
  font-weight: 600;
  border-right: 1px solid var(--r);
  padding-right: var(--eL);
}

.cabecera-ayuda{
  color: var(--gO);
  text-decoration: none;
  font-weight: 800;
  font-size: var(--fXS);
  opacity: .5;
}

.cabecera-ayuda:hover{ color: var(--r); }

/* ── Logo ── */
.logo{
  display: inline-flex;
  align-items: center;
  color: inherit;
  margin-top: -3px;
}

.logo::after{ display: none; }

.logo-img{
  display: block;
  height: 28px;
  width: auto;
}

.claim::before{ content: "[ "; color: var(--r); }
.claim::after{ content: " ]"; color: var(--r); }

/* ── Badge carrito ── */
.badge-carrito{
  font-weight: 700;
  font-size: var(--fS);
  line-height: 1;
  padding: 0;
  margin-left: 0;
  color: var(--gO);
}

/* Wrapper para posicionar el indicador relativo al icono SVG */
.icono-boton-carrito-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.indicador-carro{
  position: absolute;
  top: -2px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: var(--rB);
  background-color: var(--r);
  pointer-events: none;
  opacity: 0;
}

.indicador-carro-activo{
  opacity: 1;
  animation: cabecera-carrito-pulso 1.8s ease-in-out infinite;
}

@keyframes cabecera-carrito-pulso{
  0%{ opacity: 0.2; }
  50%{ opacity: 1; }
  100%{ opacity: 0.2; }
}

/* Badge tipo carrito (ALM/PROV) */
.badge-tipo-carrito{
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--r);
  text-align: center;
  margin-top: -2px;
}

/* Checkout pasos completados */
.checkout-pasos__item--completado .checkout-pasos__numero{
  background: var(--rC);
  color: #fff;
}
.checkout-paso-contenido{ max-width: 1100px; margin: var(--eM) auto; padding: 0 var(--eS); }
@media (min-width: 501px){
  .checkout-paso-contenido{ padding: 0 var(--eM); }
}
.checkout-columna-principal{ min-width: 0; }

/* ── Cart: stock badge ── */
.carro-stock-badge{
  display: inline-block; font-size: 0.75em; font-weight: 600;
  padding: 0.15em 0.5em; border-radius: 3px; line-height: 1.4; white-space: nowrap;
  vertical-align: middle; margin-left: 4px;
}
.entrega-stock{ color: #2e7d32; background: #e8f5e9; }
.entrega-bajopedido{ color: #666; background: #f5f5f5; }

/* ── Cart: grouped lines ── */
.grupo-articulo{
  border-bottom: 1px solid var(--gC3); padding-bottom: var(--eM); margin-bottom: var(--eM);
}
.grupo-articulo__nombre{
  display: block; margin: 0; padding-top: var(--eS);
  font-size: var(--fXL); line-height: var(--lhXL); font-weight: 300;
}

/* Variante: foto izquierda + artículos derecha */
.variante-bloque{
  display: flex; gap: var(--eM); padding: var(--eS) 0;
  /* border-top: 1px dotted #e0e0e0; */
}
.variante-bloque:first-child{ border-top: none; }
.variante-foto{ flex: 0 0 80px; min-height: 80px; }
.variante-foto img{ width: 80px; height: auto; border-radius: 4px; }
.variante-desc{ font-weight: 600; font-size: 0.95em; margin: 0 0 4px; color: var(--g); }
.variante-articulos{ flex: 1; min-width: 0; }

/* Sublínea: un artículo dentro de una variante */
.sublinea{
  display: flex; align-items: center; gap: var(--eM);
  padding: 4px 0;
  /* border-top: 1px solid #f5f5f5; */
  flex-wrap: wrap;
  position: relative;
  transition: opacity .15s ease;
}
.sublinea:first-child{ border-top: none; }

/* Estado "actualizando": opacidad reducida + spinner overlay y bloqueo
   de interacción para evitar dobles clics mientras viaja el AJAX. */
.sublinea--actualizando{
  opacity: .55;
  pointer-events: none;
}
.sublinea--actualizando::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 1.5rem; height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
  border: 2px solid var(--rC);
  border-top-color: transparent;
  border-radius: 50%;
  animation: crisol-spin .7s linear infinite;
  pointer-events: none;
}

/* Botón / acción en estado de carga.
   Funciona en .boton-principal (rojo), .boton-secundario, .item-accion, etc.
   - Oculta el texto plano (color:transparent) y los hijos directos (svg, span)
     vía visibility:hidden, dejando un spinner centrado.
   - Spinner blanco por defecto (legible sobre rojo); en botones secundarios y
     acciones de texto plano se reemplaza por rojo institucional. */
.boton-cargando{
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.boton-cargando > *{ visibility: hidden; }
.boton-cargando::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 1.1rem; height: 1.1rem;
  margin: -0.55rem 0 0 -0.55rem;
  border: 2px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  animation: crisol-spin .7s linear infinite;
}
.boton-secundario.boton-cargando::after,
.item-accion.boton-cargando::after,
.doc-btn.boton-cargando::after{
  border-color: var(--r);
  border-top-color: transparent;
}

@keyframes crisol-spin{
  to { transform: rotate(360deg); }
}
/* min-width fuerza el wrap de .sublinea__stepper-precio cuando el ancho
   disponible es estrecho (columna izquierda en layout 2 col, móvil, etc.).
   Sin esto, el texto del info se encogía a 1 palabra por línea. */
.sublinea__info{ flex: 1 1 14rem; min-width: 14rem; }
.sublinea__codigos{ font-size: 0.8em; color: #888; margin: 0; }
.sublinea__atributos{ font-size: 0.85em; color: #555; margin: 0; }
.sublinea__precio-ud{ font-size: 0.8em; color: #888; margin: 2px 0 0; }
.sublinea__stepper-precio{
  display: flex; align-items: baseline; gap: 8px;
  flex-shrink: 0; margin-left: auto;
}
/* Papelera en stepper */
.stepper-btn--papelera{ padding: 0; }
.stepper-icono{ width: 16px; height: 16px; }

/* Sublínea de acciones (listas): fila separada debajo del artículo */
.sublinea--acciones{
  display: flex; gap: 6px; align-items: center;
  padding-top: 0; border-top: none;
}

@media (max-width: 600px){
  /* En móvil, info y stepper+precio se apilan en filas completas. */
  .sublinea__info{ flex: 0 0 100%; }
  .sublinea__stepper-precio{
    flex: 0 0 100%;
    margin-left: 0;
    justify-content: space-between;
  }
  /* En listas (página) la sublínea solo tiene el subtotal (sin stepper):
     space-between lo dejaría a la izquierda. Lo alineamos a la derecha.
     (En el carrito sí hay stepper, así que space-between queda bien.) */
  .lineas-listas .sublinea__stepper-precio{ justify-content: flex-end; }
}

/* En el aside lateral del carrito: info y stepper-precio en la misma línea
   siempre, aunque la viewport sea móvil. Specificity 2 clases > 1 clase
   sobrescribe la regla móvil de arriba. */
.lineas-aside .sublinea__info{
  flex: 1 1 auto;
  min-width: 0;
  max-width: 11.75rem;
}
.lineas-aside .sublinea__stepper-precio{
  flex: 0 0 auto;
  margin-left: auto;
  /* Stepper y subtotal en la misma fila (el bloque .sublinea__info se
     encoge para dejarles sitio). El subtotal queda a la derecha del
     stepper. */
  flex-direction: row;
  align-items: center;
}
/* Stepper compacto dentro del mini-carrito */
.lineas-aside .stepper{
  width: auto;
  padding: 2px;
  gap: 2px;
}
.lineas-aside .stepper button{
  width: 1.6rem;
  height: 1.6rem;
  font-size: var(--fL);
}
.lineas-aside .stepper input{
  width: 2.25rem;
  min-width: 2.25rem;
  font-size: var(--fS);
}
/* En el mini-carrito (aside) replicamos el layout móvil de /carrito/: las
   descripciones del artículo ocupan toda la fila y el stepper+subtotal van en
   una fila completa DEBAJO (stepper a la izquierda, subtotal a la derecha).
   Acotado a #lateral-carrito para no afectar al aside de listas. */
#lateral-carrito .lineas-aside .sublinea{ flex-wrap: wrap; }
#lateral-carrito .lineas-aside .sublinea__info{
  flex: 0 0 100%;
  max-width: none;
}
#lateral-carrito .lineas-aside .sublinea__stepper-precio{
  flex: 0 0 100%;
  margin-left: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* ── Avisos por línea (pedido almacén): no-STK, stock insuficiente ── */
.sublinea__avisos{
  flex: 0 0 100%;
  margin-top: var(--eXS);
}
.sublinea__aviso{
  margin: var(--eXS) 0 0;
  padding: var(--eXS) var(--eS);
  border-radius: var(--rP);
  font-size: var(--fS);
  line-height: var(--lhM);
}
.sublinea__aviso--bloqueante{
  background: #fff5d6;
  border: 1px solid #d8b500;
  color: #5a4500;
}
.sublinea__aviso--stock{
  background: #f6efef;
  border: 1px solid var(--rC);
  color: var(--gO);
}

/* ── Slogan (oculto en móvil) ── */
.cabecera-slogan{ display: none; }
.bloque-cabecera p{ display: none; }

/* ── CTA cabecera (móvil base) ── */
.cabecera-cta{
  display: flex;
  justify-content: flex-start;
  gap: var(--eM);
  margin-left: 0;
  margin-top: var(--eM);
  padding-bottom: var(--eM);
  align-items: flex-end;
  border-bottom: 1px dotted var(--rC2);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.cabecera-cta > *{ flex-shrink: 0; }

/* Cuando el panel "+ Más" está abierto, overflow visible para que el panel
   absoluto no quede cortado. Funciona con :has() (Chrome 105+). */
.cabecera-cta:has(.cabecera-cta-mas-wrapper.is-open){
  overflow: visible;
}

.cabecera-cta:last-child{ border-bottom: none; }

.cabecera-cta > a{ display: block; font-size: var(--fXS); }

/* "y fabricantes" solo en desktop */
.cabecera-cta-sufijo{ display: none; }

.cabecera-cta > a{ margin-bottom: 2px; }

.cabecera-cta-texto{ font-weight: 600; font-size: var(--fL); }

/* ── Botón "+ Más" y panel desplegable (overflow JS) ────────────────
   Aparece a la derecha del nav cuando los enlaces no caben. Recibe
   los <a> que sobran. Diseño heredado del antiguo cta-familias. */
.cabecera-cta-mas-wrapper{
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}
.cabecera-cta-mas-wrapper[hidden]{ display: none; }

.cabecera-cta-mas-link{
  display: inline-flex;
  align-items: center;
  gap: var(--eXS);
  padding: 0;
  margin-bottom: 2px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--fXS);
  line-height: var(--lhS);
  color: var(--r);
  cursor: pointer;
}
.cabecera-cta-mas-link:hover{ color: var(--g); }
.cabecera-cta-mas-link:focus-visible{
  outline: 2px solid var(--rC);
  outline-offset: 2px;
  border-radius: var(--rP);
}

.cabecera-cta-mas-texto{ position: relative; text-wrap: nowrap; margin-right: 15px; }
.cabecera-cta-mas-texto::after{ display: none; }

/* Panel: hereda .filtro-chip-panel. Selector con doble clase para
   vencer la especificidad de .filtro-chip-panel (definida más
   adelante en el archivo). */
.cabecera-cta-mas-panel.filtro-chip-panel{
  left: auto;
  right: 5px;
  top: calc(100% + 6px);
  border-top-right-radius: 5px;
  min-width: 0;
  max-width: calc(100vw - 30px);
  white-space: normal;
}
.cabecera-cta-mas-wrapper .filtro-chip-panel:before{
  left: auto;
  right: 10px;
  top: -11px;
}
.cabecera-cta-mas-panel[hidden]{ display: none; }

.cabecera-cta-mas-panel a{
  display: block;
  padding: var(--eXS) var(--eS);
  border-radius: var(--rP);
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--r);
  text-decoration: none;
}
.cabecera-cta-mas-panel a:hover{ background: var(--rC3); }
.cabecera-cta-mas-panel a + a{ margin-top: 2px; }

/* ── CTA item píldora ── */
.cabecera-cta-item{
  padding-inline: var(--eL);
  border-radius: 0 var(--rP) var(--rP) 0;
  border: none;
  background: var(--r);
  font-size: var(--fS);
  line-height: var(--lhS);
  color: white;
  white-space: nowrap;
  cursor: pointer;
}

.cabecera-cta-item--indice{ font-weight: 600; }
.cabecera-cta-item:hover{ background: var(--g); }

/* ── Cabecera reducida (clonada por JS) ── */
.cabecera--reducida{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 952;
  background: white;
  border-bottom: 1px solid var(--rC2);
  box-shadow: 0 1px 8px var(--rC3);
  transform: translateY(-110%);
  transition: transform 0.22s ease-out;
}

.cabecera--reducida.is-visible{ transform: translateY(0); }

.cabecera--reducida .cabecera-contenido{
  padding: 0 var(--eS) var(--eM) var(--eS);
}

.cabecera--reducida .cabecera-saludo{
  padding-bottom: 0;
  margin-bottom: -12px;
}

/* ── RESPONSIVE CABECERA ── */

@media (min-width: 769px){
  .cabecera-contenido{
    flex-wrap: wrap;
    margin: 0;
  }

  .cabecera-acciones{
    order: 2;
    flex: 0 0 auto;
    gap: var(--eS);
  }

  .cabecera-acciones a{ display: inline; }

  .cabecera-buscador{
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }

  .cabecera-cta > a{ display: inline; font-size: inherit; }

  /* Ocultar Red de ventas en cabecera cuando se muestra como sección aparte */
  .cabecera-cta-redventas{ display: none; }

  body[data-pagina="inicio"] .cabecera-slogan{
    display: block;
    font-size: var(--fXL);
    line-height: var(--lh2XL);
    font-weight: 300;
    padding: var(--eS) var(--eXL);
  }

  .cabecera-cta{
    justify-content: flex-start;
    margin-left: var(--eXL);
    width: calc(100% - var(--eXL));
    max-width: calc(100% - var(--eXL));
  }

  .buscador__boton .buscador__icono{
    width: var(--eL);
    height: var(--eL);
  }
}

@media (min-width: 600px){
  .cabecera-identidad .claim{ display: inline; }
}

@media (min-width: 1025px){
  .cabecera-contenido{
    flex-wrap: nowrap;
  }

  .cabecera-identidad{
    gap: var(--eL);
    flex: 0 1 auto;
  }

  .logo-img{ height: 36px; }

  .cabecera-buscador{
    order: 2;
    flex: 1 1 auto;
    max-width: 600px;
    margin: 0 auto;
  }

  .cabecera-acciones{
    order: 3;
    gap: var(--eS);
  }

  body[data-pagina="inicio"] .cabecera-slogan{
    font-size: var(--f2XL);
    padding: var(--eM) var(--eXL);
  }

  .cabecera-top{ display: flex; }
  .bloque-cabecera p{ display: block; }

  .cabecera-cta{
    width: calc(100% - (var(--eXL) * 2));
    max-width: calc(100% - (var(--eXL) * 2));
    margin-left: var(--eXL);
    margin-top: var(--eXS);
    justify-content: flex-start;
    overflow: hidden;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .cabecera-cta > a{ display: inline; }

  /* Mostrar "y fabricantes" en desktop */
  .cabecera-cta-sufijo{ display: inline; }
}

@media (min-width: 376px){
  .cabecera-acciones .icono-boton-listas{
    font-size: inherit !important;
    line-height: inherit !important;
  }
}


/* ──────────────────────────────────────────────────────────────────
   Ajustes finos de cabecera (correcciones §01) — paddings, iconos,
   buscador, identidad y línea CTA escalada con clamp() por breakpoint.
   El selector con .icono { width:1.1rem } se deja FUERA hasta auditar
   impacto en intranet (uso global de .icono en /login/*).
   ────────────────────────────────────────────────────────────────── */

.cabecera-hamburguesa{ margin-right: var(--eL); }

.icono-boton{
  background: white;
  min-width: 48px;
  min-height: 48px;
  border-radius: var(--rP);
  border: 1px solid transparent;
  transition: border .2s ease;
}
.icono-boton:hover{
  border: 1px solid var(--rC2);
  background: white;
}

.indicador-carro-activo{
  top: -4px;
  right: 5px;
  width: 5px;
  height: 5px;
}

.icono-boton-carrito [data-js="carrito-badge"],
.badge-carrito{ font-size: var(--fXS); }

.cabecera-buscador{
  max-width: 100%;
  margin: var(--eXS) var(--eM) var(--eS) var(--eM);
}

.buscador{ border-radius: var(--rP); }

.cabecera-contenido{ padding: var(--eS) 5px; }
.cabecera-identidad{ margin: 0 var(--e2XL) 0 0; }

.cabecera-cta{
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: var(--eM) clamp(15px, 2vw, 40px);
}
.cabecera-cta a[href*="red_de_ventas"]{ font-weight: 800; }
.cabecera-cta a[href*="zona-de-cata"]{ color: var(--rC); }

@media (min-width: 768px){
  .cabecera-hamburguesa::after{
    content: "Catálogo";
    font-size: var(--fS);
    color: var(--g);
    padding-left: var(--eXS);
  }
  .cabecera-buscador{
    max-width: 100%;
    margin: var(--eXS) var(--eM) var(--eS) 0;
  }
  .cabecera-contenido{ padding: var(--eS) var(--eS) var(--eS) var(--eL); }
  .logo-img{ height: 35px; margin-top: -.25rem; }
  .cabecera-identidad{ margin: 0 var(--eXL); }
}

@media (min-width: 1024px){
  .cabecera-buscador{ max-width: 100%; margin: 0 var(--eL) 0 0; }
  .buscador{ border-radius: var(--rB); }
  button[data-js="boton-menu"]{ margin-left: -.3rem; }
  .cabecera-top{ padding: var(--eM) var(--eXL) 0; }
  .cabecera-contenido{ padding: 0 var(--eL) var(--eS) var(--eXL); }
  .logo-img{ height: 40px; margin-top: -.5rem; }
  .cabecera-cta{ padding: var(--eM) clamp(50px, 5vw, 80px); margin-top: 0; }
  body[data-pagina="inicio"] .cabecera-slogan{
    display: block;
    padding: var(--eL) 0 0 clamp(50px, 5vw, 80px);
    margin-top: var(--eS);
  }
}

@media (min-width: 1281px){
  .cabecera-buscador{ max-width: 100%; margin-right: var(--eXL); }
  .logo-img{ height: 55px; margin-top: -1rem; }
  .cabecera-identidad{ margin: 0 var(--eXL); }
  .cabecera-cta{ padding: var(--eM) clamp(70px, 6vw, 120px); }
  body[data-pagina="inicio"] .cabecera-slogan{
    padding: var(--eL) 0 0 clamp(70px, 6vw, 115px);
    margin-top: var(--eS);
  }
}

@media (min-width: 1440px){
  .cabecera-cta{ padding: var(--eM) clamp(100px, 8vw, 160px); }
  body[data-pagina="inicio"] .cabecera-slogan{
    padding: var(--eL) 0 0 clamp(100px, 8vw, 160px);
    margin-top: var(--eS);
  }
}


/* ==========================================================================
   5) UI · PRECIOS, CHECKOUT, FLECHAS, BOTONES, CHIPS
   ========================================================================== */

/* ── Precio ── */
.precioFormatoP{
  color: var(--r);
  font-size: var(--fXL);
  display: flex;
  width: fit-content;
  line-height: var(--lh2XL);
}

.precioFormatoP sup{
  margin-top: calc(var(--eS) * -.45);
  font-size: var(--fXS);
  font-weight: 500;
  display: flex;
  align-items: flex-start;
}

.carro-precio{
  display: flex;
  align-items: center;
  /* gap: var(--eS); */
  padding-top: var(--eXS);
}

.precioFormato{
  color: var(--r);
  font-size: var(--f3XL);
  display: flex;
  /* padding: 0 0 var(--eM) 0; */
  width: fit-content;
  align-items: start;
  line-height: 1;
}

.precioFormato sup{
  font-size: var(--fXL);
  font-weight: 500;
  display: flex;
  align-items: center;
}
.precioFormato sup span{
  font-weight: 300;
  font-size: var(--fL);
  margin-left: var(--eXS);
}

.precioFormato.linea-subtotal, .precioFormato.carro-precio{
  font-size: var(--fXL);
  min-width: 70px;
  justify-content: flex-end;
}
.precioFormato.linea-subtotal sup, .precioFormato.carro-precio sup {
  font-size: var(--fXS);
}
.precioFormato.linea-subtotal sup span, .precioFormato.carro-precio sup span{
  font-size: var(--fXS);
}

.precio-desde{
  font-size: var(--fXS);
  font-weight: 400;
  color: var(--g);
  margin-right: var(--eXS);
}

.precio-rango{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  margin-top: var(--eS);
  gap: var(--eXS);
}
.precio-rango__sep{
  font-size: var(--f2XL);
  font-weight: 300;
  color: var(--g);
  margin: 0 var(--eXS);
  line-height: 1;
}
.precio-rango__nota{
  flex-basis: 100%;
  display: block;
  margin-top: 4px;
  padding-top: var(--eXS);
  border-top: 1px dotted var(--rC2);
  font-size: var(--fXS);
  font-weight: 300;
  text-align: right;
  opacity: 0.6;
  width: fit-content;
  margin-left: auto;
}

/* ── Checkout pasos ── */
.checkout-pasos{
  font-size: var(--fS);
  margin: var(--eS) 0 var(--eL);
  padding: var(--eS) var(--eM);
  width: fit-content;
  border-radius: var(--rP);
  border: 1px solid var(--rC3);
  outline: 1px solid var(--rC);
  outline-offset: 2px;
  background: white;
}

.checkout-pasos__lista{
  display: flex;
  flex-wrap: wrap;
  gap: var(--eL);
  padding: 0;
  margin: 0;
  list-style: none;
}

.checkout-pasos__item{
  display: flex;
  align-items: center;
  gap: var(--eS);
}

.checkout-pasos__numero{
  width: var(--eXL);
  height: var(--eXL);
  border-radius: 50%;
  border: 1px solid var(--gC);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fXS);
  background: white;
  color: var(--g2);
}

.checkout-pasos__texto{
  white-space: nowrap;
  color: var(--g2);
}

.checkout-pasos__item--activo .checkout-pasos__numero{
  background: var(--r);
  color: white;
  font-weight: 700;
  outline: 1px solid var(--rC);
  outline-offset: 2px;
}

.checkout-pasos__item--activo .checkout-pasos__texto{
  font-weight: 600;
  color: var(--gO);
}

/* ── Stepper ── */
.stepper{
  display: inline-flex;
  align-items: center;
  gap: var(--eXS);
  border: 1px solid var(--rC);
  padding: var(--eS);
  border-radius: var(--rP);
  background: white;
  width: 100%;
  justify-content: space-between;
  /* margin-bottom: var(--eS); */
}

.stepper button{
  width: var(--eXL);
  height: var(--eXL);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: white;
  border-radius: var(--rB);
  cursor: pointer;
  color: var(--rC);
  font-size: var(--fXL);
}

.stepper button:hover{ background: var(--rC2); color: var(--gO); }

.stepper input{
  width: 3.75rem;
  min-width: 3.75rem;
  text-align: center;
  border: 0;
  background: transparent;
  font-size: var(--fM);
  font-weight: 500;
  color: var(--gO);
  padding: 0;
}
.stepper input:focus,
.stepper input:focus-visible{
  outline: none;
  box-shadow: none;
  color: var(--gM);
}

.stepper input[type="number"]::-webkit-inner-spin-button,
.stepper input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.producto-cta__cantidad-input:focus,
.producto-cta__cantidad-input:focus-visible{
  outline: none;
  box-shadow: none;
  color: var(--gM);
}

.stepper input[type="number"]{ -moz-appearance: textfield; }

/* ── Flechas controles ── */
.flechas-controles{
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.flecha-prev, .flecha-next{
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--e2XL);
  height: var(--e2XL);
  display: grid;
  place-items: center;
  background: white;
  border: 1px solid var(--gC);
  border-radius: var(--rB);
  transition: all .2s ease;
  cursor: pointer;
}

.flecha-prev{ left: var(--eL); }
.flecha-next{ right: var(--eL); }

.flecha-prev:hover, .flecha-next:hover{
  background: var(--rC2);
  border-color: var(--rC);
}

.flecha-prev:focus-visible, .flecha-next:focus-visible{
  outline: 2px solid var(--rC2);
  outline-offset: 2px;
}

.flecha-prev .icono, .flecha-next .icono{
  width: var(--eM);
  height: var(--eM);
  display: block;
  fill: var(--rC);
}

.flecha-prev:hover .icono, .flecha-next:hover .icono{
  fill: var(--g);
}

.flecha-prev .icono{ transform: scaleX(-1); }

.slider .flecha-prev{ left: 0; }
.slider .flecha-next{ right: 0; }

/* Flechas del slider-cards: contenedor no captura clics; solo los botones */
.slider > .flechas-controles{ position: absolute; inset: 0; z-index: 4; pointer-events: none; }

/* Por defecto invisibles; aparecen al pasar el ratón sobre el slider */
.slider .flecha-prev,
.slider .flecha-next{ opacity: 0; }
.slider:hover .flecha-prev:not(.is-hidden),
.slider:hover .flecha-next:not(.is-hidden){ opacity: .9; }

.slider .flecha-prev.is-hidden,
.slider .flecha-next.is-hidden{ display: none; }

/* En táctil ocultamos las flechas: el usuario ya dispone del swipe nativo */
@media (hover: none) and (pointer: coarse){
  .slider > .flechas-controles{ display: none; }
}

/* ── Botones CTA ── */
.boton-principal, .boton-secundario{
  cursor: pointer;
  font-size: var(--fM);
  font-weight: 500;
  border-radius: var(--rP);
  border: 0;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Evitar que los botones <a> hereden el subrayado y color del hover global */
a.boton-principal:hover,
a.boton-secundario:hover{ text-decoration: none; }
a.boton-principal::after,
a.boton-secundario::after{ display: none !important; }

.boton-principal{
  background: var(--r);
  border: 1px solid var(--r);
  color: white;
  padding: var(--eM);
}

.boton-secundario{
  background: var(--gC);
  color: var(--gO);
  padding: var(--eM);
  border: 1px solid var(--gM);
}

.boton-principal:hover{ background: var(--gO); border: 1px solid var(--gO); color: white; }
.boton-secundario:hover{ background: var(--gO); color: white; }
.apariencia-boton:hover{ color: white; }

.producto-cta__guardar{ color: var(--g2); }
.producto-cta__guardar:hover{ color: var(--gM); }
.producto-cta__guardar.is-activo{ color: var(--r); }

/* ── Chips variantes ── */
.chips{ display: flex; gap: var(--eS); flex-wrap: wrap; }

.grupo-chips{
  display: flex;
  flex-direction: column;
  gap: var(--eS);
  padding: var(--eM) 0;
}

.variantes__select{
  display: inline-block;
  font-size: var(--fS);
  font-weight: 600;
  padding: var(--eXS) var(--eL);
  border: 1px solid var(--rC2);
  border-radius: var(--rB);
  background: var(--rC3);
  color: var(--gO);
  cursor: pointer;
  max-width: 100%;
  transition: background-color 0.2s, border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--eM) center;
  padding-right: calc(var(--eL) + 1em);
}
.variantes__select:hover{
  background-color: var(--gC2);
  border-color: var(--gM);
}
.variantes__select:focus{
  border-color: var(--r);
  outline: none;
}

.chip{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--eXS);
  padding: var(--eS) var(--eM);
  border-radius: var(--rP);
  border: 1px solid var(--gC);
  background: white;
  cursor: pointer;
  font-size: var(--fS);
  color: var(--gO);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip:hover{ background: var(--gC2); }
.chip--activo:hover{ background: var(--rC3); }

.chip[data-variante="modelo"],
.chip[data-variante="atributo"]{ border-color: var(--gC);min-height: 48px; min-width: 48px; }

.chip[data-variante="modelo"].chip--activo,
.chip[data-variante="atributo"].chip--activo{
  border-color: var(--rC);
  background: var(--rC3);
  color: var(--gO);
}

.chip[data-variante="tipo"]{
  border-color: var(--gC);
  padding: 0.2em;
  flex-direction: column;
  align-items: stretch;
}

.chip[data-variante="tipo"].chip--activo{
  border-color: var(--r);
  background: var(--rC3);
  color: var(--gO);
}

.chip-thumb{
  width: var(--e4XL);
  height: var(--e4XL);
  padding: 0;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  mix-blend-mode: multiply;
}

.chip-precio{
  display: block;
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: right;
  color: var(--gM);
  white-space: nowrap;
  padding-top: 0.15em;
  font-weight: 600;
}
.chip-precio__desde{
  font-size: var(--fXXS, 0.65rem);
  font-weight: 400;
}

/* ── Stock: badges e indicadores ──
   Punto verde sage discreto en la esquina del chip; el span va vacío
   en HTML (sin ✓). La leyenda "Artículos con entrega rápida" se
   renderiza una sola vez por sección de variantes. */
.chip-stock-badge{
  position: absolute;
  top: 4px;
  right: 4px;
  width: .5rem;
  height: .5rem;
  background: #85a59F;
  border-radius: 50%;
  outline: 1px solid white;
  font-size: 0;
  z-index: 1;
}

/* En-stock: solo borde gris (sin fondo verde claro). El bullet es
   suficiente; no debe competir con el rosa de chip--activo. */
.chip--en-stock{
  background-color: white;
  border-color: var(--gC);
}
.chip--en-stock.chip--activo,
.chip.chip--activo{
  background-color: var(--rC3);
  border-color: var(--rC);
}

.entrega-stock{
  color: #2e7d32;
  font-weight: 600;
}

.entrega-bajopedido{
  color: var(--gM);
  font-weight: 600;
}

/* ── Chips filtros (details) ── */
details.filtro-chip{ position: relative; }
details.filtro-chip[open]{ z-index: 1000; }
details.filtro-chip > summary{ position: relative; z-index: 2; }

/* El cierre por click fuera lo gestiona el JS (catalogo-filtros.js).
   Antes había un overlay invisible (summary::before fixed inset:0) para
   capturar clicks fuera, pero bloqueaba clicks sobre OTROS chips: por
   eso al abrir un segundo filtro, el primero no se cerraba. */

details.filtro-chip .filtro-chip-panel{
  position: absolute;
  z-index: 3;
}


.filtro-chip{ position: relative; }

.filtro-chip-resumen{
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-size: var(--fS);
  gap: var(--eS);
  padding: var(--eXS) var(--eL);
  border-radius: var(--rB);
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  border: 1px solid var(--rC2);
  background: rgba(241, 231, 233, .5);
  white-space: nowrap;
}

.filtro-chip-etiqueta{ font-weight: 600; font-size: var(--fS); }
.filtro-chip-estado{ font-weight: 400; font-size: var(--fXS); opacity: 0.7; }
.filtro-chip--activo .filtro-chip-estado{ color: var(--r); }

.filtro-chip-resumen:hover{
  background: rgba(241, 231, 233, 1);
  border-color: var(--rC);
}

.filtro-chip-resumen::-webkit-details-marker{ display: none; }

.filtro-chip[open] > .filtro-chip-resumen{
  background: var(--rC3);
  color: var(--r);
  border-color: var(--rC);
}

.filtro-chip-panel{
  position: absolute;
  left: 0;
  top: calc(100% + 20px);
  min-width: 240px;
  max-width: 360px;
  border: 1px solid var(--gC);
  border-radius: var(--rM);
  background: white;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: var(--eM);
  z-index: 3;
  outline: 2px solid var(--rC2);
  outline-offset: 2px;
}

.filtro-chip-panel:before{
  content: "";
  display: block;
  position: absolute;
  top: -12px;
  left: 18px;
  width: 2rem;
  height: 2px;
  background: var(--rC2);
}

/* Panel del filtro Ordenar: alineado a la derecha */
.filtro-orden-wrapper .filtro-chip-panel{
  left: auto;
  right: 0;
}
.filtro-orden-wrapper .filtro-chip-panel:before{
  left: auto;
  right: 18px;
}

/* ── Filtro precio: slider doble ── */
.filtro-precio-rangos{ display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--eM); }
.filtro-precio-rango{
  cursor: pointer; display: flex; align-items: center; gap: var(--eS);
  padding: var(--eXS) var(--eS); border-radius: var(--rP);
  font-size: var(--fXS); transition: background .15s;
}
.filtro-precio-rango:hover{ background: var(--rC3); }
.filtro-precio-rango input[type="radio"]{ margin: 0; accent-color: var(--r); }

.filtro-precio-slider{ padding: var(--eS) 0; }
.filtro-precio-slider-track{
  position: relative; height: 6px; border-radius: 3px;
  background: var(--gC2); margin: var(--eL) 0;
}
.filtro-precio-slider-relleno{
  position: absolute; height: 100%; border-radius: 3px;
  background: var(--r); top: 0;
}
.filtro-precio-slider-thumb{
  position: absolute; top: 50%; width: 24px; height: 24px;
  border-radius: 50%; background: white; border: 2px solid var(--r);
  box-shadow: 0 1px 4px rgba(0,0,0,.2); transform: translate(-50%, -50%);
  cursor: grab; touch-action: none; z-index: 2;
}
.filtro-precio-slider-thumb:active{ cursor: grabbing; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.filtro-precio-etiquetas{
  display: flex; justify-content: space-between;
  font-size: var(--fXS); color: var(--g2); padding-top: var(--eXS);
}
.filtro-precio-borrar{ font-weight: 600; color: var(--r); border-bottom: 1px solid var(--gC2); padding-bottom: var(--eS); margin-bottom: var(--eXS); }

.filtros__panel-opciones{
  display: flex;
  flex-direction: column;
  gap: var(--eS);
  max-height: 240px;
  overflow: auto;
  padding-right: var(--eS);
}

.filtro-opcion{
  display: flex;
  gap: var(--eS);
  align-items: center;
}

.filtros__acciones{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--eS);
  margin-top: var(--eM);
}

.filtros-reset, .filtros-mas{
  background: white;
  color: var(--g);
  font-size: var(--fS);
  cursor: pointer;
  padding: var(--eS) var(--eL);
  border-radius: var(--rB);
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  border: 1px solid var(--rC2);
}

.filtros-reset:hover, .filtros-mas:hover{
  color: white;
  background: var(--gM);
  border-color: var(--gM);
}

/* ── Acciones en cards ── */
.producto-card__btn{
  display: inline-flex;
  align-items: center;
  gap: var(--eXS);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--g2);
  font-size: var(--fS);
  transition: color 0.15s ease;
}

.producto-card__btn:hover{ color: var(--gO); }
.producto-card__btn svg{ width: 1.1rem; height: 1.1rem; margin-right: var(--eXS); }
.producto-card-acciones .icono{ fill: var(--g); }
.producto-card:hover .icono{ fill: white; }
.producto-card .precioFormato{ font-size: var(--fXL); font-weight: 600; }
.producto-card .precioFormato sup{ font-size: var(--fS); font-weight: 600; }
.producto-card .precioFormato sup span{ font-size: var(--fS); }

.icono-boton-carrito, .icono-boton-listas{
  background: transparent;
  /*border: 0;  lo quito porque si no el hoover mueve elementos */
}

/* ── Item acciones / enlaces animados ── */
.item-acciones{
  display: flex;
  gap: var(--eM);
  align-items: center;
}

.item-accion{
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--rC);
  height: fit-content;
}

.item-accion:hover{ color: var(--rO); }

/* ── Red de ventas filtros ── */
#redVentas .filtro-chip[data-filtro-id="provincia"] .filtro-chip-panel{
  max-width: 520px;
}

#redVentas .filtro-chip[data-filtro-id="provincia"] .filtro-chip-panel .filtros__panel-opciones{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--eS);
}

/* ── Modal ── */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--eL);
  /* Por encima de los laterales (.lateral = 1200) para que diálogos como
     "Elige lista destino" abiertos desde un aside no queden detrás. */
  z-index: 1300;
}

.modal-overlay--visible{ display: flex; }

.modal-panel{
  width: min(520px, calc(100vw - (var(--eL) * 2)));
  border-radius: var(--rM);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  background: white;
  padding: var(--eX) var(--eX) var(--eL);
}

.modal__titulo{ margin: 0 0 var(--eS); }
.modal__desc{ margin: 0 0 var(--eL); opacity: 0.85; }

.modal__select, .modal__input{
  width: 100%;
  padding: var(--eM);
  border-radius: var(--rP);
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: white;
  margin-bottom: var(--eL);
}

.modal__acciones{
  display: flex;
  gap: var(--eM);
  justify-content: flex-end;
}

/* ── Otros UI ── */
.icono-boton-carrito [data-js="carrito-badge"]{ font-size: var(--fS); line-height: 0; }

body[data-pagina="redVentas"] .chip{
  border: 1px solid var(--rC2);
  background: white;
  border-radius: var(--rB);
  padding: var(--eM) var(--eL);
  font-size: var(--fXS);
  line-height: var(--lhXS);
  cursor: pointer;
}

body[data-pagina="redVentas"] .chip.is-active,
body[data-pagina="redVentas"] .chip--active{
  background: var(--rC2);
  border-color: var(--rC2);
}

.filtros-acciones{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* HERO subfamilia imágenes dinámicas */
.subfamilia-hero-imagenes{
  display: flex;
  gap: var(--eXS);
  overflow: hidden;
  align-items: stretch;
}

.subfamilia-hero-imagenes img{
  height: 100%;
  max-height: 140px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Filtros activos (móvil) */
.filtros-activos{
  display: flex;
  flex-wrap: wrap;
  gap: var(--eS);
  margin-top: var(--eS);
  flex: 0 0 100%;
}

.filtro-activo-chip{
  font-size: .7rem;
  border: 0;
  padding: var(--eXS) var(--eS);
  border-radius: var(--rP);
  cursor: pointer;
  color: var(--gO);
}

.filtro-activo-chip:hover{ background: var(--gC2); }

@media (min-width: 769px){
  .filtros-activos{ display: none; }
  .filtro-activo-chip{
    font-size: var(--fXS);
    background: var(--rC3);
    border: 1px solid var(--rC2);
  }
}

@media (min-width: 1025px){
  .filtros-chips{
    flex-wrap: nowrap;
    overflow: visible;
  }
  .contenedor-filtros-chip{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
  }
}


/* ==========================================================================
   6) CARDS · Mini-card, producto-card, ZC-card
   ========================================================================== */

/* ── Mini card (navegación) ── */
.mini-card{
  position: relative;
  border: 1px solid var(--gC);
  border-radius: var(--rP);
  background: white;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.mini-card-enlace{
  display: block;
  text-decoration: none;
  color: inherit;
}

.mini-card-imagen{
  position: relative;
  overflow: hidden;
  padding: var(--eM);
  aspect-ratio: 1 / 1;
  opacity: .7;
  filter: grayscale(1);
  transition: filter .2s ease, opacity .2s ease;
}

.mini-card-imagen img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mini-card-imagen--vacia{
  display: grid;
  place-items: center;
  background: var(--gC3);
}

.mini-card__inicial{
  font-size: var(--f3XL);
  line-height: var(--lh3XL);
  font-weight: 600;
  color: var(--gM);
}

.mini-card-texto{
  padding: 0 var(--eM) var(--eM);
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
  color: var(--g);
}

.mini-card-texto > p{ margin: 0; }

.mini-card-titulo{
  margin: 0;
  font-size: var(--fM);
  font-weight: 700;
}

.mini-card-meta{
  margin: 0;
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--gM);
}

.mini-card-descripcion{
  margin: 0;
  font-size: var(--fXS);
  line-height: var(--lhS);
  color: var(--g);
  opacity: .9;
}

.mini-card-contador{
  margin: var(--eS) 0 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--gM);
}

.mini-card:hover{
  border-color: var(--r);
  transform: translateY(-2px);
  box-shadow: var(--shadowC);
}

.mini-card:hover .mini-card-imagen{ opacity: 1; filter: grayscale(0); }
.mini-card:hover .mini-card-titulo{ color: var(--r); }

.mini-card:focus-within{
  outline: 2px solid var(--rC2);
  outline-offset: 2px;
}

/* ── Producto card ── */
.producto-card{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 20rem;
  height: 100%;
  padding: var(--eS);
  background: white;
  border: 1px solid var(--gC);
  border-radius: var(--rP);
  overflow: hidden;
  outline: 0 solid transparent;
  outline-offset: 2px;
  transition: border-color .2s ease, outline-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.card-imagen-link{
  display: block;
  position: relative;
  text-decoration: none;
}

.producto-card > a[href]{ text-decoration: none; }

.card-imagen{
  padding-top: 100%;
  background-size: cover;
  background-position: center;
  transform-origin: bottom center;
  transition: transform .2s ease;
  background-color: var(--gC2);
}

.card-imagen:after{ display: none; }

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

.producto-card-contenido{
  display: flex;
  flex-direction: column;
  gap: var(--eS);
  padding-top: var(--eS);
}

.producto-card-contenido p{ margin-top: 0; }
.producto-card-contenido p:not(:first-of-type):not(.precioFormato){ margin-top: var(--eXS); font-weight: 300; }

.card-titulo{
  font-size: var(--fM);
  font-weight: 500;
  line-height: var(--eXL);
}

.card__subfamilia{
  margin: 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--gM);
  opacity: .9;
  font-weight: 500;
}

.card-ruta{
  margin: var(--eL) 0 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  padding-top: var(--eS);
}

.card-ruta a{ color: var(--r); text-decoration: none !important; }
.card-ruta a:hover{ color: var(--gO); }

.card-ruta-sep{ margin: 0 var(--eXS); color: var(--gM); }

.producto-card-descripcion{
  font-size: var(--fS);
  line-height: var(--lhXS);
  color: var(--gO);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-coleccion, .card-marca{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--gO);
  font-weight: 500 !important;
}

.card-coleccion-link, .card-marca-link{
  color: var(--r);
  text-underline-offset: 2px;
}

.card-coleccion-link:hover, .card-marca-link:hover{ color: var(--gO); }

.card-pie{
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--eS);
  margin: 0 0 var(--eM) 0;
}

.card__precio--consultar{
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--g);
  font-weight: 600;
}

.producto-card:hover{
  border-color: var(--rC);
  outline: 2px solid var(--rC2);
  box-shadow: var(--shadowC);
}

.producto-card-acciones{
  position: relative;
  margin: calc(-1 * var(--eM));
  margin-top: auto;
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0;
  background: var(--gC3);
}

/* Área clickable ocupa todo el alto */
.producto-card-acciones .producto-card__btn,
.producto-card-acciones a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--eXS);
  padding: var(--eL);
  flex: 1 1 100%;
  color: inherit;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
}

.producto-card:hover .producto-card-acciones{ background: var(--r); }
.producto-card:hover .producto-card-acciones a,
.producto-card:hover .producto-card-acciones button{ color: white; }
.producto-card-acciones .btn-texto{ margin-top: 2px; }
.producto-card-acciones .btn-texto:hover{ color: var(--rC2); text-decoration: underline; }
.producto-card:hover .producto-card-acciones a::after,
.producto-card:hover .producto-card-acciones button::after{ display: none; }
.producto-card:hover .producto-card-acciones:hover{ background: var(--g); }

/* Acciones dobles: "Añadir" + "Guardar" */
.producto-card-acciones--doble{
  container-type: inline-size;
}
.producto-card-acciones--doble .card-jcart{
  flex: 1 1 50%;
  display: flex;
}
.producto-card-acciones--doble .card-jcart .producto-card__btn{
  width: 100%;
}
.producto-card-acciones--doble > .producto-card__btn{
  flex: 1 1 50%;
  border-left: 1px solid rgba(255,255,255,0.2);
}

/* Ocultar todos los textos cuando la tarjeta es estrecha */
@container (max-width: 180px){
  .producto-card-acciones--doble .btn-texto{ display: none; }
}

.subfamilia-card-titulo{
  position: relative;
  display: inline-block;
}

.subfamilia-card-titulo::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.12em;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease-out;
}

.subfamilia-card-enlace:hover .subfamilia-card-titulo::after,
.subfamilia-card-enlace:focus-visible .subfamilia-card-titulo::after{
  transform: scaleX(1);
}

/* Slide-card base */
.slide-card{
  position: relative;
  flex: 0 0 auto;
  width: 210px;
  transition: all .2s ease;
}

/* ── ZC Card (editorial) ── */
.zc-card{
  border-radius: var(--rP);
  overflow: hidden;
  background: white;
  border: 2px solid white;
  transition: border-color .2s ease, outline-color .2s ease;
}

.zc-card:hover{
  border-color: var(--rC);
  outline: 1px solid var(--rC);
  outline-offset: 2px;
}

.zc-card:hover h2{ color: var(--r); }

.zc-card-link{
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.zc-card-media img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.zc-card-texto{
  padding: var(--eL);
  display: flex;
  flex-direction: column;
  gap: var(--eS);
  flex: 1;
}

.zc-card-text{ padding: var(--eM) var(--eL); }

.zc-card-categoria{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  text-transform: uppercase;
  opacity: .75;
  margin: 0;
}

.zc-card-titulo{
  margin: 0;
  font-size: var(--fL);
  font-weight: 500;
  padding-bottom: var(--eM);
}

.zc-card-excerpt{
  margin: 0;
  opacity: .85;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  padding-bottom: var(--eM);
}

.zc-card-meta{
  display: flex;
  justify-content: space-between;
  gap: var(--eS);
  margin-top: var(--eL);
  font-size: var(--fXS);
  line-height: var(--lhXS);
  opacity: .7;
}

.zc-rel-cta{ margin-bottom: var(--eXL); }

/* ── Card micro-interacciones ── */
.producto-card__toast{ opacity: 0; z-index: 50; }

.producto-card__toast.is-run{
  animation: toastCentro 1.2s ease-out 1;
}

@keyframes toastCentro{
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.98); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  85%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.98); }
}

.producto-card__btn.is-activo{ color: var(--gM); }
.producto-card__btn--listas.is-activo{ color: var(--rC); }

.producto-card__estado{
  display: none;
  margin-left: var(--eXS);
  font-size: var(--fXS);
  line-height: var(--lhXS);
  position: absolute;
  right: 0;
  top: -10px;
  opacity: .5;
}

.producto-card__btn.is-activo .producto-card__estado{ display: inline-block; }

.producto-card__btn.is-pulso{
  animation: btnPulso 0.9s ease-out 1;
}

@keyframes btnPulso{
  0%   { transform: scale(1); }
  30%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Móvil: carro btn solo icono (excepto en acciones dobles) */
.producto-card-acciones:not(.producto-card-acciones--doble) .producto-card__btn--carro .btn-texto{ font-size: 0; }
.producto-card-acciones:not(.producto-card-acciones--doble) .producto-card__btn--carro .btn-texto::after{
  content: attr(data-label-mobile);
  font-size: var(--fS);
}

@media (min-width: 501px){
  .producto-card-acciones:not(.producto-card-acciones--doble) .producto-card__btn--carro .btn-texto{ font-size: var(--fS); }
  .producto-card-acciones:not(.producto-card-acciones--doble) .producto-card__btn--carro .btn-texto::after{ content: none; }
}

@media (min-width: 769px){
  .card-titulo{ line-height: calc(var(--eXL) - var(--eS)); }
}


/* ==========================================================================
   7) SLIDERS
   ========================================================================== */

.grupo-sliders{ margin-top: var(--eXL); }

.slider{
  position: relative;
  margin: var(--eS) 0;
  padding-top: var(--eS);
  border: none;
}

/* Card compacta dentro de cualquier slider: la card del slider sólo
   "tienta" alternativas/complementos; no es para comparar a fondo.
   Ocultamos descripción, ruta, colección, acciones y la nota
   "Según artículo". Se conservan título, marca, imagen, precio
   "X / Y" y badges (NOVEDAD, 24-48h). */
.slider article .producto-card-descripcion,
.slider article .producto-card-acciones,
.slider article .card-ruta,
.slider article .precio-rango__nota,
.slider article .card-coleccion{
  display: none;
}

/* Precio en sliders: gris en lugar de granate para no competir con
   el CTA de la ficha principal. La etiqueta "Precio" ("precio-desde")
   sí queda en granate como acento. */
.slider article .precioFormato{ color: var(--g); }
.slider .precio-desde{ color: var(--rC); }

.slider__header{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--eM);
  margin-bottom: var(--eM);
}

.slider__header h2, .zc-slider__header h2{
  margin: 0;
  font-size: var(--f2XL);
  line-height: var(--lhXL);
  font-weight: 500;
}

.slider__subtitulo{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--g);
}

.slider-track{
  display: flex;
  gap: var(--eS);
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--eS) 0;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Swipe horizontal nativo; los gestos verticales pasan al body y no se bloquea el scroll de la página */
  touch-action: pan-x pan-y;
  scrollbar-width: none;
}
.slider-track::-webkit-scrollbar{ height: 0; display: none; }

/* Cada card es un punto de snap */
.slide-card{ scroll-snap-align: start; }

.slider[data-barra="1"] .slider__bar{
  margin-top: var(--eS);
  height: 4px;
  background: var(--gC2);
  border-radius: var(--rB);
  overflow: hidden;
}

.slider[data-barra="1"] .slider__bar-fill{
  height: 100%;
  width: 0%;
  background: var(--gM);
  border-radius: var(--rB);
  transition: width 0.12s ease;
}

.slider[data-barra="1"] .slider__bar.is-hidden{ display: none; }

/* ── Slide-card (renderSlider) ── */
.card-imagen:after{ display: none; }

.slide-card:hover .slide-nombre{ color: var(--gO); }

.slide-card::before, .slide-card::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
  border-left: 1px dotted transparent;
  opacity: 0;
  transition: opacity .15s ease;
}

.slide-card:hover::before, .slide-card:hover::after{
  border-left-color: var(--rC2);
  opacity: 1;
}

.slide-nombre, .slide-meta, .slide-precio{ padding: 0 var(--eM); }

.slide-card > a{
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.slide-card > a > img{
  display: block;
  width: 80%;
  margin: 0 auto;
  height: 180px;
  object-fit: contain;
  border-radius: var(--rP);
}

.slide-nombre{
  margin: var(--eM) 0 var(--eXS) 0;
  font-weight: 400;
  color: var(--r);
  font-size: var(--fM);
  line-height: calc(var(--sS) - var(--sXS));
}

.slide-meta{
  margin: 0 0 var(--eS) 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  opacity: 0.8;
  color: var(--g);
}

.slide-precio{
  margin: 0 0 var(--eL) 0;
  font-weight: 600;
  font-size: var(--fS);
  line-height: var(--lhS);
}

.slide-precio-desde{
  margin-right: var(--eXS);
  font-size: var(--fXS);
  font-weight: 400;
  color: var(--g);
}

.slide-precio-valor{
  font-weight: 700;
  color: var(--gO);
}

/* ── HOME últimas ── */
section.home-ultimas{ margin-top: 0; }

.home-ultimas .slider-track{ align-items: stretch; }

.home-ultimas .card__subfamilia{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  margin-top: var(--eXS);
  color: var(--gM);
  opacity: 0.9;
  font-weight: 500;
}

.home-tematicos .slider[data-slider="tematico"] .slide-card{ border-inline: 0; }
.home-tema .h3_destacado{ padding-top: var(--eL); }

.home-ultimas__header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--eL);
}

.home-ultimas__cta{
  white-space: nowrap;
  text-decoration: none;
  font-weight: 600;
}

/* ── CTA overlay (hero portada) ── */
.cta-overlay{
  position: absolute;
  left: var(--e2XL);
  bottom: var(--eXL);
  z-index: 3;
  width: clamp(280px, 85vw, 420px);
  padding: var(--eL);
  background: rgba(255, 255, 255, 0.92);
  color: var(--gO);
  border-radius: var(--rM);
  box-shadow: var(--shadowC);
}

.cta-overlay .hero-titulo{
  margin: 0 0 var(--eS) 0;
  font-size: var(--fM);
  line-height: var(--lhXL);
  font-weight: 300;
  color: var(--rO);
}

.cta-overlay .hero-texto{ display: none; }

.cta-overlay .hero-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media (min-width: 769px){
  .cta-overlay .hero-titulo{
    font-size: clamp(var(--fXL), 2.2vw, var(--f2XL));
  }
  .cta-overlay .hero-texto{
    display: block;
    margin: 0 0 var(--eL) 0;
    max-width: 40rem;
    font-size: var(--fS);
    line-height: var(--lhS);
    color: rgba(0, 0, 0, 0.75);
  }

  .home-ultimas .card__subfamilia{ margin-top: var(--eM); }
  .producto-card-descripcion{ font-size: var(--fXS); }
  .slider .card-pie{ margin-top: 0; margin-bottom: var(--eS); }
  .slider .producto-card{ padding: var(--eS) var(--eM); }
}

/* ── Slider editorial (ZC) ── */
.zc-slider{
  position: relative;
  margin: var(--eL) 0;
  padding-top: var(--eL);
  border-top: 1px dotted var(--rC);
}

.zc-slider__subtitulo{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--g);
}

.zc-slider-track{
  display: flex;
  gap: var(--eS);
  overflow-x: auto;
  padding: var(--eS) 0;
}

.zc-slide-card{ flex: 0 0 auto; }

.zc-slider__link{
  display: block;
  text-decoration: none;
  color: inherit;
}

.zc-slider__img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--rP);
  background: var(--gC2);
  display: block;
}

.zc-slider__title{
  margin: var(--eM) 0 0;
  font-size: var(--fS);
  line-height: var(--lhS);
  font-weight: 500;
  text-align: center;
}


/* ==========================================================================
   8) ASIDES (laterales)
   ========================================================================== */

/* ── Overlay + lock scroll ── */
.lateral-overlay{
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease-out, visibility .25s ease-out;
}

.lateral-overlay--visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.body--no-scroll, body.body--no-scroll{ overflow: hidden; }

/* ── Lateral base (móvil: full width) ── */
.lateral{
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100dvh;
  z-index: 1200;
  background: white;
  box-shadow: 0 0 20px rgba(0,0,0,.2);
  /*  width: 100%;   Lo quito porque hacía que ocupara más ancho de la ventana de visualización*/
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform .25s ease-out, opacity .25s ease-out, visibility .25s ease-out;
  outline: 2px solid var(--rC2);
  outline-offset: 2px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lateral--derecha{
  right: 0;
  left: 0;
  transform: translateX(100%);
}

.lateral--izquierda{
  left: 0;
  right: 0;
  transform: translateX(-100%);
}

.lateral--visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

@media (min-width: 501px){
  .lateral{
    width: clamp(20vw, 25rem, 100vw);
  }

  .lateral--derecha{
    left: auto;
  }

  .lateral--izquierda{
    right: auto;
  }
}

/* ── Cabecera lateral ── */
.lateral__cabecera{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eM);
  padding: var(--eM) var(--eL);
  background: var(--r);
  color: white;
}

.lateral__logo{
  display: block;
  max-width: 30%;
  height: var(--eXL);
}

.lateral__cerrar{
  border: none;
  background: none;
  cursor: pointer;
  padding: var(--eXS);
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lateral__cerrar:focus-visible{
  outline: 2px solid white;
  outline-offset: 2px;
  border-radius: var(--rP);
}

.lateral__cerrar-icono{
  border-radius: 50%;
  padding: 4px;
  width: 24px;
  height: 24px;
  fill: white;
  transition: background 0.2s ease, fill 0.2s ease;
}

.lateral__cerrar-icono:hover{
  background: var(--rC2);
  fill: var(--r);
}

.i-cerrar{
  width: var(--eXL);
  height: var(--eXL);
  fill: white;
}

/* ── Contenido y pie ── */
.lateral-contenido, .lateral__contenido{
  padding: var(--eL);
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

.lateral-pie{
  padding: var(--eL);
  flex: 0 0 auto;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--eS);
  border-top: 1px dotted var(--rC);
  padding-top: var(--eL);
}

.lateral-contenido-cabecera{
  display: flex;
  align-items: center;
  gap: var(--eS);
}

.lateral-cabecera-titulo{
  margin: 0;
  font-size: var(--fL);
  line-height: var(--lhL);
  font-weight: 600;
  width: 100%;
}

.lateral-cabecera-frase-info{
  padding: var(--eS);
  margin: 0 0 var(--eL);
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--g);
  background: var(--gC3);
  border-radius: var(--rP);
  cursor: pointer;
  animation: demoPulse 2s ease-in-out infinite;
}

@keyframes demoPulse{
  0%{ background: #ffffff; }
  50%{ background: #efefef; }
  100%{ background: #fff; }
}

.aside-login-demo p{ color: var(--rC); font-size: var(--fXS); }
.aside-login-demo{ display: block; margin-bottom: var(--eM); }

/* Pie carrito */
.lateral-pie-total{
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--eL);
}

.lateral-acciones-pie{
  display: flex;
  justify-content: flex-end;
  gap: var(--eS);
  flex-wrap: wrap;
}

.linea-aside .linea-titulo{ font-size: var(--fM); line-height: calc(var(--eL) * 1.3); }

.aside-filtros__acciones{ margin-top: var(--eXL); display: flex; gap: var(--eM); }

.lateral .item-accion:hover{ color: var(--g); }
.linea-aside .linea-contenedor-datos{ width: 100%; justify-content: space-between; }

/* ── Aside carrito ── */
#lateral-carrito .aside-carrito{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lineas-aside{
  border: 0;
  padding: 0;
  margin: var(--eL) 0 var(--eM);
  display: flex;
  flex-direction: column;
  gap: var(--eS);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Grupo-articulo dentro del aside: compacto */
.lineas-aside .grupo-articulo{
  border: 1px solid var(--gC2);
  padding: var(--eS) var(--eM);
  border-radius: var(--rP);
  margin-bottom: 0;
}
.lineas-aside .grupo-articulo__nombre{
  font-size: var(--fM); line-height: calc(var(--eL) * 1.3); padding-top: 0;
}
.lineas-aside .variante-foto{ flex: 0 0 50px; min-height: 50px; }
.lineas-aside .variante-foto img{ width: 50px; }
.lineas-aside .variante-desc{ font-size: 0.85em; }
.lineas-aside .variante-bloque{ padding: 2px 0; }

.imagen-aside{
  display: block;
  width: var(--e2XL);
}

.linea-detalle-aside p{
  margin: 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
}

.item-acciones-aside{
  padding-top: var(--eXS);
  display: flex;
  flex-wrap: wrap;
  gap: var(--eS);
}

.linea-aside .linea-datos, .linea-aside .linea-contenedor{ width: 100%; }
.linea-aside .linea-datos{ justify-content: space-between; }
.aside-carrito__vacio-pasos{ margin: var(--eL) 0; }

/* ── Aside listas ── */
.aside-listas__pie{
  background: white;
  padding: var(--eXL);
}

#lateral-listas .aside-listas__contenido{
  overflow: hidden;
  min-height: 0;
  padding-bottom: calc(var(--e2XL) + var(--eS));
}

#lateral-listas .contenedor-items-aside{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--eL);
  padding-top: var(--eS);
}

.aside-item{
  border: 1px solid var(--gC);
  border-radius: var(--rP);
  padding: var(--eM);
  position: relative;
}

.aside-item__label{
  position: absolute;
  top: calc(-3.8 * var(--eXS));
  left: var(--eM);
  font-size: var(--fXS);
  line-height: 1;
  color: var(--g);
  background: white;
  padding: var(--eXS) var(--eS);
  width: fit-content;
  border-radius: var(--rP);
}

.boton-lista{ width: 100%; }
.aside-lista__badge{ font-size: var(--fXS); color: var(--gM); }
.aside-carrito__vacio-cta{ margin-top: var(--eL); }
.lateral--listas .lateral-contenido-cabecera{ margin-bottom: var(--eL); }

/* Etiqueta = nombre de la lista: que no desborde el ancho de la card */
.aside-item__label{
  max-width: calc(100% - var(--eL));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cabecera de cada lista en el aside: badge + acciones de gestión */
.aside-item-cabecera{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--eXS);
}
.aside-item-acciones{
  flex-wrap: wrap;
  gap: var(--eM);
  row-gap: var(--eXS);
}
.aside-item-acciones .item-accion{ font-size: var(--fXS); }

/* Acciones por línea de artículo (iconos compactos, poco intrusivos) */
.sublinea--iconos{
  flex: 0 0 100%;
  justify-content: flex-end;
  gap: 0;
  padding: 0;
}
.sublinea-icono-accion{
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--gM);
  transition: color .15s ease;
  /* Objetivo táctil accesible (WCAG 2.5.5 / 44px): área clicable mínima
     44×44 px. El icono visible sigue siendo pequeño y centrado para no
     recargar la UI. */
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sublinea-icono-accion .icono{ width: 15px; height: 15px; }
.sublinea-icono-accion:hover{ color: var(--r); }
.sublinea-icono-accion--quitar:hover{ color: #dc3545; }
.sublinea-icono-accion--ok{ color: #16a34a !important; }
.sublinea-icono-accion:disabled{ opacity: .4; cursor: default; }

/* ── Aside login ── */
.aside-login-cuerpo{
  padding: 0;
  overflow: visible;
  flex: 1 1 auto;
  min-height: 0;
}

.aside-login__texto{
  margin: 0 0 var(--eS);
  color: var(--gO);
  line-height: var(--lhS);
  font-size: var(--fS);
}

.aside-login__form,
.aside-cambiar__form,
.aside-recuperar__form{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--eM);
}

.aside-login__input{
  width: 100%;
  padding: var(--eM);
  border-radius: var(--rP);
  border: 1px solid var(--gC3);
  background: white;
  font-size: var(--fS);
  line-height: var(--lhS);
}

/* ============================================================================
   Feedback de fortaleza de password — diseño "semáforo"
   ----------------------------------------------------------------------------
   activarFortalezaPwd() (pie.inc.php) escribe data-strength="0|1|2|3" en el
   input tras cada keyup. Los selectores de abajo aplican color semáforo a:
     - El border y background del propio input (subtil tinte del color).
     - El <label> asociado (si está dentro de .lblPlaceH) — su color se
       sincroniza vía :has(); el TEXTO del label lo modifica el JS para
       transformar "Contraseña" → "Contraseña insegura/débil/normal/fuerte".
     - Un <small.password-strength-status> hermano del input cuando no hay
       label (caso aside-cambiar, que usa placeholder).

   Niveles (calculatePasswordStrength del plugin form-validator):
     0 — score < 20  → insegura  (rojo  #dc3545)
     1 — score 20-39 → débil     (naranja #f97316)
     2 — score 40-60 → normal    (ámbar #eab308)
     3 — score > 60  → fuerte    (verde #16a34a)

   La regla .strength-meter (display:none) protege contra cualquier llamada
   residual al plugin displayPasswordStrength que dejaría una barra obsoleta.
   ========================================================================= */
.strength-meter{ display: none !important; }

input[type="password"][data-strength]{
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
input[type="password"][data-strength="0"]{
  border-color: #dc3545 !important;
  background-color: #fef2f2 !important;
}
input[type="password"][data-strength="1"]{
  border-color: #f97316 !important;
  background-color: #fff7ed !important;
}
input[type="password"][data-strength="2"]{
  border-color: #eab308 !important;
  background-color: #fefce8 !important;
}
input[type="password"][data-strength="3"]{
  border-color: #16a34a !important;
  background-color: #f0fdf4 !important;
}

/* Color del <label> (lblPlaceH) sincronizado con el nivel del input. */
.lblPlaceH > label{ transition: color 0.25s ease; }
.lblPlaceH:has(input[type="password"][data-strength="0"]) > label{ color: #dc3545 !important; }
.lblPlaceH:has(input[type="password"][data-strength="1"]) > label{ color: #f97316 !important; }
.lblPlaceH:has(input[type="password"][data-strength="2"]) > label{ color: #eab308 !important; }
.lblPlaceH:has(input[type="password"][data-strength="3"]) > label{ color: #16a34a !important; }

/* Status text para inputs sin label (aside-cambiar). */
.password-strength-status{
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85em;
  font-weight: 600;
  text-align: center;
  transition: color 0.25s ease;
  min-height: 1.2em; /* reservar espacio para evitar saltos al aparecer/desaparecer */
}
input[type="password"][data-strength="0"] + .password-strength-status{ color: #dc3545; }
input[type="password"][data-strength="1"] + .password-strength-status{ color: #f97316; }
input[type="password"][data-strength="2"] + .password-strength-status{ color: #eab308; }
input[type="password"][data-strength="3"] + .password-strength-status{ color: #16a34a; }

/* ============================================================================
   Feedback visual del input "Repetir contraseña" (data-match=ok|no)
   ----------------------------------------------------------------------------
   activarMatchPwd() (pie.inc.php) escribe data-match="ok"|"no" en el confirm.
   Reutilizamos los colores extremos del semáforo de fortaleza:
     - no (no coinciden) → rojo  (mismas tonalidades que data-strength="0")
     - ok (coinciden)    → verde (mismas tonalidades que data-strength="3")
   El label asociado (lblPlaceH) sincroniza color via :has() — igual que la
   barra de fortaleza, pero sin cambio de TEXTO (el label sigue diciendo
   "Repetir contraseña"). El cambio de bg+border ya es feedback suficiente. */
input[type="password"][data-match]{
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
input[type="password"][data-match="no"]{
  border-color: #dc3545 !important;
  background-color: #fef2f2 !important;
}
input[type="password"][data-match="ok"]{
  border-color: #16a34a !important;
  background-color: #f0fdf4 !important;
}
.lblPlaceH:has(input[type="password"][data-match="no"]) > label{ color: #dc3545 !important; }
.lblPlaceH:has(input[type="password"][data-match="ok"]) > label{ color: #16a34a !important; }

.aside-login__enlaces{
  margin-top: var(--eM);
  border-top: 1px solid var(--gC2);
  padding-top: var(--eXS);
}

.aside-login__msg{
  margin: 0;
  font-size: var(--fS);
  line-height: 1;
  color: var(--g2);
}
.aside-login__msg a{
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  padding: 0 var(--eXS);
}
.aside-login__msg + .aside-login__msg{
  border-top: 1px solid var(--gC2);
}

.aside-login__card{
  display: flex;
  align-items: center;
  gap: var(--eM);
  border: 1px solid var(--gC3);
  border-radius: var(--rM);
  padding: var(--eM);
}

.aside-login__avatar{
  width: calc(var(--eXL) + var(--eS));
  height: calc(var(--eXL) + var(--eS));
  border-radius: var(--rB);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.78);
  flex: 0 0 auto;
}

.aside-login__card-textos{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
  min-width: 0;
}

.aside-item-cabecera{ margin-top: var(--eM); }
.aside-login__card-nombre{ margin: 0; font-weight: 700; }
.aside-login__card-rol{ margin: 0; color: rgba(0,0,0,.55); font-size: var(--fXS); }

/* .aside-login__remember eliminado en F7#16 (checkbox "Recordarme" fuera —
   la cookie PHPSESSID 30d cubre la persistencia). */

/* F7#10: separador "o" + botones de login social en aside-login */
.aside-login__separador{
  display: flex; align-items: center; gap: var(--eS);
  margin: var(--eM) 0;
  color: var(--g2); font-size: var(--fS);
}
.aside-login__separador::before,
.aside-login__separador::after{
  content: ''; flex: 1; height: 1px; background: var(--gC2);
}
.aside-login__sociales{
  display: flex; flex-direction: column; gap: 0.5rem;
}
/* Variante horizontal: 3 botones en una sola fila con el mismo ancho.
   Reducimos padding y gap interno para que quepan en contenedores
   estrechos (aside lateral ~ 320px). En móvil muy estrecho permitimos
   wrap a 2 filas (2+1) en lugar de seguir comprimiendo. */
.aside-login__sociales--horizontal{
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.aside-login__sociales--horizontal .boton-social{
  flex: 1 1 0;
  min-width: 0;
  padding: 0.5rem 0.4rem;
  gap: 0.4rem;
  font-size: var(--fS);
}
.aside-login__sociales--horizontal .boton-social span{
  /* Truncar con ellipsis si el contenedor es muy estrecho y el nombre
     no cabe — preferimos eso a romper el botón a 2 líneas. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Cuando el bloque de botones sociales vive dentro de un .form_wrapper
   (caso del wizard "Nuevo Usuario" en /login/nuevo_cliente.php Paso 1)
   le añadimos padding lateral para que los botones no queden pegados
   al borde de la caja. El form_wrapper no aplica padding general a sus
   hijos directos, así que esto sólo afecta a este patrón concreto. */
.form_wrapper .aside-login__sociales,
.form_wrapper > .aside-login__separador{
  padding: 0 var(--eL);
}
.boton-social{
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  width: 100%; min-height: 44px;
  padding: 0.6rem 1rem;
  border-radius: var(--rP);
  /* Tipografía unificada: la del sitio (Source Sans 3) para los 3 botones,
     para que el bloque "Iniciar sesión con … / Google / Microsoft / Facebook"
     se lea como una unidad visual. Cada brand guideline tolera tipografías
     genéricas del sitio si se respeta el color del logo. */
  font-family: inherit;
  font-size: var(--fS); font-weight: 500;
  color: #1f1f1f;
  background: #fff;
  border: 1px solid #dadce0;
  text-decoration: none;
  transition: background-color 0.15s, box-shadow 0.15s, border-color 0.15s;
}
/* Suprimir la línea de subrayado animada que el `a::after` global aplica
   a TODOS los <a>. En los botones sociales (rectángulo con borde y fondo
   propio) esa línea queda fuera de lugar y rompe el rectángulo. */
.boton-social::after{ display: none; }
.boton-social:hover{
  background: #f8f9fa;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
/* Cada provider sólo necesita un hover-tint específico si quiere ser
   distinto del genérico. Por ahora todos comparten estilo idéntico,
   diferenciados sólo por el logo. */
.boton-social--google:hover{ border-color: #d2e3fc; }

.aside-login__error{
  margin: 0 0 var(--eS);
  padding: var(--eS) var(--eM);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--rP);
  color: #991b1b;
  font-size: var(--fXS);
  line-height: var(--lhS);
}
.aside-login__ok{
  margin: 0 0 var(--eS);
  padding: var(--eS) var(--eM);
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--rP);
  color: #166534;
  font-size: var(--fXS);
  line-height: var(--lhS);
}

/* Menú cuenta usuario (menu_cuenta_cliente) */
.lateral-menu-cuenta{
  margin-top: var(--eM);
  border-top: 1px solid var(--gC3);
  padding-top: var(--eXS);
}
.lateral-menu-cuenta ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.lateral-menu-cuenta li a{
  display: flex;
  align-items: center;
  gap: var(--eS);
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--g);
  text-decoration: none;
  border-bottom: 1px solid var(--gC3);
  transition: color .15s;
}
.lateral-menu-cuenta li:last-child a{ border-bottom: none; }
.lateral-menu-cuenta li a:hover{ color: var(--r); }
.lateral-menu-cuenta li.nav-separador{
  height: 0;
  border-bottom: 1px solid var(--gC3);
  margin: var(--eXS) 0;
}
.lateral-menu-cuenta li.nav-separador + li a{ border-top: none; }

/* SVG icon class stubs from menu_cuenta_cliente() — shown as inline text for now */
.lateral-menu-cuenta .svg-icon::before{
  content: '';
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  background: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.svg-misdatos::before  { mask-image: url('/assets/iconos.svg#usuario'); -webkit-mask-image: url('/assets/iconos.svg#usuario'); }
.svg-corazon::before   { mask-image: url('/assets/iconos.svg#corazon'); -webkit-mask-image: url('/assets/iconos.svg#corazon'); }
.svg-pptos::before     { mask-image: url('/assets/iconos.svg#presupuesto'); -webkit-mask-image: url('/assets/iconos.svg#presupuesto'); }
.svg-pedidos::before   { mask-image: url('/assets/iconos.svg#pedidos'); -webkit-mask-image: url('/assets/iconos.svg#pedidos'); }
.svg-fabrica::before   { mask-image: url('/assets/iconos.svg#fabrica'); -webkit-mask-image: url('/assets/iconos.svg#fabrica'); }
.svg-ref::before       { mask-image: url('/assets/iconos.svg#referencia'); -webkit-mask-image: url('/assets/iconos.svg#referencia'); }
.svg-print::before     { mask-image: url('/assets/iconos.svg#imprimir'); -webkit-mask-image: url('/assets/iconos.svg#imprimir'); }
.svg-users::before     { mask-image: url('/assets/iconos.svg#usuarios'); -webkit-mask-image: url('/assets/iconos.svg#usuarios'); }
.svg-cliente::before   { mask-image: url('/assets/iconos.svg#usuario'); -webkit-mask-image: url('/assets/iconos.svg#usuario'); }
.svg-descarga::before  { mask-image: url('/assets/iconos.svg#descarga'); -webkit-mask-image: url('/assets/iconos.svg#descarga'); }
.svg-stock::before     { mask-image: url('/assets/iconos.svg#stock'); -webkit-mask-image: url('/assets/iconos.svg#stock'); }
.svg-cancel::before    { mask-image: url('/assets/iconos.svg#cerrar'); -webkit-mask-image: url('/assets/iconos.svg#cerrar'); }
.svg-cex::before       { mask-image: url('/assets/iconos.svg#envio'); -webkit-mask-image: url('/assets/iconos.svg#envio'); }
.svg-nacex::before     { mask-image: url('/assets/iconos.svg#envio'); -webkit-mask-image: url('/assets/iconos.svg#envio'); }
.svg-dhl::before       { mask-image: url('/assets/iconos.svg#envio'); -webkit-mask-image: url('/assets/iconos.svg#envio'); }

.lateral-icono-enlace:first-child{ border-top: none; }

.icono-boton--logueado svg, .icono-boton--logueado .icono{ fill: var(--r); }

.cabecera-avatar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--r);
  color: #fff;
  font-size: var(--fXS);
  font-weight: 600;
  line-height: var(--fXS);
  letter-spacing: 0.5px;
}

.lateral__titulo{
  margin: 0 0 var(--eXS);
  font-size: var(--fXL);
  line-height: var(--lhXL);
  font-weight: 600;
}

.lateral__frase{
  margin: 0 0 var(--eL);
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--g);
}

.lateral-menu__contenido--transicion{
  opacity: .55;
  transition: opacity .12s ease;
}

/* Vista 1: familias */
.lateral-icono-enlaces{ padding-left: 0; margin: var(--eXL) 0; }

.lateral-icono-enlace{
  display: flex;
  align-items: center;
  gap: var(--eS);
  margin-left: var(--eS);
  border-bottom: 1px dotted var(--gC);
}

.lateral-icono-enlace .lateral-icono-enlace__icono{ fill: var(--g); }
.lateral-icono-enlace:hover .lateral-icono-enlace__icono{ fill: var(--r); }
.lateral-icono-enlace:hover > a{ color: var(--rC); }

.lateral-enlace-texto{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eS);
  text-decoration: none;
  color: inherit;
  padding: .8rem 0;
  min-height: 50px;
  line-height: 1.2;
}
.lateral-enlace-texto span{ font-size: 1rem; }

@media (min-width: 501px){
  .lateral-enlace-texto{
    min-height: 40px;
  }
}
.lateral-icono-enlace-nombre{
    flex-grow: 1;
}

.lateral-icono-enlace-flecha{
  width: .8rem;
  height: .8rem;
  flex-shrink: 0;
  fill: var(--rC3);
}

.lateral-icono-enlace:hover .lateral-icono-enlace-flecha{ fill: var(--rC); }

/* Vista 2: subfamilias */
.lateral-menu__volver{
  border: none;
  background: none;
  padding: 0;
  margin: var(--eL) var(--eM);
  font-size: var(--fM);
  line-height: var(--lhXS);
  cursor: pointer;
  color: var(--rC);
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: var(--eXS);
}

.lateral-menu__volver:hover{ color: var(--r); }
.lateral-menu__volver-icono{ transform: rotate(180deg); }
.lateral-menu__volver-texto{ font-size: .8rem; }

.lateral-menu__titulo-familia{
  font-size: var(--f2XL);
  line-height: var(--lhXL);
  font-weight: 600;
  margin: 0 0 var(--eL) var(--eXL);
  padding-bottom: var(--eS);
  color: var(--gO);
  border-bottom: 1px dotted var(--rC);
}

.lateral-menu__link-familia{
  display: inline-block;
  margin: 0 0 var(--eM) var(--eXL);
  font-size: .8rem;
  line-height: var(--lhXS);
}

.lateral-menu__subfamilias{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--eS);
}

.lateral-menu__subfamilia{
  display: flex;
  align-items: center;
  gap: var(--eM);
  padding: .6rem 0;
  margin-left: var(--eS);
}
.lateral-menu__subfamilia-enlace{ font-size: 1rem; }
.lateral-menu__subfamilia-nombre{ color: var(--g); }
.lateral-menu__subfamilia:hover span{ color: var(--rC); }

.lateral-menu__subfamilia-img{
  width: calc(var(--eXL) + var(--eS));
  height: calc(var(--eXL) + var(--eS));
  object-fit: contain;
  flex-shrink: 0;
  filter: grayscale(.7);
  transition: filter .2s ease;
}

.lateral-menu__subfamilia:hover .lateral-menu__subfamilia-img{ filter: grayscale(0); }

.lateral-menu__error{
  color: var(--r);
  font-size: var(--fS);
  line-height: var(--lhS);
}

.aside-login__editorial{
  margin: var(--eXL) 0 var(--eS);
}

.aside-login__editorial:hover a{ color: white; }
.aside-login__editorial a:after{ display: none; }

/* ── FAB índice (móvil, ayuda) ── */
.fab-indice{
  position: fixed;
  right: var(--eL);
  bottom: var(--eL);
  z-index: 1100;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--rC);
  background: var(--r);
  color: white;
  outline: 1px solid var(--rC2);
  outline-offset: 2px;
  font-weight: 600;
  font-size: var(--fM);
  box-shadow: var(--shadowC);
  cursor: pointer;
}

.fab-indice:hover{
  background: var(--gO);
  outline-color: var(--gM);
  border-color: var(--gM);
}

.resumen-titulo .t-mobile{ font-size: var(--fL); font-weight: 600; }
.fab-indice[hidden]{ display: none !important; }

.fab-top{
  position: fixed;
  right: var(--eL);
  bottom: var(--eL);
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rC);
  background: white;
  color: var(--r);
  cursor: pointer;
  box-shadow: var(--shadowC);
  transition: background 0.2s, color 0.2s;
}

/* ── Banner aria-live (reemplazo accesible de alert) ── */
.notify-banner{
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(-200%);
  max-width: min(40rem, calc(100vw - 2rem));
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1.05rem;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 0.4rem 1.5rem rgba(0,0,0,0.18);
  cursor: pointer;
  z-index: 1200;
  transition: transform 0.3s ease;
  pointer-events: none;
}
.notify-banner--visible{
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.notify-banner--info{ background: #2c3e50; color: #fff; }
.notify-banner--success{ background: #1f7a3a; color: #fff; }
.notify-banner--error{ background: var(--r, #b13837); color: #fff; }
@media (max-width: 600px){
  .notify-banner{
    top: 0.5rem;
    max-width: calc(100vw - 1rem);
    font-size: 0.95rem;
    padding: 0.8rem 1rem;
  }
}
.fab-top:hover{
  background: var(--r);
  color: white;
}
.fab-top .icono{
  width: 1.2rem;
  height: 1.2rem;
  transform: rotate(-90deg);
}

.ayuda-layout .columna-resumen > aside.resumen{
  position: fixed;
  background: white;
  left: var(--eL);
  right: var(--eL);
  bottom: var(--eL);
  z-index: 1101;
  max-height: 72vh;
  overflow: auto;
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}

body.is-indice-open .ayuda-layout .columna-resumen > aside.resumen{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.ayuda-layout .columna-resumen > aside.resumen .indice-close{
  position: sticky;
  top: 0;
  margin-left: auto;
  display: block;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

body.is-indice-open .lateral-overlay{
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 501px){
  .fab-indice{ display: none; }
  .ayuda-layout .columna-resumen > aside.resumen{
    position: sticky;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    max-height: none;
  }
}

/* ── Lateral filtros ── */
.lateral--filtros .lateral__contenido{ padding: 16px; }

.aside-filtros__cabecera{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--borde-suave);
}

.aside-filtros__titulo{
  font: inherit;
  font-weight: 700;
  margin: 0;
}

.aside-filtros__chips{
  padding-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lateral--filtros .aside-filtros__chips{
  display: grid;
  gap: 10px;
}


.lateral--filtros .filtro-chip{ width: 100%; }
.lateral--filtros .filtro-chip-resumen{ width: 100%; }


/* ==========================================================================
   9) TOAST + BADGE
   ========================================================================== */

.producto-card__toast{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 60;
}

.producto-card__toast-caja{
  display: inline-flex;
  align-items: center;
  gap: var(--eXS);
  padding: var(--eS) var(--eM);
  border-radius: var(--rP);
  border: 1px solid var(--rC2);
  background: white;
  color: var(--gO);
  box-shadow: var(--shadowC);
  white-space: nowrap;
}

.producto-card__toast--carrito .producto-card__toast-caja{ border-color: var(--gC); }
.producto-card__toast--listas .producto-card__toast-caja{ border-color: var(--rC2); }

.producto-card__toast-texto{
  font-size: var(--fS);
  line-height: var(--lhS);
  font-weight: 600;
}

/* Badge */
.card__badge{
  position: absolute;
  z-index: 200;
  top: var(--eXL);
  left: 0px;
  font-size: var(--fXS);
  font-weight: 600;
  text-transform: uppercase;
  outline-offset: 2px;
  pointer-events: none;
  padding: var(--eXS) var(--eS);
  border-radius: 0 var(--rP) var(--rP) 0;
  transition: padding 0.2s;
}

.card__badge--novedad{
  color: white;
  background: var(--rC);
  outline: 1px solid var(--rC);
}

.card__badge--liquidacion{
  color: white;
  background: var(--gM);
  outline: 1px solid var(--gM);
}

.card__badge--stock{
  position: absolute;
  top: var(--eXL);
  right: 0;
  left: auto;
  padding: var(--eXS) var(--eS);
  width: auto;
  height: auto;
  border-radius: var(--rP) 0 0 var(--rP);
  display: inline-block;
  background: #85a59F;
  color: white;
  font-size: var(--fXS);
  font-weight: 400;
  line-height: var(--lhXS);
  outline: 1px solid #85a59F;
  white-space: nowrap;
}
/* Variante BAJO PEDIDO: mismo anclaje derecha que --stock pero ámbar */
.card__badge--bajopedido{
  position: absolute;
  top: var(--eXL);
  right: 0;
  left: auto;
  padding: var(--eXS) var(--eS);
  width: auto;
  height: auto;
  border-radius: var(--rP) 0 0 var(--rP);
  display: inline-block;
  background: #d9a441;
  color: white;
  font-size: var(--fXS);
  font-weight: 400;
  line-height: var(--lhXS);
  outline: 1px solid #d9a441;
  white-space: nowrap;
}
.producto-card:hover .card__badge--stock,
.producto-card:hover .card__badge--bajopedido{ padding-right: var(--eL); }

.producto-card:hover .card__badge:not(.card__badge--stock):not(.card__badge--bajopedido){ padding-left: var(--eL); }
.slide-card .card__badge:not(.card__badge--stock):not(.card__badge--bajopedido){ left: 2px; }
.slide-card:hover .card__badge:not(.card__badge--stock):not(.card__badge--bajopedido){ padding-left: var(--eM); }


/* ==========================================================================
   10) BREADCRUMBS + HERO (interno)
   ========================================================================== */

.ruta-producto{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding-bottom: var(--eL);
  padding-top: var(--eL);
  gap: var(--eXS);
  row-gap: var(--eXS);
}

.ruta-producto a,
.ruta-producto [aria-current="page"],
.ruta-producto .pagina-actual{
  white-space: nowrap;
}

.ruta-producto a{
  font-size: var(--fS);
  line-height: var(--lhS);
  text-decoration: none;
}

.hero-frase{ white-space: pre-line; }

.ruta-producto a:focus-visible{
  outline: 2px solid var(--rC2);
  outline-offset: 2px;
  border-radius: var(--rP);
}

.ruta-producto__sep, .ruta-producto .entre-rutas{
  padding: 0 var(--eXS);
  opacity: .75;
}

.ruta-producto [aria-current="page"],
.ruta-producto .pagina-actual{
  font-weight: 600;
  display: inline-block;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hero interno */
.hero-layout{
  display: flex;
  position: relative;
  align-items: center;
  max-height: fit-content;
  border-radius: var(--rP);
  gap: var(--sp-L);
  margin-top: calc(-1 * (var(--sp-M)));
  border-bottom: 0;
}

body[data-pagina="subfamilia"] .hero-layout{
  margin: var(--e2XL) 0;
  min-height: 4rem;
  overflow: hidden;
  padding-bottom: 0;
}

.hero-layout > *{ min-width: 0; }

.hero-layout .hero-texto{
  max-width: 100%;
  font-size: var(--fS);
  line-height: var(--lhS);
  opacity: .9;
  padding-bottom: var(--eL);
}

.hero-layout .hero-titulo{
  margin: 0 0 var(--eS);
  font-size: var(--f3XL);
  line-height: var(--lh3XL);
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: var(--eM);
}

.hero-marca-logo{
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

.hero-layout .hero-titulo svg{
  transform: scale(2);
  fill: var(--rC);
}

.hero-layout .hero-frase{
  margin: 0;
  font-size: var(--fS);
  line-height: var(--lhS);
}

.hero-layout .hero-contador{
  position: relative;
  margin-top: var(--eL);
  margin-left: var(--eXL);
  font-size: var(--fXS);
  line-height: var(--lhS);
  color: var(--g);
  opacity: .9;
  white-space: nowrap;
}

.hero-layout .subfamilia-hero-imagenes{ display: none; }

@media (min-width: 769px){
  .hero-layout{
    min-height: 120px;
    border-bottom: 1px dotted var(--g);
    padding-bottom: var(--eS);
    overflow: hidden;
  }

  .hero-layout .hero-contador{
    position: absolute;
    right: var(--eXL);
    bottom: var(--eM);
    margin-top: 0;
    margin-left: 0;
  }

  body[data-pagina="subfamilia"] .hero-layout{
    padding-bottom: 0;
  }

  .hero-layout .subfamilia-hero-imagenes{
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    gap: 0;
    align-items: stretch;
    overflow: hidden;
    height: 100%;
    z-index: 1;
  }

  .hero-layout .subfamilia-hero-imagenes img{
    height: 100%;
    width: auto;
    object-fit: cover;
    flex-shrink: 0;
  }

  .ruta-producto [aria-current="page"],
  .ruta-producto .pagina-actual{
    max-width: 34ch;
  }

  body[data-pagina="subfamilia"] .hero-layout{ margin: 0; }
}

/* ── Familia hero ── */
.familia-hero{
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  background: white;
  border-bottom: 1px solid var(--rC);
  padding-bottom: var(--eL);
  max-height: none;
}

.familia-hero__col--media{ position: relative; flex: 2 1 0; min-height: auto; overflow: hidden; }

.familia-hero__fotos{ display: none; }

.familia-hero__overlay{
  position: relative;
  padding: 0;
  background: white;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}

.familia-hero-texto{
  pointer-events: auto;
  padding: 0;
  color: var(--gO);
  border-radius: var(--rM);
  max-width: 52ch;
}

.familia-hero-titulo{
  margin: 0;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, var(--f4XL));
  line-height: var(--lh4XL);
  color: var(--g);
  padding-bottom: var(--eL);
}

.familia-hero-frase{ display: none; }

.familia-hero-intro{
  margin-top: var(--eL);
  font-size: var(--fS);
  line-height: var(--lhS);
  border-top: 1px solid var(--gO);
  padding-top: var(--eS);
}

.familia-hero__col--subfamilias{
  flex: 100%;
  padding: 0;
  padding-bottom: var(--eL);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background: white;
}

.familia-hero .subfamilia-card-imagen{ display: none; }

.familia-productos__subtitulo{ display: none; }

.familia-hero .subfamilia-card-enlace{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: var(--eM);
}

.familia-hero .subfamilia-card-enlace::after{ content: none; }

.familia-hero .subfamilia-card-titulo{
  margin: 0;
  padding-top: 0;
  flex: 1 1 auto;
  font-size: var(--fXL);
  line-height: var(--lhXL);
}

.familia-hero .subfamilia-card-imagen{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.familia-hero .subfamilia-card-imagen img{
  width: var(--e2XL);
  height: var(--e2XL);
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
  filter: saturate(.5);
  transform: scale(.8);
}

@media (min-width: 501px){
  .familia-hero .subfamilia-card-imagen{ display: inline-flex; }
  .grid-subfamilias{
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--eM);
    column-gap: var(--eXL);
  }
}

@media (min-width: 769px){
  .familia-hero{
    flex-direction: row;
    border-radius: var(--rM);
    background: linear-gradient(135deg, var(--rC2), var(--rC3), var(--gC2), white);
    border-bottom: 0;
    padding-bottom: 0;
    max-height: 25rem;
  }

  .familia-hero__col--media{ min-height: 320px; }

  .familia-hero__fotos{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3px;
    position: absolute;
    inset: 0;
  }

  .familia-hero__fotos img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .familia-hero__fotos img:first-child{
    grid-column: span 2;
    grid-row: span 2;
  }

  .familia-hero__overlay{
    position: absolute;
    inset: 0;
    padding: var(--eXL);
    background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 45%, transparent 75%);
  }

  .familia-hero-texto{
    padding: var(--eXL);
    color: var(--gO);
  }

  .familia-hero-titulo{
    color: white;
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, var(--f3XL));
    line-height: var(--lh3XL);
  }

  .familia-hero-frase{
    display: block;
    margin-top: var(--eS);
    padding: var(--eS);
    border-radius: var(--rP);
    background: var(--gC3);
    font-size: var(--fL);
    line-height: var(--lhL);
  }

  .familia-hero__col--subfamilias{
    flex: 1 1 0;
    padding: var(--eL);
    overflow-y: auto;
    max-height: 25rem;
  }

  .familia-productos__subtitulo{ display: block; }

  .ruta-producto [aria-current="page"],
  .ruta-producto .pagina-actual{
    display: inline-block;
  }

  .ruta-producto > .ruta-producto__sep:nth-last-child(2){
    display: inline;
  }
}

@media (min-width: 1025px){
  .familia-hero__col--subfamilias{ flex: 1 1 0; }
}

/* ── Subfamilia hero ── */
.subfamilia-hero__ilustracion{
  flex: 0 0 3.5rem;
  position: relative;
  z-index: 3;
  min-width: 3.5rem;
  background-color: white;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.subfamilia-hero__ilustracion img{
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  filter: grayscale(.7);
  transition: filter .2s ease;
}

.subfamilia-hero-texto{
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  padding: var(--eS) 0;
  background: white;
  justify-content: center;
  flex: 1 1 auto;
}

.subfamilia-hero-texto .hero-contador{ display: none; }

.subfamilia-hero-titulo{
  margin: 0;
  font-size: 1.5rem;
  line-height: var(--lh3XL);
  color: var(--r);
  text-wrap: wrap;
  font-weight: 500;
}

.subfamilia-hero-frase{ display: none; }

@media (min-width: 501px){
  .subfamilia-hero__ilustracion{
    flex: 0 0 5rem;
    min-width: 5rem;
  }

  .subfamilia-hero__ilustracion img{
    width: 4.5rem;
    height: 4.5rem;
  }

  .subfamilia-hero-texto{
    position: relative;
    z-index: 2;
    padding: var(--eS) 0;
    background: linear-gradient(
      to right,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 35%,
      rgba(255,255,255,.95) 55%,
      rgba(255,255,255,.85) 75%,
      rgba(255,255,255,0) 100%
    );
    flex: 1 1 auto;
  }

  .subfamilia-hero-titulo{
    font-size: var(--f3XL);
    line-height: 1;
    font-weight: 300;
  }

  .subfamilia-hero-frase{
    display: block;
    margin: 0;
    font-size: var(--fS);
    line-height: var(--lhXS);
    color: var(--g2);
    width: 85%;
  }
}

@media (min-width: 769px){
  .ruta-producto [aria-current="page"],
  .ruta-producto .pagina-actual{
    display: inline-block;
  }
}


/* ==========================================================================
   11) PÁGINA · Portada (HOME hero + confianza)
   ========================================================================== */

/* ── HOME hero (oculto en móvil < 500px) ── */
.home-hero{ display: none; }
.confianza{ display: none; }

@media (min-width: 501px){
  .home-hero{
    display: block;
    position: relative;
    overflow: hidden;
    height: clamp(13rem, 38vh, 13rem);
    min-height: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    margin-top: -14px;
  }

  .cta-overlay{ background: transparent; }
  .cta-overlay .hero-titulo{ display: none; }

  .confianza{ display: block; }
  /* Zona de Cata: visible en todos los breakpoints */
}

@media (min-width: 769px){
  .home-hero{
    height: clamp(250px, calc(218px + 12.9vw), 500px);
    min-height: 250px;
  }

  .cta-overlay{
    background: rgba(255, 255, 255, 0.92);
  }

  .cta-overlay .hero-titulo{ display: block; }
}

.home-hero .hero-carrusel{
  position: relative;
  height: 100%;
}

/* Flechas del hero: ocultas por defecto, aparecen al pasar el ratón */
.home-hero .flecha-prev,
.home-hero .flecha-next{ opacity: 0; }
.home-hero:hover .flecha-prev,
.home-hero:hover .flecha-next{ opacity: .9; }

/* Slides del hero: cross-fade CSS con .is-active */
.home-hero .hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.home-hero .hero-slide:first-child,
.home-hero .hero-slide.is-active{
  opacity: 1;
  pointer-events: auto;
}

.home-hero .hero-media{
  position: absolute;
  inset: 0;
  margin: 0;
}

.home-hero .hero-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: right center;
}

.home-hero .hero-slide::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.15)
  );
}

/* ── Confianza ── */
.confianza-flex{
  display: flex;
  list-style-type: none;
  gap: var(--eS);
  padding: var(--eL) 0;
}

.confianza-flex li{
  text-align: center;
  cursor: pointer;
  transition: all .2s ease;
  background: var(--gC2);
  border-radius: var(--rP);
  padding: var(--e2XL) var(--eL);
}

.confianza-flex li:last-of-type{ background: var(--gC); }
.confianza-flex li:hover{ background: var(--rC2); }
.confianza-flex h3{ font-size: var(--fM); color: var(--gO); font-weight: 500; }
.confianza-flex p{ font-size: var(--fXS); }

.link-subrayado-centro{ display: inline-block; }

.link-subrayado-centro::after{
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
}

.link-subrayado-centro:hover::after,
.link-subrayado-centro:focus-visible::after{
  transform: translateX(-50%) scaleX(1);
}


/* ==========================================================================
   12) PÁGINA · Buscador sugerencias
   ========================================================================== */

.buscador__sugerencias{
  position: absolute;
  top: calc(100% + var(--eS));
  left: 0;
  right: 0;
  z-index: 300;
  margin-top: 0;
  padding: var(--eXS) 0;
  max-height: 18rem;
  overflow-y: auto;
  border-radius: var(--rM);
  background: white;
  border: 1px solid var(--gM);
  box-shadow: 0 2px 4px var(--gC3);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-1 * var(--eXS)));
  transition: opacity 0.14s ease-out, transform 0.14s ease-out;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  scrollbar-width: thin;
  scrollbar-color: var(--gC2) transparent;
}

.buscador__sugerencias--visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (min-width: 521px){
  .buscador__sugerencias{ max-height: 22rem; }
}

.buscador-sugerencias__correccion{ padding: var(--eXS) var(--eS); }

.buscador-sugerencias__texto-correccion{
  margin: 0;
  font-size: var(--fS);
  color: var(--gM);
}

.buscador-sugerencias__boton-correccion{
  background: none;
  border: none;
  padding: 0;
  margin-left: var(--eXS);
  font: inherit;
  font-weight: 600;
  color: var(--r);
  cursor: pointer;
  text-decoration: underline;
}

.buscador-sugerencias__boton-correccion:hover{ color: var(--g); }

.buscador-sugerencias__boton-correccion:focus-visible{
  outline: 2px solid var(--rC);
  outline-offset: 2px;
  border-radius: var(--rP);
}

.buscador-sugerencias__grupo + .buscador-sugerencias__grupo{
  border-top: 1px solid var(--gC);
  margin-top: var(--eXS);
  padding-top: var(--eXS);
}

.buscador-sugerencias__titulo-grupo{
  margin: var(--eS) var(--eM) var(--eXS);
  font-size: var(--fXS);
  line-height: var(--lhXS);
  text-transform: uppercase;
  color: var(--gM);
}

.buscador-sugerencias__lista{
  list-style: none;
  margin: 0;
  padding: 0;
}

.buscador-sugerencias__item{ margin: 0; padding: 0; }

.buscador-sugerencias__enlace{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
  padding: var(--eS) var(--eM);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: var(--rP);
  margin: 0 var(--eS);
}

.buscador-sugerencias__enlace:hover{ background: rgba(0, 0, 0, 0.03); }

.buscador-sugerencias__enlace:focus-visible{
  outline: 2px solid var(--rC);
  outline-offset: 2px;
}

.buscador-sugerencias__nombre{
  font-weight: 600;
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--gO);
}

.buscador-sugerencias__descripcion{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--g2);
}


/* ==========================================================================
   13) PÁGINA · Cookies
   ========================================================================== */

.cookies{
  position: fixed;
  left: var(--eL);
  right: var(--eL);
  bottom: var(--eL);
  z-index: 9999;
  background: white;
  border: 1px solid var(--gC);
  border-radius: var(--rP);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.cookies.is-hide{ display: none; }

.cookies__inner{
  display: flex;
  gap: var(--eL);
  align-items: stretch;
  flex-direction: column;
  padding: var(--eL);
}

.cookies__txt{ min-width: 0; }

.cookies__p{
  margin: 0;
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--gO);
}

.cookies__p--mini{
  margin-top: var(--eXS);
  font-size: var(--fXS);
  line-height: var(--lhXS);
  opacity: .9;
}

.cookies__link{ text-decoration: none; }
.cookies__link:hover{ text-decoration: underline; }

.cookies__actions{
  display: flex;
  gap: var(--eS);
  flex-wrap: wrap;
  justify-content: flex-start;
}

.cookies .btn, .cookies-modal .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--eXS);
  padding: var(--eS) var(--eL);
  border-radius: var(--rB);
  border: 1px solid var(--gC);
  background: white;
  cursor: pointer;
  text-decoration: none;
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--gO);
}

.cookies .btn:hover, .cookies-modal .btn:hover{
  border-color: var(--r);
  outline: 2px solid var(--rC2);
  outline-offset: 2px;
}

.cookies .btn:focus-visible, .cookies-modal .btn:focus-visible{
  outline: 2px solid var(--rC);
  outline-offset: 2px;
}

.cookies .btn--ghost, .cookies-modal .btn--ghost{ background: transparent; }

@media (min-width: 721px){
  .cookies__inner{
    flex-direction: row;
    align-items: center;
  }
  .cookies__actions{ justify-content: flex-end; }
}

/* Cookie modal */
.cookies-modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}

.cookies-modal.is-open{ display: block; }

.cookies-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}

.cookies-modal__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - (var(--eL) * 2)));
  background: white;
  border-radius: var(--rP);
  border: 1px solid var(--gC);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  overflow: hidden;
}

.cookies-modal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--eM) var(--eL);
  border-bottom: 1px solid var(--gC);
}

.cookies-modal__h{
  margin: 0;
  font-size: var(--fL);
  line-height: var(--lhL);
  font-weight: 600;
}

.cookies-modal__x{
  border: 0;
  background: transparent;
  font-size: var(--f2XL);
  line-height: 1;
  cursor: pointer;
  color: var(--gO);
}

.cookies-modal__x:hover{ color: var(--r); }

.cookies-modal__body{
  padding: var(--eL);
  display: grid;
  gap: var(--eM);
}

.cookies-opt{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eL);
  padding: var(--eM);
  border: 1px solid var(--gC);
  border-radius: var(--rP);
  background: var(--gC3);
}

.cookies-opt__txt{ min-width: 0; }
.cookies-opt__t{ font-weight: 700; font-size: var(--fS); line-height: var(--lhS); }

.cookies-opt__d{
  opacity: .9;
  font-size: var(--fS);
  line-height: var(--lhS);
  margin-top: var(--eXS);
  color: var(--g);
}

.cookies-modal__mini{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  opacity: .9;
  margin: 0;
}

.cookies-modal__foot{
  padding: var(--eM) var(--eL);
  border-top: 1px solid var(--gC);
  display: flex;
  gap: var(--eS);
  flex-wrap: wrap;
  justify-content: flex-end;
}

html.is-modal-open, html.is-modal-open body{ overflow: hidden; }


/* ==========================================================================
   14) PÁGINAS · Formularios checkout, Listas+Carro, Producto, RedVentas, ZonaCata, Cuenta
   (incluidos inline, sus responsive ya están convertidos mobile-first)
   ========================================================================== */

/* ── Checkout formularios ── */
.linea-bloque{ padding: var(--eL); }

.linea-bloque-titulo{
  margin: 0;
  font-size: var(--fXL);
  line-height: var(--lhXL);
  font-weight: 500;
  background: var(--rC2);
  border-radius: var(--rP);
  padding: var(--eL);
}

.linea-bloque-texto{
  margin: 0;
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--gM);
}

.bloque{ padding: var(--eL); }
.linea-bloque__campos{ margin-top: var(--eL); }
.linea-bloque__acciones{ margin-top: var(--eL); }

.bloque-acciones{
  display: flex;
  gap: var(--eL);
  align-items: center;
  justify-content: flex-end;
  margin-right: 0;
}

.campos{
  display: flex;
  gap: var(--eL);
  flex-wrap: wrap;
}

.campo{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
  min-width: 220px;
}

.campo__label{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--gO);
  opacity: .88;
}

.campo input, .campo select, .campo textarea{
  width: 100%;
  padding: var(--eS) var(--eL);
  border-radius: var(--rP);
  border: 1px solid var(--rC);
  background: white;
  color: inherit;
  font: inherit;
  line-height: var(--lhS);
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.campo input::placeholder, .campo textarea::placeholder{ opacity: .55; }
.campo input:hover, .campo select:hover, .campo textarea:hover{ border-color: var(--rC2); }

.campo input:focus, .campo input:focus-visible,
.campo select:focus, .campo select:focus-visible,
.campo textarea:focus, .campo textarea:focus-visible{
  outline: none;
  border-color: var(--rC2);
  background: var(--gC3);
  box-shadow: 0 0 0 3px var(--rC);
}

.campo input:active, .campo select:active, .campo textarea:active{
  transform: translateY(0.5px);
}

.campo input:disabled, .campo select:disabled, .campo textarea:disabled{
  opacity: .6;
  cursor: not-allowed;
  background: rgba(0,0,0,0.03);
}

.campo input[readonly], .campo textarea[readonly]{
  background: rgba(0,0,0,0.02);
  border-style: dashed;
}

.campo input:invalid, .campo select:invalid, .campo textarea:invalid{
  border-color: var(--r);
}

.campo input:invalid:focus, .campo input:invalid:focus-visible,
.campo select:invalid:focus, .campo select:invalid:focus-visible,
.campo textarea:invalid:focus, .campo textarea:invalid:focus-visible{
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14);
}

.campo-XS{ flex: 0 1 clamp(7rem, 12vw, 9rem); }
.campo-S{ flex: 0 1 clamp(11rem, 20vw, 15rem); }
.campo-M{ flex: 1 1 clamp(16rem, 30vw, 22rem); }
.campo-L{ flex: 1 1 clamp(18rem, 36vw, 28rem); }
.campo-XL{ flex: 1 1 clamp(22rem, 55vw, 44rem); }

.campo__control{ width: 100%; }

/* Checkout pago */
.checkout-metodos{
  display: flex;
  flex-wrap: wrap;
  gap: var(--eL);
  margin-top: var(--eL);
}

.checkout-metodos__opcion{
  display: inline-flex;
  align-items: center;
  gap: var(--eS);
  padding: var(--eS) var(--eM);
  border-radius: var(--rP);
  border: 1px solid var(--rC);
  background: white;
  cursor: pointer;
  user-select: none;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.checkout-metodos__opcion:hover{ border-color: var(--rC2); }

.checkout-metodos__opcion input[type="radio"]{
  inline-size: 1.05rem;
  block-size: 1.05rem;
  margin: 0;
  accent-color: var(--r);
}

.checkout-metodos__texto{
  font-weight: 600;
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--gO);
  white-space: nowrap;
}

@supports selector(:has(*)){
  .checkout-metodos__opcion:has(input[type="radio"]:checked){
    border-color: var(--rC2);
    background: var(--gC3);
    box-shadow: 0 0 0 2px var(--rC3);
  }
}

.checkout-metodos__opcion--activa{
  border-color: var(--rC2);
  background: var(--gC3);
  box-shadow: 0 0 0 2px var(--rC3);
}

.metodos-paneles{ margin-top: var(--eL); }

.metodo-panel{
  border: 1px solid var(--rC);
  border-radius: var(--rP);
  background: white;
  padding: var(--eL);
}

.metodo-panel h3{ margin: 0 0 var(--eS); font-size: var(--fL); line-height: var(--lhL); color: var(--gO); }
.metodo-panel p{ margin: 0 0 var(--eS); font-size: var(--fS); line-height: var(--lhS); color: var(--gM); }
.metodo-panel strong{ font-weight: 700; color: var(--gO); }
.metodo-panel--oculto{ display: none; }
.metodo-panel .campo, .texto-nota{ margin-top: var(--eL); }

@media (min-width: 769px){
  .lineas .bloque-acciones{ flex-direction: row; }
}

/* ── Listas + Carro (incluido inline) ── */
/* (Included from 24_listas_carro.css — resumen, lineas, actionbar, carrito, listas responsive all mobile-first) */

.resumen{
  position: static;
  top: auto;
  align-self: start;
  height: fit-content;
  border: 1px solid var(--gM);
  overflow: hidden;
  outline: 1px solid var(--gC);
  outline-offset: 2px;
  padding: var(--eL);
  border-radius: var(--rM);
}

.resumen-titulo{
  background: var(--r);
  color: white;
  font-weight: 500;
  margin: calc(var(--eL) * -1);
  margin-bottom: var(--eL);
  padding: var(--eM) var(--eL);
  display: flex;
  font-size: var(--fL);
  line-height: var(--lhL);
  justify-content: space-between;
  align-items: center;
  padding-left: var(--eXL);
}

@media (min-width: 501px){
  .resumen-titulo{
    background: var(--g);
    display: block;
    padding-left: var(--eL);
  }
}

.resumen-ayuda li{ margin: 0; }

.resumen-listas-indice{
  display: flex;
  flex-direction: column;
  gap: var(--eL);
}

.resumen-nota p{
  margin: 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--g);
}

.resumen-listas{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--eL);
}

.resumen-lista{ padding: var(--eM); }
.resumen-lista--activa{ border-color: var(--gM); }
.resumen-lista--activa .boton-lista{ font-weight: 400; color: var(--gO); }
.resumen-lista--activa .boton-lista:hover{ color: white; }

.resumen-lista-contador{
  margin-left: var(--eM);
  font-size: var(--fXS);
  line-height: var(--lhXS);
  font-weight: 600;
}

.resumen-lista .item-acciones{ margin-top: var(--eS); }

/* Lineas */
.lineas{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--gC2);
  border-radius: var(--rM);
  padding: var(--eL);
}

.linea-cabecera-lista{ position: relative; margin-bottom: var(--eL); }

.linea-cabecera-titulo{
  background: var(--gC2);
  margin: calc(var(--eXL) * -1) calc(var(--eXL) * -1) 0;
  padding: var(--eXL);
}

.linea-titulo{
  display: block;
  margin: 0;
  font-size: var(--fXL);
  line-height: var(--lhXL);
  font-weight: 300;
  border-radius: var(--rP);
  padding: 0;
}

.linea-meta{
  margin: 0;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--gM);
}

/* Acciones de la lista en la cabecera del detalle (entre el nombre y el
   contador): enlaces en línea (Cargar al carrito / Renombrar / Eliminar),
   mismo patrón que en el aside de listas. */
.listas-detalle__acciones{
  display: flex;
  flex-wrap: wrap;
  gap: var(--eXL);
  margin: var(--eS) 0;
}
.listas-detalle__acciones .item-accion{ font-size: var(--fS); }

.resumen-linea-acciones{
  display: flex;
  justify-content: space-between;
  gap: var(--eS);
  flex-wrap: wrap;
}

.lineas-listas .resumen-linea-acciones{
  position: absolute;
  bottom: -35px;
  right: 0;
  margin-right: var(--eS);
}

.lineas-contenedor-linea{
  list-style: none;
  padding-left: 0;
  margin: var(--eL) 0;
}

.linea-lista:not(:last-of-type),
.linea-carro:not(:last-of-type){
  padding-bottom: var(--eL);
  border-bottom: 1px dotted var(--gC);
}

.linea-contenedor{
  display: flex;
  align-items: flex-start;
  gap: var(--eS);
  padding-top: var(--eL);
}

.linea-imagen{
  width: calc(var(--e2XL) + var(--eXS));
  flex: 0 0 auto;
}

.linea-miniatura{ width: 100%; height: auto; display: block; }

.linea-datos{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--eXS);
  min-width: 0;
}

.linea.linea-lista .linea-titulo{
  display: flex;
  font-size: var(--fXL);
  flex-direction: column;
  justify-content: flex-start;
}

.linea-contenedor-datos{
  display: flex;
  flex-direction: row;
  gap: var(--eM);
  padding-top: var(--eXS);
  flex-wrap: wrap;
}

.linea .item-acciones{ padding-top: var(--eS); }
.listas-detalle__vacio{ margin-top: var(--eXL); color: var(--gM); }

/* Resumen carro */
.resumen-dato, .resumen-total{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--eS);
  margin: 0;
}

.resumen-total{
  border-block: 1px dotted var(--rC);
  margin-block: var(--eL);
  padding-block: var(--eS);
}

.resumen-iva, .resumen-portes{ font-weight: 700; }

/* Bloque envío */
.resumen-envio{
  background: #f9f4f5; border-radius: 6px;
  padding: 0.8em; margin: 0.5em 0;
}
/* Envío: permite que el valor (A confirmar / 24-48h…) baje a la línea
   siguiente si no cabe junto al label, manteniéndose alineado a la
   derecha gracias a margin-left:auto. */
.resumen-dato--envio{ margin: 0; flex-wrap: wrap; }
.resumen-dato--envio .resumen-dato-label{ flex: 1 1 auto; }
.resumen-dato--envio strong{ margin-left: auto; }
/* Plazo: punto + texto pegados (no space-between). */
.resumen-dato--plazo{
  margin: 0;
  font-size: 0.85em;
  color: #666;
  justify-content: flex-start;
}
.resumen-dato--faltan{ margin: 0.3em 0 0; font-size: 0.85em; color: var(--rC); }

/* Desglose */
.resumen-desglose{ margin: 0.5em 0; font-size: 0.9em; }

/* Acciones: login */
.resumen-linea-acciones--login{ text-align: center; }
.resumen-login-msg{ margin: 0 0 0.5em; font-size: 0.9em; color: var(--gM); }
.resumen-link-registro{ display: block; }

/* Acciones: navegación */
.resumen-linea-acciones--nav{ display: flex; gap: 0.5em; }
.resumen-btn-nav{ flex: 1; text-align: center; }
.resumen-linea-acciones--atras{ margin-top: 0.5em; }
.resumen-linea-acciones--atras .resumen-btn-nav{ width: 100%; }

/* Acciones: pareja 50/50 (Guardar + Vaciar) y línea completa (Seguir comprando) */
.resumen .resumen-linea-acciones--duo{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--eS);
  align-items: stretch;
  margin-top: var(--eS);
  margin-bottom: var(--eXS);
}
.resumen .resumen-linea-acciones--duo > *{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--eXS);
  padding: var(--eS) var(--eXS);
  border-radius: var(--rP);
  font-size: var(--fS);
  line-height: var(--lhS);
  text-align: center;
}
.resumen .resumen-linea-acciones--duo > *:hover{
  background: var(--gC3);
  color: var(--rC);
}
.resumen .resumen-linea-acciones--full{
  display: block;
  text-align: center;
  margin-top: 0;
  margin-bottom: var(--eL);
}
.resumen .resumen-linea-acciones--full > *{
  display: inline-block;
  padding: var(--eXS) var(--eS);
  font-size: var(--fS);
}

/* Loader grabación */
.resumen-loader{ display: none; font-weight: bold; color: var(--rC); padding: 0.5em; }

/* Logos pago */
.resumen-pago-logo{ text-align: center; font-size: 0.8em; margin: 0.3em 0; }

/* Icono corazón en guardar para más tarde */
.resumen-guardar-tarde .btn-icono--corazon{
  width: 1em; height: 1em; vertical-align: middle; margin-right: 4px;
}

.estimacion-nota{
  font-weight: 400;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--gM);
  margin-block: var(--eL);
}

.resumen-detalle{ margin: var(--eL) 0; }

.resumen-detalle-desplegable{
  display: flex;
  align-items: center;
  gap: var(--eS);
  padding: var(--eS) var(--eM);
  border-radius: var(--rP);
  background: white;
  cursor: pointer;
  font-size: var(--fS);
  line-height: var(--lhS);
  border: 2px solid white;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.resumen-detalle svg{ transform: rotate(0deg) scale(.7); fill: var(--rC); }
.resumen-detalle-desplegable:hover{ background: var(--gC2); color: var(--r); }

.resumen-detalle[open] > .resumen-detalle-desplegable{
  background: white;
  border-color: var(--rC2);
}

.resumen-detalle[open] svg{ transform: rotate(90deg) scale(.7); }

.resumen-detalle__contenido{
  background: white;
  border-radius: var(--rP);
  padding: var(--eM);
  display: flex;
  margin-top: var(--eXS);
  flex-direction: column;
  gap: var(--eL);
}

.resumen-linea{
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: var(--eM);
}

.resumen-linea-item{
  display: flex;
  gap: var(--eXS);
  min-width: 0;
}

.resumen-linea-imagen img, .resumen-linea img{
  width: var(--eXL);
  height: auto;
  display: block;
}

.resumen-linea__info{ text-align: left; min-width: 0; }
.resumen-linea__info p{ margin: 0; font-size: var(--fXS); line-height: var(--lhXS); }

.resumen-linea__datos p{
  margin: 0;
  font-weight: 600;
  text-align: right;
  font-size: var(--fXS);
  line-height: var(--lhXS);
}

.resumen-linea__datos{ flex: 0 0 auto; }
.resumen-linea-acciones{ margin-bottom: var(--eL); }
.resumen-carro .resumen-linea-acciones{ justify-content: center; gap: var(--eM); }
.resumen-boton-principal{ width: 100%; }

.resumen-presupuesto{
  margin-top: var(--eL);
  padding-top: var(--eL);
  border-top: 1px dotted var(--rC);
}

.resumen-presupuesto-summary{
  cursor: pointer;
  font-weight: 400;
  font-size: var(--fS);
  line-height: var(--lhS);
}

.resumen-presupuesto-texto{
  font-size: var(--fXS);
  line-height: var(--lhXS);
  color: var(--gM);
  margin: 0;
}

.resumen-presupuesto-contenido{
  margin-top: var(--eS);
  display: flex;
  flex-direction: column;
  gap: var(--eS);
}

.resumen-presupuesto-summary::marker{ color: var(--rC); }
.resumen-presupuesto .boton-secundario{ opacity: 1; filter: none; }

/* Actionbar móvil y carro responsive */
.resumen-ayuda li:hover{ background: white; }
.lineas .linea-carro{ width: 100%; }

.linea-carro .linea-contenedor-datos{ justify-content: space-between; }
.linea-carro .linea-detalle{ display: flex; gap: var(--eL); flex-wrap: wrap; }
.linea-carro .stepper{ width: auto; }
.linea-carro .linea-imagen{ flex: 0 0 50px; }

@media (min-width: 501px){
  .item-acciones-ayuda{ flex-direction: column; justify-content: flex-start; }
  .linea-carro .linea-imagen{ flex: 0 0 auto; }
}

@media (min-width: 769px){
  .resumen-ayuda li{ padding: 0 0 var(--eL); }
  .resumen-ayuda li a{ line-height: var(--lhS); }
  .bloque-ayuda ul, .bloque-ayuda ol{ padding-left: var(--eL); }
  .lineas{ padding: var(--eXL); }
  .bloque-ayuda ul li, .bloque-ayuda ol li{ margin-bottom: var(--eM); }
  .linea-titulo, .grupo-articulo__nombre{ font-size: var(--f2XL); }
  .linea-contenedor{ padding: var(--eL); }

  /* Actionbar desktop: hidden */
  body.has-actionbar{ padding-bottom: 0; }
}

/* Actionbar móvil */
body.has-actionbar{ padding-bottom: 76px; }

.actionbar-movil{
  position: fixed;
  left: var(--eL);
  right: var(--eL);
  bottom: var(--eL);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eS);
  padding: var(--eM);
  background: var(--rC3);
  border: 1px solid var(--rC);
  border-radius: var(--rM);
  box-shadow: var(--shadowC);
}

.actionbar-movil__bloque{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
  min-width: 0;
}

.actionbar-movil__label{ font-size: var(--fXS); line-height: var(--lhS); opacity: .85; }
.actionbar-movil__sub{ font-size: var(--fXS); line-height: var(--lhS); opacity: .7; white-space: nowrap; }
.actionbar-movil__total{ font-size: var(--fS); line-height: var(--lhS); font-weight: 700; color: var(--r); white-space: nowrap; }
.actionbar-movil__cta{ white-space: nowrap; }

.actionbar-movil.is-compacta{ padding: 8px 10px; }
.actionbar-movil.is-compacta .actionbar-movil__bloque{ display: none; }
.actionbar-movil.is-compacta .actionbar-movil__cta{ width: 100%; justify-content: center; }

@media (min-width: 769px){
  body.has-actionbar{ padding-bottom: 0; }
  .actionbar-movil{ display: none; }

  .DosColumnas-layout{ display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
  /* Sticky SOLO para el resumen lateral derecho (Resumen del pedido).
     Otros .resumen dentro del layout (ej. "Datos del pedido" en columna
     principal) NO deben fijarse. */
  .DosColumnas-layout .columna-resumen .resumen{ position: sticky; top: var(--eXL); }
}

/* Listas responsive */
.listas-layout{
  display: flex;
  flex-direction: column-reverse;
}

.listas-layout .resumen-listas-indice{ margin-top: var(--eL); }
.listas-layout .resumen-nota{ display: none; }
/* Móvil: el índice de listas (resumen) ocupa todo el ancho y se separa del
   detalle, que en este breakpoint queda debajo (layout column-reverse).
   .resumen lleva align-self:start para no estirarse en el layout desktop;
   en móvil lo estiramos a ancho completo y le damos margen inferior. */
.listas-layout .resumen{ align-self: stretch; margin-bottom: var(--eXL); }
.listas-layout .lineas-listas .resumen-linea-acciones{ position: relative; margin-top: -50px; }
.listas-layout .lineas-listas .resumen-linea-acciones button{ font-size: var(--fXS); width: 180px; }
.listas-layout .item-acciones{ flex-wrap: wrap; border-top: 1px dotted var(--gC); gap: var(--eL); padding-top: var(--eL); }
.listas-layout .linea-lista .linea-titulo{ font-size: var(--fL); }

@media (min-width: 769px){
  .listas-layout{ flex-direction: row; }
  .listas-layout .lineas-listas{ width: 100%; }
  .listas-layout .lineas{ padding: var(--eL); }
  .listas-layout .lineas-contenedor-linea{ margin-top: var(--e2XL); }
  .listas-layout .resumen-nota{ display: block; }
  .listas-layout .resumen-listas-indice{ margin-top: 0; }
  /* En 2 columnas el resumen vuelve a su comportamiento: alineado arriba
     (no estira a la altura del detalle) y sin margen inferior. */
  .listas-layout .resumen{ align-self: start; margin-bottom: 0; }
}


/* ==========================================================================
   15) PÁGINAS · Producto, Red de ventas, Zona de Cata, Cuenta
   (Estilos específicos de página — ya mobile-first)
   ========================================================================== */

/* ── Producto ── */
.producto-layout{
  display: flex;
  flex-direction: column;
  gap: var(--eL);
}

.producto-media, .producto-info{
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.producto-info{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
}

.producto-info__cabecera{
  display: flex;
  flex-direction: column;
  gap: var(--eS);
  padding-bottom: var(--eL);
}

/* ── CTA: Cantidad + Carrito ── */
.producto-cta{
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cta__label-row{
  border-top: 1px dotted var(--gC);
  margin-top: var(--eS);
  padding-top: var(--eS);
}

.cta__label{
  font-size: var(--fXS);
  font-weight: 400;
  color: var(--g);
  line-height: var(--lhXS);
}

.cta__multiplo{
  font-style: italic;
  font-weight: 300;
}

.producto-total__label{
  font-size: var(--fS);
  font-weight: 400;
  color: var(--g);
  white-space: nowrap;
}

.cta__total .precioFormato{ line-height: 0.5; }

/* Altura uniforme para stepper, botones y total */
.producto-cta .stepper{ margin-bottom: 0; }
.producto-cta .cta__boton,
.producto-cta .stepper{
  height: 2.75rem;
  box-sizing: border-box;
}
.producto-cta .cta__boton{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Layout CTA (todos los anchos):
   [cantidad]   Total: ...
   [Añadir]     [Ver carrito]
   [Entrega estimada ─────────]
   [Guardar ──────────────────]
── */
.cta__fila-principal{
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "cantidad   total"
    "anadir     vercarrito"
    "entrega    entrega"
    "guardar    guardar";
  gap: var(--eS);
  align-items: center;
  margin-top: var(--eXS);
}

.cta__cantidad{ grid-area: cantidad; }
.cta__cantidad .stepper{ width: auto; }
.cta__total{
  grid-area: total;
  justify-self: start;
  display: flex;
  align-items: baseline;
  gap: var(--eS);
  justify-content: flex-start;
}
.cta__anadir{ grid-area: anadir; }
.cta__ver-carrito{ grid-area: vercarrito; justify-self: start; }
.cta__entrega{ grid-area: entrega; margin: 0; }
.cta__guardar{ grid-area: guardar; }

/* ── Variante "Añadir artículo por código" (carrito Asociado/Central) ── */
.producto-cta--anadir{ margin-top: var(--eL); }
.cta-anadir__form{
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: var(--eS);
  align-items: end;
  margin-top: var(--eXS);
}
.cta-anadir__form--sin-ref{
  grid-template-columns: 1fr auto auto;
}
.cta-anadir__campo{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
  min-width: 0;
}
.cta-anadir__campo--codigo{ grid-column: 1; }
.cta-anadir__campo--ref{ grid-column: 2; }
.cta-anadir__campo--cantidad{ grid-column: 3; }
.cta-anadir__boton{ grid-column: 4; height: 2.75rem; }
.cta-anadir__form--sin-ref .cta-anadir__campo--cantidad{ grid-column: 2; }
.cta-anadir__form--sin-ref .cta-anadir__boton{ grid-column: 3; }
.cta-anadir__etiqueta{
  font-size: var(--fXS);
  font-weight: 400;
  color: var(--g);
  line-height: var(--lhXS);
}
.cta-anadir__input{
  border: 1px solid var(--rC);
  padding: 0 var(--eS);
  border-radius: var(--rP);
  background: white;
  height: 2.75rem;
  font-size: var(--fM);
  color: var(--gO);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}
.cta-anadir__input:focus,
.cta-anadir__input:focus-visible{
  outline: none;
  border-color: var(--r);
  box-shadow: 0 0 0 2px var(--rC2);
}
.producto-cta--anadir .stepper{ width: auto; }
/* ── Paso 3: Datos del pedido (Su pedido nº + Observaciones)
   Hereda el look de .resumen + .resumen-titulo (cabecera roja + borde).   */
.resumen.checkout-pedido-datos{
  display: block;
  margin-bottom: var(--eL);
  overflow: visible; /* deja ver el halo :focus de los inputs */
  /* .resumen base define align-self:start (para no estirar en flex), pero
     este bloque vive como flex-child directo (display:contents en el parent
     sobre móvil) y necesita ocupar el ancho completo del layout. */
  align-self: stretch;
  width: 100%;
}
/* Como el contenedor tiene overflow:visible (para el halo focus), el título
   no se clipea contra el border-radius. Le damos su propio radio en las
   esquinas superiores para coincidir con el contenedor. */
.resumen.checkout-pedido-datos > .resumen-titulo{
  border-radius: var(--rM) var(--rM) 0 0;
}
/* Indicador "(opcional)" en cabeceras (Datos del pedido) */
.resumen-titulo__opcional{
  font-size: var(--fS);
  font-weight: 400;
  font-style: italic;
  opacity: 0.85;
  margin-left: var(--eXS);
}

/* ── Avisos en Paso 3 (compactos, sin form_wrapper completo) ── */
.aviso-checkout{
  margin: 0 0 var(--eL);
  padding: var(--eM) var(--eL);
  border-radius: var(--rP);
  font-size: var(--fS);
  line-height: var(--lhM);
}
.aviso-checkout strong{ display: inline-block; margin-right: 0.4em; }
.aviso-checkout--bloqueante{
  background: #fff5d6;
  border: 1px solid #d8b500;
  color: #5a4500;
}
.aviso-checkout--info{
  background: #f6efef;
  border: 1px solid var(--rC);
  color: var(--gO);
}
/* Aviso BAJO PEDIDO — visible pero no agresivo. Lo marca como ámbar
   (mismo tono que el chip .entrega-bajopedido) y deja claro que es info
   legal sin ser bloqueante. */
.aviso-checkout--bajopedido{
  background: #fff8e1;
  border: 1px solid #f0c060;
  color: #5a4500;
}
.aviso-checkout--bajopedido a{ color: #5a4500; text-decoration: underline; }
.aviso-checkout--bajopedido a:hover{ text-decoration: none; }
/* Aceptación expresa (checkbox) — variante más prominente. Aumenta el
   contraste y centra el contenido para que destaque sobre el aviso
   meramente informativo de la parte superior. */
.aviso-checkout--bajopedido-confirm{
  background: #fff8e1;
  border: 2px solid #d9a441;
  color: #5a4500;
  margin: 0 0 var(--eL);
  padding: var(--eM) var(--eL);
  border-radius: var(--rP);
}
.bajopedido-confirm__label{
  display: flex;
  align-items: flex-start;
  gap: var(--eM);
  cursor: pointer;
  font-size: var(--fS);
  line-height: var(--lhM);
}
.bajopedido-confirm__label input[type="checkbox"]{
  flex-shrink: 0;
  width: 1.4em;
  height: 1.4em;
  margin-top: 0.15em;
  cursor: pointer;
  accent-color: #d9a441;
}
.aviso-checkout--bajopedido-confirm a{ color: #5a4500; text-decoration: underline; }
.aviso-checkout--bajopedido-confirm a:hover{ text-decoration: none; }
/* Estado de error (checkbox no marcado al pulsar Pagar) */
.aviso-checkout--bajopedido-confirm.is-error{
  background: #fdecea;
  border-color: #c0392b;
  color: #7a1c14;
}
.aviso-checkout--bajopedido-confirm.is-error a{ color: #7a1c14; }
/* Punto ámbar — indicador discreto reutilizable. Mismo patrón visual
   que .chip-stock-badge (variantes en stock de la ficha), pero en
   ámbar para señalar el estado "bajo pedido". Se inserta inline antes
   de un texto (carro-stock-badge--bajopedido, resumen-dato--plazo). */
.bajopedido-dot{
  display: inline-block;
  width: .5rem;
  height: .5rem;
  background: #d9a441;
  border-radius: 50%;
  outline: 1px solid white;
  vertical-align: middle;
  margin-right: 0.4em;
  font-size: 0;
}

/* ── Dirección de envío concisa dentro del Resumen del pedido (Paso 3) ── */
.resumen-dato--direccion{ flex-direction: column; align-items: flex-start; gap: var(--eXS); }
.resumen-direccion-envio{ font-weight: 500; line-height: var(--lhS); }
.checkout-pedido-datos__grid{
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--eM);
  align-items: end;
}
.checkout-pedido-datos__campo{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
  min-width: 0;
}
.checkout-pedido-datos__campo--ancho{ grid-column: 2; }
.checkout-pedido-datos__etiqueta{
  font-size: var(--fXS);
  font-weight: 400;
  color: var(--g);
  line-height: var(--lhXS);
}
@media (max-width: 640px){
  .checkout-pedido-datos__grid{ grid-template-columns: 1fr; }
  .checkout-pedido-datos__campo--ancho{ grid-column: 1; }
}

.cta-anadir__error{
  grid-column: 1 / -1;
  margin: var(--eXS) 0 0;
  padding: var(--eS) var(--eM);
  background: #fff3f3;
  border: 1px solid var(--r);
  border-radius: var(--rP);
  color: var(--r);
  font-size: var(--fS);
  line-height: var(--lhS);
}

.aviso-carrito{
  margin: var(--eM) 0;
  padding: var(--eM) var(--eL);
  border-radius: var(--rP);
  font-size: var(--fS);
  line-height: var(--lhS);
}
.aviso-carrito--error{
  background: #fff3f3;
  border: 1px solid var(--r);
  color: var(--r);
}

/* Dirección colapsada en Paso 2 — botón "Editar" debajo del resumen */
.direccion-bloque{ margin-bottom: var(--eM); }

/* Botón Editar dentro del h3 del form_wrapper (factura).
   Va justo al lado del título, con fondo blanco translúcido sobre la
   cabecera roja para destacar y permanecer legible. */
.form-wrapper__editar{
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.25em 0.6em;
  background: rgba(255, 255, 255, 0.9);
  color: var(--r, #8e1f30);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--fS, 0.9rem);
  font-weight: 500;
  line-height: 1.2;
  transition: background 0.15s, border-color 0.15s;
}
.form-wrapper__editar:hover{ background: white; border-color: white; }
.form-wrapper__editar .icono{ width: 14px; height: 14px; flex-shrink: 0; }

/* ── Cards de dirección de envío (Paso 2) ── */
.envio-cards{
  display: flex;
  flex-direction: column;
  gap: var(--eS);
  margin: var(--eS) 0 var(--eM);
}
.envio-card{
  display: block;
  border: 1px solid var(--bordeColor, #ddd);
  border-radius: var(--radio, 6px);
  padding: var(--eM);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.envio-card:hover{ border-color: var(--rC, #c98a8a); }
.envio-card--seleccionada{
  border-color: var(--r, #8e1f30);
  background: #fdf6f7;
  box-shadow: 0 0 0 1px var(--r, #8e1f30) inset;
}
.envio-card__cabecera{
  display: flex;
  align-items: flex-start;
  gap: var(--eS);
  cursor: pointer;
  margin: 0;
}
.envio-card__cabecera input[type="radio"]{
  margin-top: 0.3em;
  flex-shrink: 0;
}
.envio-card > input[type="radio"]{
  /* Card que es a su vez label (factura) */
  margin-right: var(--eS);
  vertical-align: top;
  margin-top: 0.3em;
}
.envio-card.envio-card--factura{
  display: flex;
  align-items: flex-start;
  gap: var(--eS);
}
.envio-card__cuerpo{ flex: 1 1 auto; min-width: 0; }
.envio-card__alias{
  display: block;
  font-size: var(--fM, 1rem);
  font-weight: 600;
  margin-bottom: var(--eXS);
  color: var(--gO, #333);
}
.envio-card__detalle{
  margin: 0;
  font-size: var(--fS, 0.92rem);
  line-height: 1.4;
  color: var(--gM, #555);
}
.envio-card__detalle--info{ font-style: italic; color: var(--gC, #777); }
.envio-card__detalle--meta{ margin-top: var(--eXS); }
/* Icono lápiz "Editar" en esquina superior derecha de cada card */
.envio-card{ position: relative; }
.envio-card__acciones{
  position: absolute;
  top: var(--eS);
  right: var(--eS);
}
.envio-card__editar{
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.25em 0.55em;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--gM, #555);
  cursor: pointer;
  /* Heredar tipografía de la página: el <button> nativo usa por defecto
     la fuente del sistema, lo que hacía que "Editar" (button) y "Borrar"
     (<a>) no coincidieran. */
  font-family: inherit;
  font-size: var(--fXS, 0.8rem);
  font-weight: 500;
  line-height: 1.2;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.envio-card__editar:hover{
  background: #fff;
  border-color: var(--r, #8e1f30);
  color: var(--r, #8e1f30);
}
.envio-card__editar .icono{ width: 12px; height: 12px; flex-shrink: 0; }
/* Modificador "Borrar": usa .envio-card__editar como base (mismo botón con
   icono) y solo neutraliza el underline propio del <a>. */
a.envio-card__borrar{ text-decoration: none; }
.envio-card__form{
  margin-top: var(--eM);
  padding-top: var(--eM);
  border-top: 1px dashed var(--bordeColor, #ddd);
}
.envio-card__form-acciones,
.factura-form-acciones{
  display: flex;
  justify-content: flex-end;
  gap: var(--eS);
  margin-top: var(--eM);
  padding-top: var(--eM);
  border-top: 1px dashed var(--bordeColor, #ddd);
  /* En contextos flex-wrap como `form.login dl` esto fuerza a la fila propia
     y permite que justify-content:flex-end alinee los botones a la derecha. */
  flex: 1 1 100%;
}
.envio-card__form-acciones .boton-secundario,
.envio-card__form-acciones .boton-principal,
.factura-form-acciones .boton-secundario,
.factura-form-acciones .boton-principal{
  font-size: var(--fS);
  padding: var(--eXS) var(--eL);
}
.envio-card--nueva .envio-card__alias{ color: var(--r, #8e1f30); }

/* ── Hero del carrito: icono sin recorte + botón "Cambiar tipo" ── */
.hero-layout--carrito{
  padding-left: var(--eL);
  overflow: visible;
}
body[data-pagina="carrito"] .hero-titulo{
  flex-wrap: wrap;
  gap: var(--eL);
  padding-left: var(--eS);
}
.hero-btn-cambiar-tipo{
  /* Hereda el patrón visual de .form-wrapper__editar (icono lápiz + texto)
     pero el hero tiene fondo claro: bordes y colores adaptados. */
  margin-left: auto;
  background: white;
  border-color: var(--rC);
  color: var(--r);
}
.hero-btn-cambiar-tipo:hover{
  background: var(--rC3);
  border-color: var(--r);
  color: var(--r);
}
@media (min-width: 769px){
  .hero-layout--carrito{ overflow: visible; }
}

/* ── Modal cambiar tipo de pedido (reutiliza .modal-overlay/.modal-panel) ── */
.modal-tipo-pedido{
  position: relative;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--eXL);
}
.modal__cerrar{
  position: absolute;
  top: var(--eS);
  right: var(--eS);
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: transparent;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--g);
  cursor: pointer;
  border-radius: 50%;
}
.modal__cerrar:hover{ background: var(--gC3); color: var(--gO); }
.modal-tipo__actual{
  margin: 0 0 var(--eL);
  font-size: var(--fS);
  color: var(--g);
}
.modal-tipo__opciones{
  display: flex;
  gap: var(--eS);
  margin-top: var(--eS);
}
.modal-tipo__boton{
  flex: 1 1 0;
  min-width: 0;
}
.modal-tipo__asociado{
  margin-bottom: var(--eL);
}
.modal-tipo__instruccion{
  margin: 0 0 var(--eS);
  font-size: var(--fS);
  font-weight: 500;
  color: var(--gO);
}
.modal-tipo__asociado dl{ margin: 0; }
.modal-tipo__asociado dl dt{
  font-size: var(--fXS);
  color: var(--g);
  margin-bottom: var(--eXS);
}
.modal-tipo__asociado dl dd{ margin: 0; }
.modal-tipo__asociado select{
  width: 100%;
  padding: var(--eS);
  border: 1px solid var(--rC);
  border-radius: var(--rP);
  background: white;
  font-size: var(--fM);
  height: 2.75rem;
  box-sizing: border-box;
}

@media (max-width: 640px){
  .cta-anadir__form{
    grid-template-columns: 1fr 1fr;
  }
  .cta-anadir__campo--codigo{ grid-column: 1; grid-row: 1; }
  .cta-anadir__campo--ref{ grid-column: 2; grid-row: 1; }
  .cta-anadir__campo--cantidad{ grid-column: 1; grid-row: 2; }
  .cta-anadir__boton{ grid-column: 2; grid-row: 2; align-self: end; }

  .cta-anadir__form--sin-ref{ grid-template-columns: 1fr 1fr; }
  .cta-anadir__form--sin-ref .cta-anadir__campo--codigo{ grid-column: 1 / -1; grid-row: 1; }
  .cta-anadir__form--sin-ref .cta-anadir__campo--cantidad{ grid-column: 1; grid-row: 2; }
  .cta-anadir__form--sin-ref .cta-anadir__boton{ grid-column: 2; grid-row: 2; }
}

.producto-especificaciones__lista{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--eS);
  row-gap: var(--eXS);
  align-items: baseline;
}

.producto-especificaciones__term{
  grid-column: 1;
  text-wrap: wrap;
  font-weight: 400;
  color: var(--g);
  font-size: var(--fXS);
  line-height: var(--lhS);
}

.producto-especificaciones__def{
  grid-column: 2;
  color: var(--n);
  font-weight: 500;
  font-size: var(--fS);
  line-height: var(--lhS);
  word-break: break-word;
  margin: 0;
}

.producto-especificaciones__term::after{ content: ":"; }

.producto-media--detalle{ display: none; }

.producto-media--detalle--mobile,
.producto-media--detalle--mobile.docs--mobile{
  display: block;
}

.producto-detalle-titulo{
  font-size: var(--fL);
  line-height: var(--lhL);
  margin: 0 0 var(--eS);
}

.descripcion__larga{ margin-top: var(--eM); }

.producto-docs__texto{
  margin: 0;
  font-weight: 300;
  color: var(--g2);
  font-size: var(--fS);
  line-height: var(--lhS);
}

.producto-docs__cta{ margin: var(--eS) 0 0 0; }
.producto-docs__link{ color: var(--r); text-decoration: none; font-weight: 600; }
.producto-docs__link:hover{ text-decoration: underline; }

#zc-relacionados{ scroll-margin-top: 120px; }

.producto-media-principal{
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  touch-action: pan-y; /* el JS gestiona el swipe horizontal; el scroll vertical sigue funcionando */
  border: 1px solid var(--gC);
  border-radius: var(--rP);
  background: white;
}

.producto-media-imagen{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.carril-miniaturas{
  display: flex;
  gap: var(--eS);
  overflow-x: auto;
  margin-top: var(--eS);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.chip-miniatura{
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: var(--rP);
  border: 2px solid var(--gC2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  scroll-snap-align: start;
}

.chip-miniatura--activa{
  border-color: var(--rC);
  box-shadow: 0 0 0 1px var(--rC);
}

/* ── Chip de vídeo: superpone icono play ── */
.chip-miniatura--video{ position: relative; }
.chip-miniatura--video::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* triángulo play blanco sobre fondo oscuro semitransparente */
  background:
    rgba(0,0,0,.30)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E")
    center / 55% auto no-repeat;
  pointer-events: none;
}

/* ── Contenedor iframe YouTube (ocupa el mismo espacio que la imagen) ── */
.producto-media-video{
  position: absolute;
  inset: 0;
  background: #000;
}
.producto-media-video iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ══ Galería slider de producto ══════════════════════════════════════════
   Mismo patrón que .slider + .slider-track del home, adaptado a la ficha:
   cada slide ocupa el 100% del ancho con aspect-ratio 4/3.
   Las flechas se ocultan en dispositivos táctiles (hover:none and pointer:coarse)
   igual que los sliders de cards.
   ══════════════════════════════════════════════════════════════════════ */
.producto-galeria{
  position: relative;
  margin-bottom: var(--eS);
}

.galeria-track{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  touch-action: pan-x pan-y; /* swipe táctil nativo; scroll vertical sigue activo */
  scrollbar-width: none;
  border: 1px solid var(--gC);
  border-radius: var(--rP);
  background: white;
}
.galeria-track::-webkit-scrollbar{ display: none; }

.galeria-slide{
  flex: 0 0 100%;
  aspect-ratio: 4 / 3;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  position: relative;
  background: white;
}

.galeria-imagen{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Slide de vídeo YouTube */
.galeria-slide--video{ background: #000; }
.galeria-video-wrap{ width: 100%; height: 100%; }
.galeria-video-wrap iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Flechas de la galería */
.producto-galeria > .flechas-controles{
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

/* Por defecto invisibles; aparecen al pasar el ratón sobre la galería */
.producto-galeria .flecha-prev,
.producto-galeria .flecha-next{
  opacity: 0;
  /* transition heredada de .flecha-prev/.flecha-next (all .2s ease) */
}
.producto-galeria:hover .flecha-prev:not(.is-hidden),
.producto-galeria:hover .flecha-next:not(.is-hidden){
  opacity: .9;
}

.producto-galeria .flecha-prev.is-hidden,
.producto-galeria .flecha-next.is-hidden{ display: none; }

/* En táctil: ocultar el contenedor completo (swipe nativo del track) */
@media (hover: none) and (pointer: coarse){
  .producto-galeria > .flechas-controles{ display: none; }
}

.producto-resumen{
  border-block: 1px dotted var(--rC);
  padding-bottom: var(--eL);
}

.producto-resumen__seleccionado{
  color: var(--rC);
  font-style: italic;
  font-size: var(--fS);
  line-height: var(--lhS);
}

.producto-resumen__seleccionado::before{
  content: "Has seleccionado: ";
  font-weight: 500;
  color: var(--gO);
  font-style: normal;
}

.producto-resumen--obsoleto{
  background: var(--rC2, #fff3f3);
  border: 1px solid var(--r, #c00);
  border-radius: 10px;
  padding: var(--eM) var(--eM);
}

.producto-obsoleto__titulo{
  color: var(--r, #c00);
  font-size: var(--fM);
  line-height: var(--lhM);
  margin: 0 0 var(--eS);
}

.producto-obsoleto__texto{
  font-size: var(--fS);
  line-height: var(--lhM);
  color: var(--g1);
  margin: 0 0 var(--eS);
}

.producto-obsoleto__texto a{ color: var(--r, #c00); text-decoration: underline; }

.producto-resumen__aviso-ref{
  background: var(--rC2, #fff3f3);
  border: 1px solid var(--r, #c00);
  border-radius: 10px;
  padding: var(--eM);
  margin: var(--eS) 0;
}

.producto-resumen__aviso-ref .producto-obsoleto__titulo,
.producto-resumen__aviso-ref .producto-obsoleto__texto{ margin: 0 0 var(--eS); }
.producto-resumen__aviso-ref .producto-obsoleto__texto:last-child{ margin-bottom: 0; }

/* El atributo hidden debe prevalecer sobre display:flex/grid/block declarado
   en selectores específicos (p. ej. .producto-cta { display:flex }). */
.producto-cta[hidden],
.producto-resumen__aviso-ref[hidden],
.producto-resumen__precio-entrega[hidden]{ display: none !important; }

.producto-especificaciones{
  border-top: 1px dotted var(--rC);
  margin: var(--eL) 0;
  padding-top: var(--eL);
}

.producto-especificaciones__subtitulo{
  font-size: var(--fS);
  line-height: var(--lhS);
  font-weight: 600;
  color: var(--g);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: var(--eL) 0 var(--eS);
  padding: 0 0 var(--eXS);
  border-bottom: 1px solid var(--gC);
}

.producto-cta__favorito{
  cursor: pointer;
  border-radius: var(--rB);
  border: 1px solid var(--gC);
  background: white;
  padding: var(--eXS) var(--eS);
  font-size: var(--fS);
  line-height: var(--lhS);
  display: inline-flex;
  align-items: center;
  gap: var(--eXS);
  color: var(--g2);
}

.producto-cta__favorito::before{ content: "♡"; font-size: 1rem; line-height: 1; }

.producto-cta__favorito--activo{
  border-color: var(--r);
  background: var(--rC2);
  color: var(--r);
}

.producto-cta__favorito--activo::before{ content: "♥"; }

.producto-lista{
  margin-top: var(--eM);
  padding-top: var(--eS);
  border-top: 1px solid var(--gC);
}

.producto-lista__titulo{
  font-size: var(--fS);
  line-height: var(--lhS);
  font-weight: 600;
  margin: 0 0 var(--eS);
}

.producto-lista__items{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
}

.producto-lista__item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fXS);
  line-height: var(--lhXS);
}

.producto-lista__item--vacio{ font-style: italic; color: var(--g2); }

.producto-lista__quitar{
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--fXS);
  line-height: var(--lhXS);
  text-decoration: underline;
  color: var(--g2);
}

.producto-lista__quitar:hover{ color: var(--r); }

.producto-resumen .precioFormato{
  margin: 0;
  padding: var(--eXS) 0;
  line-height: 1;
}

.producto-resumen .precioFormato sup{ top: -0.25em; }

/* ──────────────────────────────────────────────────────────────────
   Ajustes de ficha producto (correcciones #7) — precio + subtítulo,
   chip "envío 24-48h", separación visual del CTA, leyenda de chips
   con entrega rápida.
   ────────────────────────────────────────────────────────────────── */

/* Precio principal: deja sitio para el subtítulo en una nueva línea */
.producto-resumen__precio-entrega .precioFormato{
  flex-wrap: wrap;
  margin: var(--eS) 0;
}
.producto-resumen__precio-entrega .precioFormato sup{ margin-top: .4rem; }

/* Subtítulo del precio: "Precio/unidad del artículo seleccionado" */
.precioFormato__sub{
  display: block;
  flex-basis: 100%;
  font-size: var(--fXS);
  font-weight: 400;
  color: var(--rC);
  font-style: italic;
  line-height: var(--lhS);
}

/* Chips de entrega — tres casos distintos para evitar doble badge:
   1. "24-48h" (en stock):  .entrega-stock        → chip verde sage
   2. "BAJO PEDIDO":         .entrega-bajopedido   → chip ámbar
   3. "N días":              outer span sin inner  → chip gris
   El selector :not(:has(span)) garantiza que el outer span sólo
   reciba el chip cuando contiene texto plano (caso días); cuando
   contiene un span anidado, el chip lo pone ese span directamente. */
.variantes__clave .entrega-stock{
  display: inline-block;
  background: #85a59F;
  color: white;
  font-weight: 400;
  padding-inline: var(--eS);
  border-radius: var(--rP);
  font-size: var(--fS);
  line-height: var(--lhS);
}
.variantes__clave .entrega-bajopedido{
  display: inline-block;
  background: #fff3e0;
  color: #b25b00;
  border: 1px solid #ffb74d;
  font-weight: 500;
  padding-inline: var(--eS);
  border-radius: var(--rP);
  font-size: var(--fS);
  line-height: var(--lhS);
}
.variantes__clave > span:not(:has(span)):not(:empty){
  display: inline-block;
  border: 1px solid var(--gC);
  padding-inline: var(--eS);
  color: var(--g);
  font-weight: 400;
  border-radius: var(--rP);
  font-size: var(--fS);
  line-height: var(--lhS);
}

/* Bloque CTA: separador dotted respecto al resto de la ficha */
.producto-cta{
  border-top: 1px dotted var(--gC);
  margin-top: var(--eS);
  padding-top: var(--eS);
}

/* Leyenda "● Artículos con entrega rápida" debajo de los chips */
.producto-variantes__leyenda{
  display: flex;
  align-items: center;
  gap: var(--eS);
  margin: var(--eS) 0 0;
  font-size: var(--fXS);
  color: var(--g);
}
.producto-variantes__leyenda-bullet{
  display: inline-block;
  width: .5rem;
  height: .5rem;
  background: #85a59F;
  border-radius: 50%;
  outline: 1px solid white;
  flex-shrink: 0;
}

@media (min-width: 501px){
  .cta__fila--botones{
    width: fit-content;
    flex-direction: row;
    align-items: flex-start;
  }
  .cta__fila--botones .boton-principal,
  .cta__fila--botones .boton-secundario{ width: auto; }
  .cta__fila--cantidad{ width: fit-content; }
  .producto-resumen .precioFormato{ padding: var(--eS) 0; }
}

@media (min-width: 769px){
  .producto-layout{
    flex-direction: row;
    gap: var(--eXL);
  }
  .producto-media{ flex: 1 1 60%; }
  .producto-info{ flex: 1 1 40%; }

  .producto-media--detalle{ display: block; margin-top: var(--eL); }
  .producto-media--detalle--mobile,
  .producto-media--detalle--mobile.docs--mobile{ display: none; }

  .producto-especificaciones__term{ text-wrap: balance; }
}

@media (min-width: 1025px){
  .producto-layout{ gap: var(--eXL); }
  .chip-miniatura{ width: 50px; height: 50px; }
  .producto-especificaciones__lista{ column-gap: var(--eM); }
  .producto-especificaciones__term{ text-wrap: nowrap; }
}


/* ── Cuenta ── */
.cuenta{ margin-top: var(--eXL); }

.cuenta h1{
  margin: 0 0 var(--eM);
  font-size: var(--f3XL);
  line-height: var(--lh3XL);
  font-weight: 600;
}

.cuenta-acciones, .cuenta-acciones-top{
  display: flex;
  gap: var(--eS);
  flex-wrap: wrap;
  margin-top: var(--eM);
}

.lbt-enlace{
  border-top: 1px dotted var(--rC2);
  margin-top: var(--eM);
  padding: var(--eM) 0;
}

.cuenta-cabecera{
  display: flex;
  align-items: center;
  gap: var(--eM);
  padding: var(--eM);
  border-radius: var(--rM);
  background: var(--gC2);
  margin-bottom: var(--eL);
}

.cuenta-avatar{
  width: var(--e2XL);
  height: var(--e2XL);
  border-radius: var(--rB);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fL);
  line-height: 1;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.78);
  flex: 0 0 auto;
}

.cuenta-identidad{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
  min-width: 0;
  flex: 1 1 auto;
}

.cuenta-nombre{
  margin: 0;
  font-weight: 700;
  font-size: var(--fM);
  line-height: var(--lhM);
}

.cuenta-email, .cuenta-tipo{
  margin: 0;
  font-size: var(--fS);
  line-height: var(--lhS);
}

@media (max-width: 860px){
  .cuenta-layout{ grid-template-columns: 1fr; }
}

.resumen-item{
  list-style-type: none;
  padding: var(--eM);
}

.resumen-item:not(:last-of-type){ border-bottom: 1px dotted var(--gC); }
.lateral-icono-enlace:last-child{ border: 0; }

.linea-tabla{
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--eS);
  font-size: var(--fS);
  line-height: var(--lhS);
}

.linea-tabla th, .linea-tabla td{
  padding: var(--eS) var(--eM);
  border-bottom: 1px solid var(--gC2);
  text-align: left;
  color: var(--gM);
}

.linea-tabla thead th{ font-weight: 500; color: var(--gO); }

.cuenta-resumen-link{ display: flex; align-items: center; gap: var(--eS); }
.cuenta-menu-icono{ width: 1em; height: 1em; flex: 0 0 auto; opacity: .9; }
.cuenta-titulo{ display: flex; align-items: center; gap: var(--eS); }
.cuenta-titulo-icono{ width: 1.5em; height: 1.5em; flex: 0 0 auto; opacity: .95; }

.linea-bloque-texto .cuenta-dato{ color: var(--gO); }
.lineas #herramientas .linea-bloque-texto:first-of-type{ margin-bottom: var(--eXL); }
.cuenta-titulo-texto{ color: var(--gO); }
.linea-bloque-titulo svg{ color: white; }

.bloque[data-js="pedido-detalle"],
.bloque[data-js="cliente-detalle"],
.bloque .bloque{
  border: 1px solid var(--rC2);
  border-radius: var(--rP);
  margin-top: var(--eL);
}


/* ==========================================================================
   16) RED DE VENTAS · MOBILE FIRST
   ========================================================================== */

/* --- Base (móvil < 500px) --- */

.tabs-asociados{ margin-top: var(--eXL); }
.tabs-asociados input[type="radio"]{ display: none; }
.tabs-asociados .tab{ display: flex; gap: 0; align-items: flex-end; }

.tabs-asociados .tab label{
  font-size: var(--fL);
  line-height: var(--lhL);
  padding: var(--eM);
  background: white;
  border: 1px solid var(--gC);
  border-bottom: none;
  border-radius: var(--rP) var(--rP) 0 0;
  cursor: pointer;
  position: relative;
  transition: background .2s ease, border-color .2s ease;
}

.tabs-asociados .contenido{
  border: 1px solid var(--gC);
  border-radius: var(--rM);
  border-top-left-radius: 0;
  background: white;
  overflow: visible;
}

.tabs-asociados .contenido > div{ display: none; }

#tab-1:checked ~ .tab label:nth-child(1),
#tab-2:checked ~ .tab label:nth-child(2){ font-weight: 600; }

#tab-1:checked ~ .tab label:nth-child(1)::after,
#tab-2:checked ~ .tab label:nth-child(2)::after{
  content: "";
  position: absolute;
  left: 1px; bottom: -3px;
  width: calc(100% - 2px); height: 5px;
  background: white;
}

/* Móvil: ocultar tab mapa, forzar listado siempre */
#tab-1 ~ .tab label:nth-child(1){ display: none; }
#tab-1:checked ~ .contenido > .contenido-mapa,
.contenido-mapa{ display: none !important; }
.contenido-listado{ display: flex !important; }
#tab-2:checked ~ .contenido > .contenido-listado{ display: flex !important; }

/* Mapa (oculto en móvil, definido para desktop) */
.contenido-mapa{
  display: flex;
  gap: var(--eXL);
}

.mapa-busqueda{
  flex: 1.5 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--eL);
}

.mapa-wrapper{
  position: relative;
  flex: 1 0 auto;
  min-height: 260px;
}
.mapa-wrapper svg{ width: 100%; height: auto; display: block; }

.selector-prov-mun p{
  margin: 0 0 var(--eL);
  font-size: var(--fS); line-height: var(--lhS); color: var(--gO);
}
.selector-prov-mun span{ font-weight: 600; }
.selector-prov{ display: flex; flex-direction: column; gap: var(--eL); }
.selector-prov__control{ display: block; }

/* Resultados provincia */
.resultados-busqueda{
  margin-top: var(--eXL);
  display: flex; flex-direction: column; gap: var(--eL);
  flex: 1 0 0;
  padding: var(--eS) var(--eL);
}

.grid-asociados{ display: flex; flex-direction: column; gap: var(--eL); }
.chips-distribuidores{ display: flex; gap: var(--eM); flex-wrap: wrap; align-items: center; }

/* Tarjeta asociado */
.tarjeta-asociado{
  border-top: 1px solid var(--gC);
  padding-top: var(--eL);
  display: flex; flex-direction: column; gap: var(--eL);
  margin: 0 auto;
}
.tarjeta-asociado[hidden]{ display: none !important; }

.tarjeta-asociado .cabecera{
  display: flex; flex-direction: column; gap: var(--eL);
  border: none; box-shadow: none;
}
.logo-wrap img, .asoc-logo{ width: 100px; height: auto; flex-shrink: 0; }

.datos-asociado h4, .asoc-nombre{
  margin: 0;
  font-size: var(--fXL); line-height: var(--lhXL);
  font-weight: 400; text-transform: uppercase; color: var(--gO);
}
.tarjeta-asociado .asoc-meta a{ word-break: break-word; }

/* Sedes */
.sedes{
  display: flex; flex-direction: column;
  gap: var(--eM); margin-top: var(--eL);
}
.contenido-mapa .sedes{ flex-direction: column; }

.sede{
  max-width: 100%; width: 100%; flex: 1 1 auto;
  padding: var(--eS); margin-bottom: var(--eL);
  display: flex; flex-direction: column; gap: var(--eXS);
  border: 1px solid var(--rC2); border-radius: var(--rP); background: white;
}
.sede h5{ margin: 0; color: var(--r); font-size: var(--fM); line-height: var(--lhM); font-weight: 400; }
.sede p{ margin: 0; color: var(--g); font-size: var(--fS); line-height: var(--lhS); }
.sede-sub{ color: var(--gO); margin-top: var(--eXS); margin-bottom: var(--eS); font-size: var(--fS); line-height: var(--lhS); }

/* Listado */
.contenido-listado{
  padding: var(--eM);
  display: flex; flex-direction: column; gap: var(--eL);
}
#listadoDistribuidores{ display: grid; gap: var(--eXL); }
#listadoDistribuidores .chips-asociados{ display: none; }
.rv-movil-tools{ display: block; }

.intro-metricas{ display: none; }
.num-asoc strong{ font-size: var(--f3XL); line-height: var(--lh3XL); }
.num-sedes strong{ font-size: var(--fXL); line-height: var(--lhXL); font-weight: 500; }
#listadoDistribuidores .chip{ padding: var(--eXS) var(--eL); font-size: var(--fXS); }

/* Sin asociado */
.noAsociado p{ margin: 0; padding-bottom: var(--eS); color: var(--g); font-size: var(--fS); line-height: var(--lhS); }
.lista-vecinas{ margin: 0; padding-left: var(--eL); }
.lista-vecinas li{ margin-bottom: var(--eS); }
.lista-vecinas li::marker{ color: var(--rC); }

/* SVG mapa provincias */
.provinciaSi{ fill: var(--rC); fill-opacity: .7; stroke: white; cursor: pointer; transition: fill .2s ease, fill-opacity .2s ease; }
.provinciaSi:hover{ fill-opacity: 1; }
.provinciaSi.selected{ fill: var(--r); fill-opacity: .8; }
.provinciaNo{ fill: var(--rC); fill-opacity: .3; stroke: white; cursor: pointer; transition: fill-opacity .2s ease; }
.provinciaNo:hover{ fill-opacity: .4; }
.provinciaOtro{ fill: var(--gC); stroke: white; }
svg .marco{ fill: white; stroke: var(--gC); stroke-width: .5; }

#textos text{
  paint-order: stroke fill; stroke: rgba(255,255,255,.9); stroke-width: 2px; stroke-linejoin: round;
  display: none; fill: var(--gO); font-size: var(--fS); line-height: var(--lhS);
  pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
#textos text.visible{ display: block; opacity: 1; }
#textos text.textoNo{ opacity: .8; }

.cta-redVentas{ display: flex; width: 100%; flex-direction: row-reverse; }

.rv-tooltip{
  position: absolute; top: var(--eS); right: 10%; transform: translateX(-50%); z-index: 2;
  background: white; border: 1px solid var(--gC); border-radius: var(--rP);
  padding: var(--eXS) var(--eS); font-size: var(--fS); line-height: var(--lhS); color: var(--gO);
  pointer-events: none; white-space: nowrap;
}

.rv-listado-prov{ display: block; margin-bottom: var(--eL); }
.rv-listado-prov .selector-prov-mun p{ margin: 0 0 var(--eL); }
.rv-listado-prov .filtro-chip-panel{ max-height: 55vh; overflow: auto; }

/* --- min-width: 501px (phablet) --- */
@media (min-width: 501px){
  #listadoDistribuidores .chips-asociados{ display: flex; flex-wrap: wrap; gap: var(--eS); justify-content: center; align-items: center; }
  .intro-metricas{ display: block; font-size: var(--fL); line-height: var(--lhL); text-align: center; color: var(--gO); }
  .tarjeta-asociado{ border-top: 1px solid var(--gC3); }
  .contenido-listado{ padding: var(--eL); }
  .sedes{ flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .sede{ max-width: 400px; width: auto; flex: 0 0 auto; }
  .tabs-asociados .tab label{ font-size: var(--fXL); line-height: var(--lhXL); padding: var(--eL); }
}

/* --- min-width: 769px (tablet/desktop: mapa visible) --- */
@media (min-width: 769px){
  .tabs-asociados .tab{ gap: var(--eXS); }
  .tabs-asociados .contenido{ overflow: hidden; }
  #tab-1 ~ .tab label:nth-child(1){ display: inline-block; }
  #tab-1:checked ~ .contenido > .contenido-mapa{ display: flex !important; }
  .contenido-listado{ display: none !important; padding: var(--eXL); }
  #tab-2:checked ~ .contenido > .contenido-listado{ display: flex !important; }
  .rv-listado-prov{ display: none; }
}


/* ==========================================================================
   17) ZONA DE CATA · MOBILE FIRST
   ========================================================================== */

/* --- Base (móvil) --- */

body[data-pagina="zonaCata"] .principal{
  background: var(--rC3);
  border-top: 1px solid var(--rC2);
  border-radius: 0 0 var(--rM) var(--rM);
  padding: var(--eL);
}

.ruta-ZC{ max-width: 1200px; margin: 0 auto; padding-top: var(--eXL); }

.articuloZC .hero-titulo{
  font-weight: 500;
  text-underline-offset: 15px;
  text-decoration: underline var(--rC2) double 4px;
}
.articuloZC .hero-frase{ padding-top: var(--eL); }
.articuloZC .hero-titulo, .articuloZC .hero-frase{ text-align: center; }

/* Hero listado */
.zc-hero{ position: relative; text-align: center; padding: var(--eL) 0 var(--eM); }
.zc-hero__logo{ position: absolute; width: 60px; left: calc(50% - var(--eXL)); top: -40%; display: block; }
.ZC-titulo{ margin: var(--eS) 0 0; padding-bottom: 0; }
.zc-hero__lead{ margin: var(--eS) auto 0; max-width: 72ch; opacity: .85; font-size: var(--fS); line-height: var(--lhS); }

/* Filtros */
.zc-filtros{ margin: 0 0 var(--eL) 0; }
.zc-filtros__bar{ display: flex; justify-content: center; }
.zc-filtros__bar .contenedor-filtros-chip{ justify-content: center; }
.zc-filtros__estado{ margin-top: var(--eS); font-size: var(--fS); line-height: var(--lhS); color: var(--g2); opacity: .9; text-align: center; }
.zc-empty{ opacity: .8; font-size: var(--fS); line-height: var(--lhS); }

/* Grid listado */
.zc-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--eL); }

/* Artículo hero */
.zc-hero-layout{ position: relative; margin-top: var(--eL); }
.zc-hero-layout .hero-titulo{ margin: 0 0 var(--eS); }
.zc-hero-layout .hero-frase{ margin: 0 0 var(--eL); opacity: .9; }
.zc-hero-media{ margin: 0 0 var(--eXL); }
.zc-hero-media img{ width: 100%; height: auto; display: block; border-radius: var(--rM); }

/* Meta (fecha + lectura) */
.zc-meta{
  position: static; margin-top: var(--eS); border-radius: var(--rP);
  display: inline-flex; gap: var(--eS); align-items: center;
  background: white; padding: var(--eXS) var(--eM);
  font-size: var(--fXS); line-height: var(--lhXS); color: var(--g2);
  box-shadow: var(--shadowC);
}

/* Índice móvil */
.zc-indice-movil{
  display: block; margin: var(--eL) auto 0; width: min(980px, 92vw);
}
.zc-indice-movil__summary{
  cursor: pointer; list-style: none;
  padding: var(--eS) var(--eM); border: 1px solid var(--gC); border-radius: var(--rP);
  background: white; font-size: var(--fS); line-height: var(--lhS);
}
.zc-indice-movil__summary::-webkit-details-marker{ display: none; }

/* Índice desktop (aside) */
.zc-indice{ display: flex; flex-direction: column; gap: var(--eXS); margin-bottom: var(--eXL); }
.zc-indice h3{ margin: 0 0 var(--eS); font-size: var(--fM); font-weight: 600; }
.zc-indice__link{
  display: block;
  padding: var(--eXS) 0;
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--g);
  text-decoration: none;
  border-bottom: 1px solid var(--gC2);
}
.zc-indice__link:hover{ color: var(--r); }

/* Relacionados (aside) */
.zc-rel{ margin-bottom: var(--eXL); }
.zc-rel__titulo{ margin: 0 0 var(--eM); font-size: var(--fM); font-weight: 600; }
.zc-rel__lista{
  display: flex;
  flex-direction: column;
  gap: var(--eXS);
}
.zc-rel__lista a{
  display: block;
  padding: var(--eS) 0;
  font-size: var(--fS);
  line-height: var(--lhS);
  color: var(--r);
  text-decoration: none;
  border-bottom: 1px dotted var(--gC2);
}
.zc-rel__lista a:hover{ text-decoration: underline; }
.zc-rel__cta{
  display: inline-block;
  margin-top: var(--eM);
  font-size: var(--fS);
  font-weight: 600;
  color: var(--r);
  text-decoration: none;
}
.zc-rel__cta:hover{ text-decoration: underline; }

/* Layout artículo: columna única en móvil */
.zc-art-layout{
  display: flex; flex-direction: column;
  gap: var(--eXL); width: min(980px, 92vw); margin: 0 auto; align-items: flex-start;
}
.zc-art-cuerpo{ flex: 2.5 1 0; min-width: 0; }
.zc-art-layout .resumen{ flex: .75 1 0; min-width: 0; }

/* Bloques */
.zc-bloque{ padding-right: 0; border-right: 0; }
.zc-bloque:not(:first-of-type){ padding-top: var(--eXL); }
.zc-bloque__title{ font-size: var(--f2XL); line-height: var(--lh2XL); font-weight: 300; margin: 0 0 var(--eL); color: var(--gO); }

/* Media (texto + figura) — columna en móvil */
.zc-bloque__media{ display: flex; flex-direction: column; gap: var(--eXL); align-items: flex-start; }
.zc-bloque__figura{ flex: 1 1 0; margin: 0; max-width: 300px; align-self: center; }
.zc-bloque__figura img{ width: 100%; height: auto; display: block; border-radius: var(--rP); }
.zc-bloque__figura figcaption{ margin-top: var(--eS); font-size: var(--fXS); line-height: var(--lhXS); text-align: center; color: var(--gM); }
.zc-bloque__col{ flex: 1.5 1 0; display: flex; flex-direction: column; gap: var(--eL); color: var(--g); min-width: 0; }
.zc-bloque__texto p{ margin: 0; padding-bottom: var(--eM); font-size: var(--fS); line-height: var(--lhS); }
.zc-bloque__texto p strong{ font-weight: 600; color: var(--gO); }

/* Lista bloque */
.zc-bloque__lista{ display: flex; flex-direction: column; gap: var(--eS); padding-left: var(--eL); margin: 0; }
.zc-bloque__lista li::marker{ color: var(--rC); }
.zc-bloque__lista .resaltar{ color: var(--gO); font-weight: 600; }

/* Resumen final */
.zc-resumen{ background: var(--gC2); margin-top: var(--eXL); padding: var(--eXL); border-radius: var(--rP) var(--rP) 0 0; }
.zc-resumen h2{ margin: 0; font-size: var(--f2XL); line-height: var(--lh2XL); border-bottom: 2px solid white; padding-bottom: var(--eS); }
.zc-resumen p:first-of-type{ margin-top: var(--eL); }
.zc-resumen p{ margin: 0; padding-bottom: var(--eL); font-size: var(--fS); line-height: var(--lhS); }
.zc-resumen p span{ font-weight: 700; color: var(--gO); }

/* Relacionados (aside) */
.zc-rel{ margin-top: var(--eL); border-top: 2px solid white; padding-top: var(--eL); }
.zc-rel h3{ margin: 0 0 var(--eL); font-weight: 600; }
.zc-rel__cta{ padding-top: var(--eXL); }
.zc-rel__footer{ margin: var(--eM) 0; padding-top: var(--eM); border-top: 1px solid rgba(0,0,0,.08); }
.zc-aside__footer{ margin-top: var(--eL); }

/* Cierre editorial */
.zc-art-cierre__acciones{ margin: var(--eL) 0; display: flex; justify-content: space-between; gap: var(--eM); flex-wrap: wrap; align-items: center; }
.zc-art-cierre__ico{ fill: var(--rC); width: 1em; height: 1em; transform: scale(.7); transform-origin: center; }
.zc-art-cierre__ico--izq{ transform: rotate(180deg) scale(.7); transform-origin: center; }

/* --- min-width: 741px (artículo: media en fila, meta absoluta) --- */
@media (min-width: 741px){
  body[data-pagina="zonaCata"] .principal{ padding: revert; }
  .zc-bloque__media{ flex-direction: row; }
  .zc-bloque__figura{ max-width: none; align-self: flex-start; }
  .zc-meta{
    position: absolute; left: 0; bottom: var(--eM);
    margin-top: 0; border-radius: 0 var(--rP) var(--rP) 0;
  }
}

/* --- min-width: 981px (artículo: layout 2 columnas, índice oculto) --- */
@media (min-width: 981px){
  .zc-art-layout{ flex-direction: row; }
  .zc-bloque{ padding-right: var(--eXL); border-right: 2px dotted var(--rC2); }
  .zc-indice-movil{ display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   CMS catálogo (F10.1)
   - .cms-editar-link  : botón contextual junto al breadcrumb (las 4 páginas
     del catálogo) y dentro del árbol del CMS.
   - .cms-catalogo, .cms-arbol, .cms-nodo : árbol jerárquico del CMS.
   - .cms-aviso : cajas de aviso (construcción / info / error).
   - .cms-buscar : buscador transversal del árbol.
   ════════════════════════════════════════════════════════════════════════ */

/* Botón "Editar" contextual (insertado en <nav class="ruta-producto">) */
.cms-editar-link{
  display: inline-flex;
  align-items: center;
  gap: var(--eXS);
  margin-left: auto;                /* empuja el botón a la derecha del flex container */
  padding: 4px 10px;
  border: 1px solid var(--rC2);
  border-radius: var(--rP);
  background: #fff;
  color: var(--cTexto);
  text-decoration: none;
  font-size: 0.85rem;
  line-height: 1.2;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.cms-editar-link:hover,
.cms-editar-link:focus{
  background: var(--cFondoSuave, #f4f4f4);
  border-color: var(--cAcento, #c00);
  color: var(--cAcento, #c00);
  text-decoration: none;
}
.cms-editar-link__icono{
  width: 14px; height: 14px;
  flex-shrink: 0;
}
.cms-editar-link__texto{
  font-weight: 600;
}
@media (max-width: 600px){
  .cms-editar-link__texto{ display: none; }   /* en móvil solo el icono */
  .cms-editar-link{ padding: 4px 8px; }
}

/* ── Layout general del CMS ─────────────────────────────────────────── */
.cms-catalogo{
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--eL) var(--eM);
}
.cms-catalogo__cabecera h1{
  margin-top: 0;
}
.cms-catalogo__subtitulo{
  color: var(--cTextoSec, #555);
  margin-top: calc(-1 * var(--eS));
}

/* ── Avisos (info / construcción / error) ───────────────────────────── */
.cms-aviso{
  padding: var(--eM);
  border-radius: var(--rM, 6px);
  border-left: 4px solid var(--cAcento, #c00);
  background: var(--cFondoSuave, #f8f8f8);
  margin: var(--eM) 0;
  line-height: 1.45;
}
.cms-aviso--info        { border-left-color: #2b78c2; background: #eaf3fb; }
.cms-aviso--construccion{ border-left-color: #d68a00; background: #fff6e0; }
.cms-aviso--error       { border-left-color: #c0392b; background: #fbeaea; }

/* ── Buscador del CMS ───────────────────────────────────────────────── */
.cms-catalogo__busqueda{
  display: flex;
  align-items: center;
  gap: var(--eS);
  margin: var(--eM) 0;
}
.cms-buscar__campo{
  flex: 1 1 auto;
  padding: 8px 12px;
  border: 1px solid var(--rC2);
  border-radius: var(--rP);
  font: inherit;
}
.cms-buscar__limpiar{
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--rC2);
  border-radius: var(--rP);
  cursor: pointer;
}
.cms-buscar__estado{
  color: var(--cTextoSec, #777);
  font-size: 0.9rem;
}

/* ── Árbol del catálogo ─────────────────────────────────────────────── */
.cms-arbol{
  list-style: none;
  padding: 0;
  margin: 0;
}
.cms-arbol .cms-arbol{
  margin-left: var(--eM);
  border-left: 1px dashed var(--rC2);
  padding-left: var(--eS);
}
.cms-arbol__vacio,
.cms-arbol__cargando,
.cms-arbol__error{
  padding: var(--eS) var(--eM);
  color: var(--cTextoSec, #777);
  font-style: italic;
}
.cms-arbol__error{ color: #c0392b; font-style: normal; }

.cms-nodo{
  padding: 2px 0;
}
.cms-nodo__fila{
  display: flex;
  align-items: center;
  gap: var(--eXS);
  padding: 4px 6px;
  border-radius: var(--rP);
  transition: background-color 100ms ease;
}
.cms-nodo__fila:hover{
  background: var(--cFondoSuave, #f4f4f4);
}

.cms-nodo__toggle{
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-size: 1.1rem;
  color: var(--cTextoSec, #888);
  flex-shrink: 0;
}
.cms-nodo__toggle[disabled]{
  cursor: default;
  visibility: hidden;
}
.cms-nodo__chevron{
  transition: transform 120ms ease;
  display: inline-block;
}
.cms-nodo[aria-expanded="true"] .cms-nodo__chevron,
.cms-nodo--abierto > .cms-nodo__fila .cms-nodo__chevron{
  transform: rotate(90deg);
}

.cms-nodo__icono{
  font-size: 1rem;
  flex-shrink: 0;
}
.cms-nodo__nombre{
  flex: 1 1 auto;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cms-nodo--familia    > .cms-nodo__fila .cms-nodo__nombre{ font-weight: 700; }
.cms-nodo--subfamilia > .cms-nodo__fila .cms-nodo__nombre{ font-weight: 600; }
.cms-nodo--articulo   > .cms-nodo__fila .cms-nodo__nombre{ font-weight: 400; }

.cms-nodo__contadores{
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--cTextoSec, #666);
}
.cms-nodo__contador{
  padding: 1px 6px;
  background: var(--cFondoSuave, #efefef);
  border-radius: 999px;
  white-space: nowrap;
}

.cms-nodo__editar{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #fff;
  border: 1px solid var(--rC2);
  border-radius: var(--rP);
  color: var(--cTexto);
  text-decoration: none;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.cms-nodo__editar:hover{
  background: var(--cFondoSuave, #f4f4f4);
  border-color: var(--cAcento, #c00);
  color: var(--cAcento, #c00);
}
@media (max-width: 700px){
  .cms-nodo__editar-texto{ display: none; }
  .cms-nodo__contadores{ display: none; }
}

/* ── Editor (stub F10.1) ────────────────────────────────────────────── */
.cms-catalogo-editar{
  max-width: 900px;
  margin: 0 auto;
  padding: var(--eL) var(--eM);
}
.cms-nodo-info{
  background: #fff;
  border: 1px solid var(--rC2);
  border-radius: var(--rM, 6px);
  padding: var(--eM) var(--eL);
  margin: var(--eM) 0;
}
.cms-nodo-info__lista{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px var(--eM);
  margin: var(--eS) 0 0;
}
.cms-nodo-info__lista dt{
  font-weight: 600;
  color: var(--cTexto);
}
.cms-nodo-info__lista dd{
  margin: 0;
  color: var(--cTextoSec, #444);
}
.cms-edit-hint{
  font-size: 0.75rem;
  color: #2b78c2;
  font-weight: normal;
}
.cms-derived-hint{
  font-size: 0.75rem;
  color: #d68a00;
  font-weight: normal;
  font-style: italic;
}
.cms-volver{
  margin-top: var(--eL);
}

/* ═════════════════════════════════════════════════════════════════════
   CMS catálogo F10.2 — Edición activa
   ═════════════════════════════════════════════════════════════════════ */

/* ── Cabecera del editor ─────────────────────────────────────────────── */
.cms-editar__cabecera{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--eL);
  flex-wrap: wrap;
  margin-bottom: var(--eM);
  padding-bottom: var(--eM);
  border-bottom: 1px solid var(--rC2);
}
.cms-editar__titulo h1{ margin: 0 0 4px 0; display: flex; align-items: center; gap: var(--eS); }
.cms-editar__id{ color: var(--cTextoSec, #666); font-size: 0.9rem; margin: 0; }
.cms-editar__id a{ color: inherit; text-decoration: underline; }
.cms-editar__acciones{ display: flex; gap: var(--eS); flex-shrink: 0; }
.cms-editar__tipo-badge{
  display: inline-block; padding: 2px 10px; border-radius: var(--rP);
  font-size: 0.8rem; font-weight: 600; color: #fff; text-transform: uppercase;
}
.cms-editar__tipo-badge--familia{    background: #2b78c2; }
.cms-editar__tipo-badge--subfamilia{ background: #4f9d4a; }
.cms-editar__tipo-badge--coleccion{  background: #b56a16; }
.cms-editar__tipo-badge--articulo{   background: #6b5cad; }

/* ── Tabs ───────────────────────────────────────────────────────────── */
.cms-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 2px solid var(--rC2);
  margin: var(--eM) 0;
}
.cms-tab{
  background: transparent; border: 0;
  padding: 10px 16px; cursor: pointer;
  color: var(--cTextoSec, #666); font: inherit; font-weight: 500;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 120ms ease, border-color 120ms ease;
}
.cms-tab:hover{ color: var(--cTexto); }
.cms-tab--activa{
  color: var(--cAcento, #c00);
  border-bottom-color: var(--cAcento, #c00);
}
.cms-tab-panel{ padding: var(--eM) 0; }

/* ── Formulario ──────────────────────────────────────────────────────── */
.cms-campo{
  margin-bottom: var(--eM);
}
.cms-campo label{
  display: block; font-weight: 600; margin-bottom: 4px;
  color: var(--cTexto);
}
.cms-campo input[type=text],
.cms-campo input[type=number],
.cms-campo input[type=search],
.cms-campo textarea{
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--rC2); border-radius: var(--rP);
  font: inherit;
  background: #fff;
}
.cms-campo input:focus,
.cms-campo textarea:focus{
  outline: none; border-color: var(--cAcento, #c00);
}
.cms-campo input[readonly],
.cms-campo textarea[readonly]{
  background: var(--cFondoSuave, #f5f5f5); color: #777;
}
.cms-campo small{
  display: block; color: var(--cTextoSec, #777); margin-top: 4px; font-size: 0.85rem;
}
.cms-campo-fila{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--eM);
}
@media (max-width: 600px){
  .cms-campo-fila{ grid-template-columns: 1fr; }
}
.cms-details{
  margin: var(--eM) 0;
  border: 1px dashed var(--rC2);
  border-radius: var(--rP);
  padding: var(--eS) var(--eM);
}
.cms-details summary{ cursor: pointer; font-weight: 600; padding: 4px 0; }
.cms-details[open] summary{ margin-bottom: var(--eS); }

.cms-form-acciones{
  display: flex; align-items: center; gap: var(--eM);
  margin-top: var(--eM); padding-top: var(--eM);
  border-top: 1px solid var(--rC2);
}
.cms-form-estado{
  font-size: 0.9rem; color: var(--cTextoSec, #666);
}
.cms-form-estado--ok{ color: #2e7d32; }
.cms-form-estado--err{ color: #c0392b; }

/* ── Picker (autocomplete IdArticuloDestacado) ───────────────────────── */
.cms-picker{
  position: relative;
}
.cms-picker input[type=search]{ width: 100%; padding-right: 36px; }
.cms-picker-limpiar{
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  background: transparent; border: 0; cursor: pointer; font-size: 1.4rem;
  color: var(--cTextoSec, #999);
}
.cms-picker-limpiar:hover{ color: var(--cAcento, #c00); }
.cms-picker-resultados{
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  margin: 4px 0 0; padding: 0;
  list-style: none; background: #fff;
  border: 1px solid var(--rC2); border-radius: var(--rP);
  max-height: 280px; overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.cms-picker-resultados li{
  padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid var(--cFondoSuave, #f0f0f0);
}
.cms-picker-resultados li:last-child{ border-bottom: 0; }
.cms-picker-resultados li:hover{ background: var(--cFondoSuave, #f4f4f4); }
.cms-picker__tipo{
  display: inline-block; padding: 1px 6px; font-size: 0.7rem; font-weight: 600;
  background: var(--cFondoSuave, #eee); border-radius: 3px; margin-right: 6px;
  text-transform: uppercase; color: var(--cTextoSec, #666);
}
.cms-picker-vacio{ color: var(--cTextoSec, #999); font-style: italic; cursor: default; }
.cms-picker-vacio:hover{ background: transparent; }

/* ── Tablas (catálogos, auditoría) ───────────────────────────────────── */
.cms-tabla{
  width: 100%;
  border-collapse: collapse;
  margin: var(--eM) 0;
  font-size: 0.9rem;
}
.cms-tabla th, .cms-tabla td{
  padding: 8px 12px; text-align: left;
  border-bottom: 1px solid var(--rC2);
}
.cms-tabla th{
  background: var(--cFondoSuave, #f5f5f5);
  font-weight: 600;
}
.cms-tabla pre{
  white-space: pre-wrap; word-break: break-word;
  margin: 0; font-size: 0.8rem; background: #f9f9f9;
  padding: 6px; border-radius: 3px;
}
.cms-vacio{ color: var(--cTextoSec, #999); font-style: italic; }

/* ── Lista de hijos (con drag-and-drop) ──────────────────────────────── */
.cms-hijos-lista{
  list-style: none; padding: 0; margin: var(--eS) 0;
}
.cms-hijo{
  display: flex; align-items: center; gap: var(--eS);
  padding: 8px 10px; margin-bottom: 4px;
  background: #fff; border: 1px solid var(--rC2); border-radius: var(--rP);
  transition: background-color 100ms ease;
}
.cms-hijo:hover{ background: var(--cFondoSuave, #f8f8f8); }
.cms-hijo__handle{
  cursor: grab; color: var(--cTextoSec, #999); font-size: 1.2rem; user-select: none;
  flex-shrink: 0;
}
.cms-hijo__orden{
  display: inline-block; min-width: 32px; padding: 2px 6px;
  background: var(--cFondoSuave, #eee); border-radius: 3px;
  font-size: 0.8rem; color: var(--cTextoSec, #666); text-align: center;
}
.cms-hijo__nombre{ flex: 1 1 auto; font-weight: 500; }
.cms-hijo__badge{
  display: inline-block; padding: 1px 8px; font-size: 0.75rem; font-weight: 600;
  background: #fee; color: #c0392b; border-radius: 999px;
}
.cms-hijo__editar{
  padding: 4px 10px; background: #fff; border: 1px solid var(--rC2);
  border-radius: var(--rP); text-decoration: none; color: var(--cTexto); font-size: 0.85rem;
}
.cms-hijo__editar:hover{ border-color: var(--cAcento, #c00); color: var(--cAcento, #c00); }
.cms-hijo--baja{ opacity: 0.5; }

/* ── Badges del árbol (en tienda / baja) ─────────────────────────────── */
.cms-nodo__badges{
  display: inline-flex; gap: 4px; flex-shrink: 0;
}
.cms-badge{
  display: inline-block; padding: 1px 8px; font-size: 0.7rem; font-weight: 700;
  border-radius: 999px; text-transform: uppercase; letter-spacing: 0.02em;
}
.cms-badge--tienda{ background: #e0f5ea; color: #2e7d32; }
.cms-badge--baja{   background: #fee;    color: #c0392b; }
.cms-nodo--baja > .cms-nodo__fila .cms-nodo__nombre{
  text-decoration: line-through; color: var(--cTextoSec, #888);
}

/* ── Ghost durante drag ──────────────────────────────────────────────── */
.cms-nodo--ghost{
  opacity: 0.4; background: var(--cFondoSuave, #eee);
}

/* ── Acciones globales (botón + Nueva familia) ───────────────────────── */
.cms-catalogo__acciones-globales{
  display: flex; align-items: center; gap: var(--eM);
  margin: var(--eM) 0;
}

/* ═════════════════════════════════════════════════════════════════════
   CMS catálogo F10.3 — Edición de artículos y referencias
   ═════════════════════════════════════════════════════════════════════ */

/* Select base (para .cms-campo select) */
.cms-campo select{
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--rC2); border-radius: var(--rP);
  font: inherit; background: #fff;
}

/* Bloque de datos derivados (calculados por SP cada 4h) */
.cms-details--derivados{
  background: #fff8e8;
  border: 1px dashed #d68a00;
}
.cms-details--derivados summary{
  color: #8a5800;
}
.cms-derivados-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px var(--eM);
  font-size: 0.9rem;
  padding: var(--eS) 0;
}
@media (max-width: 700px){
  .cms-derivados-grid{ grid-template-columns: 1fr; }
}
.cms-details--derivados code{
  background: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.85em;
}

/* Tabla de referencias del artículo */
.cms-refs-tabla{
  font-size: 0.88rem;
}
.cms-refs-tabla code{
  font-size: 0.9em;
  background: var(--cFondoSuave, #f5f5f5);
  padding: 1px 4px;
  border-radius: 3px;
}
.cms-ref-tipo{
  display: inline-block; padding: 2px 8px;
  border-radius: 999px; font-size: 0.75rem; font-weight: 600;
  background: var(--cFondoSuave, #eee); color: var(--cTextoSec, #555);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.cms-ref-tipo--9   { background: #e0f5ea; color: #2e7d32; }   /* Ref venta */
.cms-ref-tipo--100 { background: #e3eafc; color: #2b56a8; }   /* Foto big */
.cms-ref-tipo--150 { background: #fbe7d0; color: #a35400; }   /* Foto pieza */
.cms-ref-tipo--200 { background: #f3e2fb; color: #6a3692; }   /* Tipo 200 */
.cms-ref--obsoleta td{ opacity: 0.55; }
.cms-ref--obsoleta td:last-child{ opacity: 1; }

/* ── F10.3.2: edición inline de refs + drag-and-drop ─────────────────── */
.cms-refs__nueva{
  display: flex; align-items: center; gap: var(--eS);
  flex-wrap: wrap;
  background: var(--cFondoSuave, #f5f5f5);
  padding: var(--eS) var(--eM);
  border-radius: var(--rP);
  margin: var(--eS) 0 var(--eM);
}
.cms-refs__nueva label{
  display: flex; align-items: center; gap: 6px;
  font-size: 0.9rem; font-weight: 500;
}
.cms-refs__nueva select,
.cms-refs__nueva input{
  padding: 4px 8px; font: inherit;
  border: 1px solid var(--rC2); border-radius: var(--rP);
  background: #fff;
}

.cms-refs-grupo{
  margin: var(--eM) 0 var(--eL);
  border: 1px solid var(--rC2);
  border-radius: var(--rM, 6px);
  padding: var(--eS) var(--eM);
  background: #fafafa;
}
.cms-refs-grupo__titulo{
  display: flex; align-items: center; gap: var(--eS);
  margin: var(--eXS) 0 var(--eS);
  font-size: 1.05rem;
}
.cms-refs-grupo__titulo small{ color: var(--cTextoSec, #888); font-weight: 400; }
.cms-refs-grupo__estado{ font-size: 0.85rem; margin-left: var(--eS); }

.cms-refs-lista{
  list-style: none; padding: 0; margin: 0;
}
.cms-ref{
  background: #fff;
  border: 1px solid var(--rC2);
  border-radius: var(--rP);
  margin-bottom: 6px;
  padding: 8px 12px;
  transition: background-color 100ms ease, opacity 100ms ease;
}
.cms-ref:hover{ background: #fcfcfc; }
.cms-ref--obsoleta{ opacity: 0.55; background: #fbfbfb; }
.cms-ref--obsoleta:hover{ opacity: 0.85; }
.cms-ref--ghost{ opacity: 0.4; background: var(--cFondoSuave, #eee); }

.cms-ref__head{
  display: flex; align-items: center; gap: var(--eS);
  flex-wrap: wrap;
}
.cms-ref__handle{
  cursor: grab; color: var(--cTextoSec, #999); font-size: 1.2rem; user-select: none;
  flex-shrink: 0;
}
.cms-ref__orden{
  display: inline-block; min-width: 36px; padding: 2px 8px;
  background: var(--cFondoSuave, #eee); border-radius: 3px;
  font-size: 0.85rem; color: var(--cTextoSec, #555); text-align: center;
  font-weight: 600;
}
.cms-ref__codigo{
  background: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.9em;
  border: 1px solid var(--rC2);
}
.cms-ref__stock{
  font-size: 0.85rem;
  color: var(--cTextoSec, #666);
  margin-left: auto;     /* empuja a la derecha cuando hay acciones */
}
.cms-ref__acciones{
  display: flex; align-items: center; gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.cms-ref__acciones .apariencia-boton{
  padding: 3px 10px; font-size: 0.85rem;
}
.cms-ref-estado{ font-size: 0.8rem; min-width: 70px; }

.cms-ref__campos{
  display: flex; flex-wrap: wrap; gap: var(--eM);
  padding: var(--eXS) 0 0;
  margin-top: var(--eXS);
  border-top: 1px dashed var(--cFondoSuave, #eee);
}
.cms-ref__campos > label{
  display: flex; align-items: center; gap: 6px;
  font-size: 0.9rem;
  flex: 1 1 auto;
  min-width: 220px;
}
.cms-ref__campos > label > span{
  font-weight: 500; color: var(--cTextoSec, #555); min-width: 80px;
}
.cms-ref-input{
  flex: 1 1 auto;
  padding: 4px 8px;
  border: 1px solid var(--rC2); border-radius: var(--rP);
  font: inherit; background: #fff;
}
.cms-ref-input:focus{ outline: none; border-color: var(--cAcento, #c00); }
.cms-ref__descripciones{
  width: 100%;
  background: var(--cFondoSuave, #f8f8f8);
  padding: 6px var(--eS);
  border-radius: 3px;
}
.cms-ref__descripciones summary{ cursor: pointer; font-weight: 600; font-size: 0.85rem; }
.cms-ref__descripciones[open] summary{ margin-bottom: var(--eXS); }
.cms-ref__descripciones > label{
  display: flex; align-items: center; gap: 6px;
  font-size: 0.85rem;
  margin-bottom: 4px;
}
.cms-ref__descripciones > label > span{ min-width: 100px; }

/* ── F10.3.2 v2: secciones lógicas del tab Refs ─────────────────────── */
.cms-refs-seccion{
  margin: var(--eL) 0;
  padding: var(--eM);
  background: #fff;
  border: 1px solid var(--rC2);
  border-radius: var(--rM, 6px);
}
.cms-refs-seccion__head{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--eM); flex-wrap: wrap;
  margin: 0 0 var(--eS);
}
.cms-refs-seccion__head h3{ margin: 0; font-size: 1.1rem; }
.cms-refs-seccion__acciones{
  display: flex; align-items: center; gap: var(--eS); flex-wrap: wrap;
}
.cms-refs-seccion__acciones--inline{
  margin-top: var(--eS);
  padding: var(--eS); background: var(--cFondoSuave, #fafafa);
  border-radius: var(--rP);
}
.cms-refs-seccion--media       { border-left: 4px solid #2b78c2; }
.cms-refs-seccion--descripcion { border-left: 4px solid #6b5cad; }
.cms-refs-seccion--tabla       { border-left: 4px solid #4f9d4a; }
.cms-refs-seccion--documentos  { border-left: 4px solid #b56a16; }
.cms-refs-seccion--huerfanos   { border-left: 4px solid #c0392b; background: #fef6f5; }

/* Cabecera de columnas (Tipo 7) */
.cms-ref--cabecera{
  background: #fff9e6;
  border: 1px solid #d68a00;
}
.cms-cabecera-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);   /* Tipo 7: Referencia + Atributo 1-6 */
  gap: var(--eS);
}
@media (max-width: 1200px){
  .cms-cabecera-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px){
  .cms-cabecera-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Atributos activos (pieza) y Atributos de ref (Tipo 9): 6 cols ancha → 3+3 → 2+2+2 */
.cms-atributos-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--eS);
  margin-top: var(--eS);
}
@media (max-width: 1100px){
  .cms-atributos-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px){
  .cms-atributos-grid{ grid-template-columns: repeat(2, 1fr); }
}
.cms-atributos-grid label{
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.85rem;
  padding: 4px 6px; border-radius: 3px;
  min-width: 0;
}
.cms-atributos-grid label > span{ font-weight: 500; font-size: 0.8rem; }
.cms-atributos-grid label.col-activa  { background: #eafbea; }
.cms-atributos-grid label.col-inactiva{ background: #fafafa; color: #999; }

/* Sortable de columnas atributos (Tipo 7) */
.cms-attr-titulo{
  display: flex; align-items: center; gap: 4px;
  font-weight: 500; font-size: 0.8rem;
}
.cms-attr-handle{
  cursor: grab; color: var(--cTextoSec, #999); font-size: 1rem;
  user-select: none; line-height: 1;
}
.cms-attr-handle:active{ cursor: grabbing; }
.cms-attr--ghost{ opacity: 0.4; background: #ffeb99 !important; }
.cms-atributos-hint{
  margin: var(--eS) 0 0;
  color: var(--cTextoSec, #666);
}
.cms-atributos-grid label input{
  width: 100%; min-width: 0;
  padding: 4px 8px;
  border: 1px solid var(--rC2); border-radius: var(--rP);
  font: inherit; background: #fff;
}
.cms-cabecera-grid label{
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.85rem;
  padding: 4px 6px; border-radius: 3px;
}
.cms-cabecera-grid label.col-activa  { background: #eafbea; }
.cms-cabecera-grid label.col-inactiva{ background: #fafafa; color: #999; }
.cms-cabecera-grid label > span{ font-weight: 500; }

/* Piezas (Tipo 150) — card que agrupa pieza + sus Tipo 9 + Tipo 3 */
.cms-piezas-lista{ list-style: none; padding: 0; margin: 0; }
.cms-pieza{
  margin-bottom: var(--eL);
  padding: var(--eS) var(--eM);
  background: #f8faf8;
  border: 2px solid #4f9d4a;
  border-radius: var(--rM, 6px);
}
.cms-pieza--obsoleta{
  opacity: 0.65;
  border-color: var(--rC2);
  background: #fafafa;
}
.cms-pieza__head{
  display: flex; align-items: center; gap: var(--eS);
  margin-bottom: var(--eS);
}
.cms-pieza__columnas{
  margin: var(--eS) 0;
  padding: var(--eS) var(--eM);
  background: #fff; border: 1px dashed var(--rC2); border-radius: var(--rP);
}
.cms-pieza__columnas summary{ font-weight: 600; cursor: pointer; }
.cms-pieza__refs9{
  margin: var(--eS) 0;
  padding: var(--eS) var(--eM);
  background: #fff; border-radius: var(--rP);
}
.cms-pieza__refs9 h4{ margin: 0 0 var(--eS); font-size: 0.95rem; color: #4f9d4a; }
.cms-pieza__atributos{
  margin: var(--eS) 0;
  padding: var(--eS) var(--eM);
  background: #fdf4ff; border-radius: var(--rP);
}
.cms-pieza__atributos h4{ margin: 0 0 var(--eS); font-size: 0.95rem; color: #6a3692; }

/* Variantes de fila .cms-ref */
.cms-ref--pieza{ background: #fff; }
.cms-ref--ref9{}
.cms-ref--atributo{ background: #fdf4ff; }
.cms-ref--legacy{
  opacity: 0.65; background: #f5f5f5;
}
.cms-ref--legacy .cms-ref__label{ font-style: italic; color: #666; }
.cms-ref__badge-legacy{
  display: inline-block; padding: 1px 8px;
  background: #777; color: #fff;
  font-size: 0.7rem; font-weight: 700; border-radius: 999px; text-transform: uppercase;
}
.cms-ref--huerfana{
  border-color: #c0392b;
  background: #fef0ee;
}

/* (Antes había .cms-ref9__campos — reemplazado por .cms-atributos-grid en v3) */

/* Input dentro de la cabecera de columnas — alturas iguales */
.cms-codigo-nuevo-tipo9{
  padding: 4px 8px;
  border: 1px solid var(--rC2); border-radius: var(--rP);
  font: inherit; background: #fff;
}

/* ════════════════════════════════════════════════════════════════════
   F10.3.2 v3 — iconos SVG, miniaturas, descripción larga, layouts
   ════════════════════════════════════════════════════════════════════ */

/* Iconos SVG inline */
.cms-ico{
  width: 16px; height: 16px;
  vertical-align: middle;
  fill: currentColor;
}
.cms-ico-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--rC2);
  border-radius: var(--rP);
  color: var(--cTexto);
  cursor: pointer;
  transition: background-color 100ms ease, color 100ms ease, border-color 100ms ease;
}
.cms-ico-btn:hover{
  background: var(--cFondoSuave, #f4f4f4);
  border-color: var(--cAcento, #c00);
  color: var(--cAcento, #c00);
}
.cms-ref-guardar.cms-ico-btn:hover{
  background: #e0f5ea; border-color: #2e7d32; color: #2e7d32;
}

/* Botones secundarios con icono SVG: padding consistente */
.btn-crear-ref .cms-ico{ margin-right: 4px; }

/* ── Miniaturas (Tipo 100 / 400 / 150) ──────────────────────────────── */
.cms-ref__thumb{
  display: block;
  border-radius: 4px;
  background: #fafafa;
  border: 1px solid var(--rC2);
  flex-shrink: 0;
}
.cms-ref__thumb--media{
  width: 160px; height: 120px;
  object-fit: cover;
}
.cms-ref__thumb--pieza{
  width: 120px; height: 120px;
  object-fit: contain;
  background: #fff;
}
.cms-ref__thumb--vacia{
  display: flex; align-items: center; justify-content: center;
  color: #ccc; font-size: 2rem;
}

/* Layout horizontal: thumb a la izquierda + campos a la derecha */
.cms-ref--media,
.cms-ref--pieza{
  display: flex;
  align-items: flex-start;
  gap: var(--eM);
}
.cms-ref__media-thumb,
.cms-ref__pieza-thumb{
  display: flex; align-items: center; gap: var(--eS);
  flex-shrink: 0;
}
.cms-ref__pieza-thumb{ cursor: grab; }
.cms-ref__pieza-thumb:active{ cursor: grabbing; }
.cms-pieza--ghost{ opacity: 0.35; background: #f0f4f0; }
.cms-ref__media-thumb .cms-ref__handle,
.cms-ref__pieza-thumb .cms-ref__handle{
  cursor: grab; color: var(--cTextoSec, #999); font-size: 1.3rem;
}
.cms-ref--media .cms-ref__campos,
.cms-ref--pieza .cms-ref__campos{
  flex: 1 1 auto; min-width: 0;
}

/* Fila con badges + iconos a la derecha */
.cms-ref__cabeza-fila{
  display: flex; align-items: center; gap: var(--eS);
  justify-content: flex-end;
  margin-bottom: 4px;
}

/* Descripción larga (textarea único) */
.cms-descripcion-wrap{
  background: #fff;
  border: 1px solid var(--rC2);
  border-radius: var(--rP);
  padding: var(--eS) var(--eM);
}
.cms-descripcion-textarea{
  width: 100%;
  min-height: 120px;
  padding: 8px 12px;
  border: 1px solid var(--rC2);
  border-radius: var(--rP);
  font: inherit;
  background: #fff;
  resize: vertical;
}

/* Explicación de atributos (Tipo 3) dentro de la cabecera — details colapsable */
.cms-explicacion-atributos{
  margin-top: var(--eM);
  padding: var(--eXS) var(--eM);
  background: #fdf4ff;
  border-radius: var(--rP);
  border: 1px dashed #c9a8df;
}
.cms-explicacion-atributos > summary{
  cursor: pointer;
  font-weight: 600;
  color: #6a3692;
  font-size: 0.95rem;
  padding: var(--eXS) 0;
  list-style: revert;
}
.cms-explicacion-atributos[open] > summary{ margin-bottom: var(--eS); }

/* Fila editable: input ocupa ancho hasta los botones */
.cms-ref--atributo-explicacion{
  display: flex; align-items: center; gap: var(--eS);
  padding: var(--eS);
  background: #fff;
  border: 1px solid var(--rC2);
  border-radius: var(--rP);
}
.cms-ref--atributo-explicacion .cms-explicacion-input{
  flex: 1 1 auto;
  padding: 6px 10px;
  border: 1px solid var(--rC2); border-radius: var(--rP);
  font: inherit; background: #fff;
  min-width: 0;
}
.cms-ref--atributo-explicacion .cms-ref__acciones{
  flex-shrink: 0;
}
.cms-ref--atributo-explicacion.cms-ref--obsoleta{
  opacity: 0.55;
}

/* Campos inline en la cabeza de ref Tipo 9 (Ref. + Plazo) */
.cms-ref__inline-campo{
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.85rem;
  margin: 0 var(--eS) 0 0;
  flex: 0 1 auto;
}
.cms-ref__inline-campo > span{ font-weight: 500; }
.cms-ref__inline-campo input{
  padding: 3px 6px;
  border: 1px solid var(--rC2); border-radius: var(--rP);
  font: inherit;
}
.cms-ref__inline-ref input{ width: 140px; }
.cms-ref__plazo input{ width: 70px; }

/* Pieza: ahora "Atributos activos" es hermano del bloque flex pieza+thumb,
   debe ocupar el ancho completo dentro del <li class="cms-pieza"> */
.cms-pieza > .cms-pieza__columnas{
  margin-top: var(--eS);
  width: 100%;
  box-sizing: border-box;
}

/* Campo que ocupa ancho completo dentro de cms-ref__campos */
.cms-ref__campo-pleno{
  width: 100%;
}

/* Section piezas */
.cms-refs-seccion--piezas{ border-left: 4px solid #4f9d4a; }

/* Detalle legacy desplegable */
.cms-details--legacy{
  margin-top: var(--eM);
  background: #f5f5f5;
  border: 1px dashed #999;
}
.cms-details--legacy summary{ color: #666; }