/* ==========================================================================
   logic/tienda/tienda.css — Estilos de la Tienda online de la intranet
   Convive con estilos_1.css (global de la intranet): todo va con prefijo
   .tnd- para no interferir con el resto de páginas.
   ========================================================================== */

:root {
  --tnd-rojo: #8e1f30;
  --tnd-rojo-osc: #61141f;
  --tnd-enlace: #B13837;
  --tnd-borde: #d9d9d9;
  --tnd-gris: #f3f5f6;
  --tnd-gris-texto: #666;
  --tnd-verde: #1e7d32;
  --tnd-verde-fondo: #e3f4e5;
  --tnd-ambar: #9a6700;
  --tnd-ambar-fondo: #fff3d0;
  --tnd-azul: #1565C0;
  --tnd-azul-fondo: #e3f2fd;
  --tnd-radio: 8px;
  --tnd-sombra: 0 1px 4px rgba(0, 0, 0, .12);
}

.tnd-main {
  padding: 0 1em 2em;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* Neutralizar el button global de estilos_1.css (width: calc(100% - 10px),
   margin: 5px, fondo rojo, bold y :hover rojo). Mismo nivel de especificidad
   que las clases tnd-* y colocado al principio, para que las reglas
   específicas de más abajo (ancho del stepper, fondo de .tnd-boton, hovers)
   sigan mandando. */
.tnd-boton,
.tnd-chip-var,
.tnd-stepper__btn,
.tnd-galeria__flecha,
.tnd-galeria__thumb {
  width: auto;
  margin: 0;
  font-weight: normal;
}
/* button:hover global (0-1-1) pinta fondo rojo: lo pisan estos (0-2-0+) */
.tnd-chip-var:hover { background: #fff; }
.tnd-chip-var.is-stock:hover { background: var(--tnd-verde-fondo); }
.tnd-galeria__thumb:hover { background: #fff; }
.tnd-galeria__flecha:hover { background: rgba(255, 255, 255, .92); }

/* ── Migas ───────────────────────────────────────────────────────────── */
.tnd-migas {
  font-size: .9em;
  margin: 0 0 1em;
  color: var(--tnd-gris-texto);
}
.tnd-migas__sep { margin: 0 .4em; }

/* ── Avisos y selector de clientes ───────────────────────────────────── */
.tnd-aviso {
  background: var(--tnd-ambar-fondo);
  border: 1px solid #e6c25a;
  color: #5a4500;
  border-radius: var(--tnd-radio);
  padding: .7em 1em;
  margin: 0 0 1em;
}
.tnd-aviso--rojo {
  background: #fdecea;
  border-color: #f5b3ae;
  color: #8a1c12;
}
/* ── Cabeceras de sección ────────────────────────────────────────────── */
.tnd-portada-cab h1, .tnd-listado-cab h1 {
  margin: 0 0 .2em;
  font-size: 1.7em;
  color: var(--tnd-rojo);
}
.tnd-portada-cab p, .tnd-listado-desc { margin: 0 0 1em; color: var(--tnd-gris-texto); }
.tnd-seccion { margin: 1.6em 0; }
.tnd-seccion__titulo {
  font-size: 1.25em;
  margin: 0 0 .7em;
  padding: 0;
  border-bottom: 2px solid var(--tnd-rojo);
  display: inline-block;
}
.tnd-seccion__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
  margin-bottom: .7em;
}
.tnd-seccion__cab .tnd-seccion__titulo { margin: 0; }

/* Toggle Fichas/Listado */
.tnd-toggle-vista {
  display: inline-flex;
  border: 1px solid var(--tnd-borde);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.tnd-toggle-vista a {
  padding: .3em 1em;
  font-size: .85em;
  font-weight: normal;
  color: var(--tnd-gris-texto) !important;
  white-space: nowrap;
}
.tnd-toggle-vista a + a { border-left: 1px solid var(--tnd-borde); }
.tnd-toggle-vista a:hover { background: var(--tnd-gris); }
.tnd-toggle-vista a.is-activa {
  background: var(--tnd-rojo);
  color: #fff !important;
  font-weight: bold;
}

/* Compra habitual: vista listado */
.tnd-hab-lista { display: grid; gap: .5em; }
.tnd-hab-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  gap: .4em .9em;
  align-items: center;
  background: #fff;
  border: 1px solid var(--tnd-borde);
  border-radius: var(--tnd-radio);
  padding: .5em .8em;
}
.tnd-hab-item__foto {
  display: block;
  width: 56px;
  height: 56px;
  border: 1px solid var(--tnd-gris);
  border-radius: 6px;
  background: #fff center / cover no-repeat;
}
.tnd-hab-item__desc { color: #222 !important; display: block; line-height: 1.3; }
.tnd-hab-item__desc:hover { color: var(--tnd-rojo) !important; }
.tnd-hab-item__cod { display: block; font-size: .8em; color: var(--tnd-gris-texto); font-weight: normal; }
.tnd-hab-item__meta {
  display: flex;
  flex-direction: column;
  gap: .15em;
  font-size: .82em;
  color: var(--tnd-gris-texto);
  text-align: right;
  white-space: nowrap;
}
.tnd-hab-item__compra {
  display: flex;
  align-items: center;
  gap: .6em;
  justify-content: flex-end;
}
.tnd-hab-item__compra form.cart {
  display: inline-flex;
  align-items: center;
  gap: .4em;
}
.tnd-hab-item__precio { font-weight: bold; color: var(--tnd-rojo); white-space: nowrap; }
.tnd-qty {
  width: 4.4em;
  padding: .35em .4em;
  border: 1px solid var(--tnd-borde);
  border-radius: 6px;
  text-align: right;
}
@media (max-width: 760px) {
  .tnd-hab-item { grid-template-columns: 56px minmax(0, 1fr); }
  .tnd-hab-item__meta {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .2em .9em;
    text-align: left;
  }
  .tnd-hab-item__compra { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ── Grid de familias (portada) ──────────────────────────────────────── */
.tnd-grid-familias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 46%), 1fr));
  gap: .9em;
}
.tnd-fam-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tnd-borde);
  border-radius: var(--tnd-radio);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--tnd-sombra);
  transition: transform .12s ease, box-shadow .12s ease;
  font-weight: normal !important;
  color: #000 !important;
}
.tnd-fam-card:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
.tnd-fam-card__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.15em 0 .35em;
  color: var(--tnd-rojo);
}
.tnd-fam-card__icono .icono {
  width: 3.2rem;
  height: 3.2rem;
  fill: currentColor;
  transition: transform .12s ease;
}
.tnd-fam-card:hover .tnd-fam-card__icono .icono { transform: scale(1.08); }
.tnd-fam-card__nombre { padding: .55em .7em 0; font-weight: bold; color: var(--tnd-rojo); }
.tnd-fam-card__num { padding: 0 .7em .6em; font-size: .82em; color: var(--tnd-gris-texto); }

/* ── Cards de producto ───────────────────────────────────────────────── */
.tnd-grid {
  display: grid;
  /* min(210px, 46%): garantiza al menos 2 columnas por estrecho que sea el
     viewport (zoom alto, móvil). La primera línea es el fallback sin min(). */
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 46%), 1fr));
  gap: 1em;
}
.tnd-carril { overflow-x: auto; padding-bottom: .5em; -webkit-overflow-scrolling: touch; }
.tnd-grid--carril {
  display: flex;
  gap: 1em;
}
.tnd-grid--carril .tnd-card { flex: 0 0 220px; }

.tnd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tnd-borde);
  border-radius: var(--tnd-radio);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--tnd-sombra);
}
.tnd-card__img {
  display: block;
  padding-top: 100%; /* cuadrada sin depender de aspect-ratio */
  background: #fff center / contain no-repeat;
  border-bottom: 1px solid var(--tnd-gris);
}
.tnd-card__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: .6em .75em .7em;
  gap: .25em;
}
.tnd-card__titulo { margin: 0; font-size: 1em; line-height: 1.3; }
.tnd-card__titulo a { color: #222 !important; }
.tnd-card__titulo a:hover { color: var(--tnd-rojo) !important; }
.tnd-card__ruta { margin: 0; font-size: .78em; color: var(--tnd-gris-texto); }
.tnd-card__ruta a { font-weight: normal; color: var(--tnd-gris-texto) !important; }
.tnd-card__ruta a:hover { color: var(--tnd-rojo) !important; }
.tnd-card__marca { margin: 0; font-size: .8em; color: var(--tnd-gris-texto); }
.tnd-card__pie {
  margin-top: auto;
  padding-top: .4em;
  display: flex;
  align-items: baseline;
  gap: .4em;
  flex-wrap: wrap;
}
.tnd-card__desde { font-size: .8em; color: var(--tnd-gris-texto); }
.tnd-card__extra {
  margin: .3em 0 0;
  font-size: .76em;
  color: var(--tnd-gris-texto);
  border-top: 1px dotted var(--tnd-borde);
  padding-top: .3em;
}
.tnd-card__refs { font-size: .75em; color: var(--tnd-gris-texto); margin-left: auto; }
.tnd-importe { font-size: 1.15em; font-weight: bold; color: var(--tnd-rojo); white-space: nowrap; }
.tnd-consultar { font-size: .9em; color: var(--tnd-gris-texto); font-style: italic; }

.tnd-badge {
  position: absolute;
  top: .55em;
  right: .55em;
  z-index: 1;
  font-size: .72em;
  font-weight: bold;
  padding: .2em .55em;
  border-radius: 999px;
  color: #fff;
}
/* Novedad/Outlet a la izquierda y entrega a la derecha (convención de las
   cards de la web pública). */
.tnd-badge--novedad { background: var(--tnd-azul); right: auto; left: .55em; }
.tnd-badge--outlet { background: #e65100; right: auto; left: .55em; }
.tnd-badge--stock { background: #85a59F; font-weight: normal; }

/* Toolbar de listados/portada: contador + conmutador "Solo en stock" */
.tnd-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
  margin: 0 0 1em;
}
.tnd-toolbar .tnd-contador, .tnd-toolbar p { margin: 0; }
.tnd-toolbar .filtro-stock { margin: 0; }
.tnd-toolbar--portada { justify-content: flex-start; margin: 0; }
.tnd-contador__stock { color: var(--tnd-verde); font-weight: bold; }

/* ── Barra de filtros/ordenación (port de la web pública) ─────────────────
   Chips <details> con opciones-ENLACE (server-side, sin AJAX). Los enlaces
   neutralizan el a,a:visited global rojo/negrita de estilos_1.css. */
.contenedor-filtros-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em;
  margin: 0 0 1em;
}
.filtros-chips { display: flex; flex-wrap: wrap; gap: .5em; }
.filtro-chip-wrap { position: relative; }
details.filtro-chip { position: relative; }
details.filtro-chip[open] { z-index: 30; }
.filtro-chip-resumen {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  padding: .38em .85em;
  border: 1px solid var(--tnd-borde);
  border-radius: 999px;
  background: #fff;
  user-select: none;
  white-space: nowrap;
}
.filtro-chip-resumen::-webkit-details-marker { display: none; }
details.filtro-chip[open] > .filtro-chip-resumen {
  background: var(--tnd-gris);
  border-color: var(--tnd-rojo);
}
.filtro-chip-etiqueta { color: var(--tnd-gris-texto); font-size: .82em; }
.filtro-chip-estado { font-weight: bold; font-size: .92em; }
.filtro-chip--activo > .filtro-chip-resumen { border-color: var(--tnd-rojo); }
.filtro-chip--activo .filtro-chip-estado, .filtro-chip-estado--activo { color: var(--tnd-rojo); }
.filtro-chip-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-width: 320px;
  background: #fff;
  border: 1px solid var(--tnd-borde);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
  padding: .45em;
  z-index: 31;
}
.filtro-orden-wrapper { margin-left: auto; }
.filtro-orden-wrapper .filtro-chip-panel { left: auto; right: 0; }
.filtros__panel-opciones {
  max-height: 260px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
a.filtro-opcion, a.filtro-opcion:visited {
  display: flex;
  align-items: center;
  gap: .55em;
  padding: .42em .5em;
  border-radius: 6px;
  color: var(--tnd-texto, #333);
  font-weight: normal;
  text-decoration: none;
}
a.filtro-opcion:hover { background: var(--tnd-gris); color: inherit; }
.filtro-opcion__marca {
  width: .95em;
  height: .95em;
  border: 1px solid var(--tnd-borde);
  border-radius: 50%;
  flex: 0 0 auto;
}
.filtro-opcion--check .filtro-opcion__marca { border-radius: 4px; }
.filtro-opcion--sel .filtro-opcion__marca {
  border-color: var(--tnd-rojo);
  background: radial-gradient(circle at center, var(--tnd-rojo) 46%, transparent 54%);
}
.filtro-opcion--check.filtro-opcion--sel .filtro-opcion__marca {
  background: var(--tnd-rojo);
}
.filtro-opcion--sel .filtro-opcion__etiqueta { font-weight: bold; color: var(--tnd-rojo); }
a.filtros-reset, a.filtros-reset:visited {
  padding: .38em .85em;
  border: 1px solid var(--tnd-borde);
  border-radius: 999px;
  background: #fff;
  color: var(--tnd-gris-texto);
  font-size: .88em;
  font-weight: normal;
  text-decoration: none;
  white-space: nowrap;
}
a.filtros-reset:hover { border-color: var(--tnd-rojo); color: var(--tnd-rojo); }
.filtros-activos { display: flex; flex-wrap: wrap; gap: .4em; width: 100%; }
a.filtro-activo-chip, a.filtro-activo-chip:visited {
  font-size: .78em;
  padding: .25em .6em;
  border-radius: 999px;
  background: var(--tnd-gris);
  color: var(--tnd-texto, #333);
  font-weight: normal;
  text-decoration: none;
}
a.filtro-activo-chip:hover { background: var(--tnd-borde); }

/* ── Familia hero (port de main.css; los tokens de espaciado, tipografía y
      color vienen de estilo_cabecera.css, cargado en todas las páginas).
      OJO: no escribir "asterisco+barra" dentro de comentarios CSS. ──────── */
.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;
  margin: 0 0 1em;
  font-family: var(--fuente-base);
}

.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__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-hero .subfamilia-card-enlace{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: var(--eM);
  text-decoration: 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);
}

/* Tarjeta de subfamilia: enlace con subrayado animado (neutraliza el
   a,a:visited global rojo/negrita de estilos_1.css) */
a.subfamilia-card-enlace, a.subfamilia-card-enlace:visited{
  color: var(--g);
  font-weight: normal;
}
a.subfamilia-card-enlace:hover{ color: var(--tnd-rojo); }

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

.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);
}

@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;
  }
}

/* ── Subfamilia hero (port del hero-layout de main.css; sin secuencias
      asterisco+barra en este comentario) ─────────────────────────────────── */
.hero-layout{
  display: flex;
  position: relative;
  align-items: center;
  border-radius: var(--rP);
  /* Sin gap: la tira de fotos va detrás y asomaría por el hueco entre la
     ilustración y el texto; la separación la pone el padding del texto. */
  gap: 0;
  margin: 0 0 1em;
  min-height: 4rem;
  overflow: hidden;
  font-family: var(--fuente-base);
}

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

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

.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;
}

.hero-layout:hover .subfamilia-hero__ilustracion img{ filter: grayscale(0); }

.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;
  /* Toda la altura del hero (min-height 120px): centrado, el texto medía
     menos y la tira de fotos asomaba por encima y por debajo del degradado. */
  align-self: stretch;
}

.subfamilia-hero__ilustracion + .subfamilia-hero-texto{ padding-left: var(--eL); }

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

.subfamilia-hero-titulo{
  margin: 0;
  font-size: 1.5rem;
  line-height: var(--lh3XL);
  color: var(--r);
  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{
    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%
    );
  }

  .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){
  .hero-layout{
    min-height: 120px;
    border-bottom: 1px dotted var(--g);
  }

  .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;
  }
}

/* ── Chips y contador de listados ────────────────────────────────────── */
.tnd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45em;
  align-items: center;
  margin: 0 0 1em;
}
.tnd-chips__etiqueta { font-size: .85em; color: var(--tnd-gris-texto); margin-right: .3em; }
.tnd-chip {
  border: 1px solid var(--tnd-borde);
  background: #fff;
  border-radius: 999px;
  padding: .3em .8em;
  font-size: .88em;
  white-space: nowrap;
}
.tnd-chip:hover { border-color: var(--tnd-rojo); }
.tnd-chip small { color: var(--tnd-gris-texto); font-weight: normal; }
.tnd-contador { font-size: .85em; color: var(--tnd-gris-texto); margin: .4em 0 .8em; }
.tnd-mostrar-mas { text-align: center; margin: 1.5em 0; }

/* ── Botones ─────────────────────────────────────────────────────────── */
.tnd-boton {
  display: inline-block;
  padding: .55em 1.3em;
  background: var(--tnd-rojo);
  color: #fff !important;
  border: 0;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  font-size: .95em;
}
.tnd-boton:hover { background: var(--tnd-rojo-osc); color: #fff !important; }
.tnd-boton--sec {
  background: #fff;
  color: var(--tnd-rojo) !important;
  border: 1px solid var(--tnd-rojo);
}
.tnd-boton--sec:hover { background: var(--tnd-gris); color: var(--tnd-rojo-osc) !important; }
.tnd-boton--add { padding: .4em .9em; }

/* ── Ficha de producto ───────────────────────────────────────────────── */
.tnd-ficha {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: 1.5em;
  margin-bottom: 1.5em;
}
@media (max-width: 900px) {
  .tnd-ficha { grid-template-columns: 1fr; }
}
.tnd-ficha__cabecera { margin: 0 0 .8em; }
.tnd-ficha__titulo { margin: 0 0 .3em; font-size: 1.6em; color: #222; padding: 0; }
.tnd-ficha__marca { margin: 0 0 .5em; font-size: .9em; color: var(--tnd-gris-texto); }
.tnd-ficha__desc { margin: 0 0 .4em; }
.tnd-ficha__clientenota { margin: .6em 0 0; font-size: .88em; border-top: 1px dotted var(--tnd-borde); padding-top: .5em; }
.tnd-ficha__nota-nodisp { font-size: .82em; color: var(--tnd-gris-texto); font-style: italic; margin-top: 1em; }

/* ── Resumen de precio (ref seleccionada) ── */
.tnd-resumen {
  background: var(--tnd-gris);
  border: 1px solid var(--tnd-borde);
  border-radius: var(--tnd-radio);
  padding: .9em 1.1em;
  margin: 0 0 1em;
}
.tnd-precioGrande {
  margin: 0;
  font-size: 2em;
  font-weight: 800;
  color: var(--tnd-rojo);
  line-height: 1.1;
  white-space: nowrap;
}
.tnd-precioGrande sup { font-size: .55em; font-weight: 700; }
.tnd-precioGrande--total { font-size: 1.35em; color: #222; }
.tnd-precioGrande__sub { display: block; color: var(--tnd-gris-texto); margin-top: .25em; }
.tnd-precio-detalle { margin-top: .35em; font-size: .85em; color: var(--tnd-gris-texto); }
.tnd-precio-detalle small { display: inline-block; margin-right: .6em; }
.tnd-pvp-ref { text-decoration: line-through; }
.tnd-precio-tramos { display: block; margin-top: .2em; }

/* ── Variantes: chips de tipo y de atributo (como la ficha pública) ── */
.tnd-variantes { margin: 0 0 1em; }
.tnd-grupo-chips { margin: 0 0 .8em; }
.tnd-variantes__clave {
  margin: 0 0 .35em;
  font-size: .88em;
  font-weight: bold;
  color: #333;
}
.tnd-variantes__select {
  font-size: 1em;
  padding: .25em .4em;
  border: 1px solid var(--tnd-borde);
  border-radius: 6px;
  max-width: 100%;
}
.tnd-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45em;
}
.tnd-chip-var {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .25em;
  padding: .4em .7em;
  border: 2px solid var(--tnd-borde);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: .9em;
  line-height: 1.2;
  color: #222;
}
.tnd-chip-var:hover { border-color: #b98d95; }
.tnd-chip-var.is-activo { border-color: var(--tnd-rojo); box-shadow: 0 0 0 1px var(--tnd-rojo) inset; }
.tnd-chip-var.is-stock { background: var(--tnd-verde-fondo); }
.tnd-chip-var--tipo { padding: .45em; }
.tnd-chip-thumb {
  display: block;
  width: 62px;
  height: 62px;
  border-radius: 6px;
  background: #fff center / cover no-repeat;
}
.tnd-chip-precio { font-size: .82em; font-weight: bold; color: var(--tnd-rojo); white-space: nowrap; }
.tnd-chip-precio__desde { font-weight: normal; color: var(--tnd-gris-texto); }
.tnd-chip-stock-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tnd-verde);
  border: 2px solid #fff;
}
.tnd-variantes__leyenda {
  display: flex;
  align-items: center;
  gap: .45em;
  margin: .2em 0 0;
  font-size: .8em;
  color: var(--tnd-gris-texto);
}
.tnd-variantes__leyenda .tnd-chip-stock-badge { position: static; border-color: var(--tnd-gris); }

/* ── CTA: cantidad + añadir + total + entrega ── */
.tnd-cta {
  border: 1px solid var(--tnd-borde);
  border-radius: var(--tnd-radio);
  padding: .9em 1.1em;
  margin: 0 0 1.2em;
  background: #fff;
}
.tnd-cta__seleccionado { margin: 0 0 .6em; font-size: .88em; color: #444; }
.tnd-cta__label-row { margin-bottom: .3em; }
.tnd-cta__label { font-size: .88em; font-weight: bold; }
.tnd-cta__multiplo { font-style: normal; font-weight: normal; color: var(--tnd-gris-texto); }
.tnd-cta__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8em 1em;
}
.tnd-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--tnd-borde);
  border-radius: 6px;
  overflow: hidden;
}
.tnd-stepper__btn {
  width: 2.2em;
  border: 0;
  background: var(--tnd-gris);
  font-size: 1.1em;
  cursor: pointer;
  color: var(--tnd-rojo);
  font-weight: bold;
}
.tnd-stepper__btn:hover { background: #e8dcdf; }
.tnd-stepper__input {
  width: 4.2em;
  border: 0;
  border-left: 1px solid var(--tnd-borde);
  border-right: 1px solid var(--tnd-borde);
  text-align: center;
  font-size: 1em;
  padding: .45em .2em;
}
.tnd-cta__form { display: inline-flex; }
.tnd-cta__boton { font-size: 1em; padding: .6em 1.4em; }
.tnd-cta__boton[disabled] { opacity: .5; cursor: not-allowed; }
.tnd-cta__total { display: flex; align-items: baseline; gap: .5em; margin-left: auto; }
.tnd-cta__total-label { font-size: .88em; color: var(--tnd-gris-texto); }
.tnd-cta__entrega { margin: .8em 0 0; font-size: .9em; }
.tnd-cta__vercarrito { margin-top: .7em; display: inline-block; padding: .4em 1em; font-size: .88em; }

/* ── Especificaciones técnicas ── */
.tnd-especificaciones { margin: 0 0 1em; }
.tnd-especificaciones__bloques {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}
@media (max-width: 640px) {
  .tnd-especificaciones__bloques { grid-template-columns: 1fr; }
}
.tnd-especificaciones__bloque h3 { margin: 0 0 .4em; font-size: .95em; }
.tnd-especificaciones__bloque dl {
  margin: 0;
  font-size: .88em;
  border-top: 1px solid var(--tnd-gris);
}
.tnd-especificaciones__bloque dt {
  float: left;
  clear: left;
  width: 46%;
  padding: .3em 0;
  color: var(--tnd-gris-texto);
}
.tnd-especificaciones__bloque dd {
  margin: 0 0 0 48%;
  padding: .3em 0;
  border-bottom: 1px solid var(--tnd-gris);
}

/* ── Detalle bajo la galería: descripción larga y documentación ── */
.tnd-detalle { margin: 1.2em 0 0; }
.tnd-detalle__titulo {
  font-size: 1.1em;
  margin: 0 0 .5em;
  padding: 0;
  border-bottom: 2px solid var(--tnd-rojo);
  display: inline-block;
}
.tnd-detalle__texto { line-height: 1.6; }
.tnd-docs { margin: 0; padding-left: 1.2em; }

/* ── Galería ─────────────────────────────────────────────────────────── */
.tnd-galeria { position: relative; }
.tnd-galeria__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border: 1px solid var(--tnd-borde);
  border-radius: var(--tnd-radio);
  background: #fff;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tnd-galeria__track::-webkit-scrollbar { display: none; }
.tnd-galeria__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  padding-top: 100%; /* cuadrada sin depender de aspect-ratio */
}
.tnd-galeria__slide img,
.tnd-galeria__slide iframe {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.tnd-galeria__slide iframe { width: 100%; height: 100%; border: 0; }
.tnd-galeria__slide--video { cursor: pointer; background: #000; }
.tnd-galeria__slide--video img { opacity: .8; }
.tnd-galeria__play {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3em;
  color: #fff;
  text-shadow: 0 0 12px rgba(0, 0, 0, .8);
  pointer-events: none;
}
.tnd-galeria__play--mini { font-size: 1.2em; }
.tnd-galeria__flecha {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 2em;
  height: 2.6em;
  border: 1px solid var(--tnd-borde);
  background: rgba(255, 255, 255, .92);
  border-radius: 6px;
  font-size: 1.2em;
  line-height: 1;
  cursor: pointer;
  color: var(--tnd-rojo);
}
.tnd-galeria__flecha--prev { left: .5em; }
.tnd-galeria__flecha--next { right: .5em; }
@media (hover: none) and (pointer: coarse) {
  .tnd-galeria__flecha { display: none; }
}
.tnd-galeria__thumbs {
  display: flex;
  gap: .4em;
  margin-top: .5em;
  overflow-x: auto;
  padding-bottom: .2em;
}
.tnd-galeria__thumb {
  flex: 0 0 58px;
  height: 58px;
  padding: 0;
  border: 2px solid var(--tnd-borde);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.tnd-galeria__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tnd-galeria__thumb.is-activa { border-color: var(--tnd-rojo); }

/* ── Etiquetas de origen del precio y disponibilidad ─────────────────── */
.tnd-tag {
  display: inline-block;
  font-size: .72em;
  font-weight: bold;
  padding: .1em .45em;
  border-radius: 999px;
  vertical-align: middle;
}
.tnd-tag--oferta { background: #fff59d; color: #7a5c00; }
.tnd-tag--cliente { background: var(--tnd-azul-fondo); color: var(--tnd-azul); }

.tnd-dispo {
  display: inline-block;
  font-size: .82em;
  font-weight: bold;
  padding: .18em .6em;
  border-radius: 999px;
  white-space: nowrap;
}
.tnd-dispo--stock { background: var(--tnd-verde-fondo); color: var(--tnd-verde); }
.tnd-dispo--plazo { background: var(--tnd-gris); color: #444; }
.tnd-dispo--bajopedido { background: var(--tnd-ambar-fondo); color: var(--tnd-ambar); }

.tnd-vacio {
  padding: 1.5em;
  background: var(--tnd-gris);
  border-radius: var(--tnd-radio);
  color: var(--tnd-gris-texto);
}

/* ── Móvil ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tnd-main { padding: 0 .6em 2em; }
  .tnd-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 46%), 1fr));
    gap: .6em;
  }
  .tnd-grid--carril .tnd-card { flex-basis: 180px; }
  .tnd-precioGrande { font-size: 1.6em; }
  .tnd-cta__total { margin-left: 0; width: 100%; }
}

/* ── Página de Marcas (/tienda/marcas.php — espejo de htdocs/marcas) ────── */
.hero-layout--marcas { padding: .5em .2em; }
.hero-texto { position: relative; z-index: 2; min-width: 0; }
.hero-titulo { margin: 0 0 .2em; padding: 0; font-size: 1.7em; color: var(--tnd-rojo); }
.hero-frase { margin: 0; color: var(--tnd-gris-texto); }
.resultado-indicador { font-size: .85em; color: var(--tnd-gris-texto); margin: .4em 0 .8em; }
.bloque-minicards { margin: 0 0 1.5em; }
.grid-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 46%), 1fr));
  gap: .8em;
}
.mini-card {
  background: #fff;
  border: 1px solid var(--tnd-borde);
  border-radius: var(--tnd-radio);
  overflow: hidden;
  box-shadow: var(--tnd-sombra);
  transition: transform .12s ease, box-shadow .12s ease;
}
.mini-card:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
.mini-card-enlace { display: block; color: #222 !important; font-weight: normal; }
.mini-card-imagen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding: .6em;
  background: #fff;
  border-bottom: 1px solid var(--tnd-gris);
}
.mini-card-imagen img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mini-card-texto { padding: .5em .7em .6em; }
.mini-card-titulo { margin: 0; padding: 0; font-size: .95em; color: var(--tnd-rojo); }
.mini-card-meta { font-size: .78em; color: var(--tnd-gris-texto); }

/* Opciones tipo radio del chip Familia (el jQuery de marcas.php crea labels
   con <input type=radio>; los chips de listados usan <a>) */
label.filtro-opcion { cursor: pointer; }
label.filtro-opcion input[type="radio"] { accent-color: var(--tnd-rojo); margin: 0 .2em 0 0; }

/* ── Ficha: bloque "Precios por cantidad" (tramos de TarifaPrecio) ──────── */
.tnd-precios-cantidad {
  border: 1px solid var(--tnd-borde);
  border-radius: var(--tnd-radio);
  background: #fff;
  padding: .7em 1em .8em;
  margin: 0 0 1em;
}
.tnd-precios-cantidad__titulo {
  margin: 0 0 .45em;
  padding: 0;
  font-size: .95em;
  color: #333;
}
.tnd-precios-cantidad__lista {
  display: flex;
  flex-wrap: wrap;
  gap: .45em;
}
.tnd-precio-cantidad-item {
  border: 1px solid var(--tnd-borde);
  border-radius: 6px;
  padding: .3em .7em;
  background: var(--tnd-gris);
  text-align: center;
}
.tnd-precio-cantidad-item__rango {
  display: block;
  font-size: .75em;
  color: var(--tnd-gris-texto);
  white-space: nowrap;
}
.tnd-precio-cantidad-item__precio {
  display: block;
  font-weight: bold;
  color: var(--tnd-rojo);
  white-space: nowrap;
}
.tnd-precio-cantidad-item.is-activo {
  border-color: var(--tnd-rojo);
  background: #fff;
  box-shadow: 0 0 0 1px var(--tnd-rojo) inset;
}

/* ── Visitante sin sesión (2026-10-16): sin precios ni carrito ─────────── */
.tnd-card__login {
  background: none;
  border: 0;
  padding: 0;
  width: auto;
  margin: 0;
  font: inherit;
  font-size: .9em;
  font-weight: normal;
  color: var(--tnd-enlace);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.tnd-card__login:hover { background: none; color: var(--tnd-rojo-osc); }
.tnd-login-aviso {
  border: 1px solid var(--tnd-borde);
  border-left: 4px solid var(--tnd-rojo);
  border-radius: var(--tnd-radio);
  background: var(--tnd-gris);
  padding: 1em 1.1em;
  margin: 0 0 1.2em;
}
.tnd-login-aviso__titulo { margin: 0 0 .3em; font-size: 1.15em; font-weight: 700; color: var(--tnd-rojo); }
.tnd-login-aviso__texto { margin: 0 0 .9em; color: var(--tnd-gris-texto); line-height: 1.4; }
.tnd-login-aviso__acciones { display: flex; flex-wrap: wrap; gap: .6em; }
.tnd-login-aviso__nota { margin: .8em 0 0; font-size: .88em; color: var(--tnd-gris-texto); }

/* Enlace al gestor «Catálogo de la tienda» (permiso OCAT, 2026-10-23) */
a.tnd-gestionar, a.tnd-gestionar:visited{
  margin-left: auto; font-size: .9em; font-weight: 600; color: var(--r, #8e1f30); text-decoration: underline;
}
a.tnd-gestionar:hover{ color: var(--rO, #6a1724); }