/* Marcas. Dos paginas, una sola hoja, porque son la misma familia:
     - el indice            -> templates/catalog/manufacturers.tpl
     - la pagina de cada marca -> templates/catalog/listing/manufacturer.tpl
   Las dos la enlazan con un <link> en el cuerpo. Solo se descarga en ellas. */

.tdr-marcas {
  padding-bottom: var(--alpha-ui-space-2xl, 3rem);
}

/* ===== CABECERA ===== */

.tdr-marcas__cabecera {
  margin-bottom: var(--alpha-ui-space-xl, 2rem);
  text-align: center;
}

.tdr-marcas__titulo {
  margin: 0 0 var(--alpha-ui-space-md, 1rem);
  color: var(--alpha-ui-color-primary, #e10613);
  font-size: var(--alpha-ui-font-size-5xl, 2.875rem);
  font-weight: var(--alpha-ui-font-weight-bold, 700);
  line-height: var(--alpha-ui-line-height-tight, 1.15);
}

/* 70ch es la medida de lectura comoda; el auto lo centra bajo el titulo */
.tdr-marcas__intro {
  max-width: 70ch;
  margin: 0 auto;
  color: var(--alpha-ui-color-black, #111318);
  font-size: var(--alpha-ui-font-size-base, 1rem);
  line-height: var(--alpha-ui-line-height-relaxed, 1.5);
}

/* ===== BARRA DE LETRAS ===== */

.tdr-marcas__az {
  margin-bottom: var(--alpha-ui-space-xl, 2rem);
}

.tdr-marcas__az-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--alpha-ui-space-2xs, 0.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 44x44 es el minimo de area tactil (WCAG 2.5.5 / Apple HIG): por debajo de
   eso se falla al pulsar con el dedo. inline-flex para centrar la letra
   dentro de esa caja, que con min-height y padding no se centra sola. */
.tdr-marcas__az-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--alpha-ui-space-xs, 0.5rem) var(--alpha-ui-space-sm, 0.75rem);
  border: var(--alpha-ui-border-width-thin, 1px) solid var(--alpha-ui-color-border, #e3e7ec);
  border-radius: var(--alpha-ui-radius-xs, 6px);
  background: var(--alpha-ui-color-white, #ffffff);
  color: var(--alpha-ui-color-text, #161616);
  font-size: var(--alpha-ui-font-size-sm, 0.8125rem);
  font-weight: var(--alpha-ui-font-weight-semibold, 600);
  line-height: var(--alpha-ui-line-height-none, 1);
  cursor: pointer;
}

.tdr-marcas__az-item:hover {
  border-color: var(--alpha-ui-color-text, #161616);
}

.tdr-marcas__az-item.is-active {
  border-color: var(--alpha-ui-color-primary, #e10613);
  background: var(--alpha-ui-color-primary, #e10613);
  color: var(--alpha-ui-color-white, #ffffff);
}

.tdr-marcas__vacio {
  margin: var(--alpha-ui-space-2xl, 3rem) 0;
  color: var(--alpha-ui-color-text-muted, #7b8491);
  text-align: center;
}

/* ===== GRUPOS POR LETRA ===== */

.tdr-marcas__grupo + .tdr-marcas__grupo {
  margin-top: var(--alpha-ui-space-2xl, 3rem);
}

/* scroll-margin: al saltar a una letra, el encabezado no se queda debajo de
   la cabecera pegada */
.tdr-marcas__grupo {
  scroll-margin-top: 120px;
}

.tdr-marcas__letra {
  margin: 0 0 var(--alpha-ui-space-md, 1rem);
  padding-bottom: var(--alpha-ui-space-xs, 0.5rem);
  border-bottom: var(--alpha-ui-border-width-thin, 1px) solid var(--alpha-ui-color-border-strong, #dbdbdb);
  color: var(--alpha-ui-color-black, #111318);
  font-size: var(--alpha-ui-font-size-4xl, 2rem);
  font-weight: var(--alpha-ui-font-weight-bold, 700);
  line-height: var(--alpha-ui-line-height-none, 1);
}

/* ===== REJILLA ===== */

/* auto-fill y no auto-fit: con pocas marcas a la vista (al filtrar por una
   letra) auto-fit las estiraria a lo ancho de la pantalla. */
.tdr-marcas__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--alpha-ui-space-md, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tdr-marca {
  min-width: 0;
}

.tdr-marca__enlace {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--alpha-ui-space-sm, 0.75rem);
  height: 100%;
  padding: var(--alpha-ui-space-md, 1rem);
  border: var(--alpha-ui-border-width-thin, 1px) solid var(--alpha-ui-color-border, #e3e7ec);
  border-radius: var(--alpha-ui-radius-xs, 6px);
  background: var(--alpha-ui-color-white, #ffffff);
  color: var(--alpha-ui-color-text, #161616);
  text-decoration: none;
}

a.tdr-marca__enlace:hover {
  border-color: var(--alpha-ui-color-text, #161616);
  color: var(--alpha-ui-color-text, #161616);
  text-decoration: none;
}

/* Caja de alto fijo: los logotipos vienen a proporciones distintas y sin esto
   cada tarjeta mide una cosa y la rejilla queda dentada. */
.tdr-marca__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 170px;
}

.tdr-marca__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tdr-marca__nombre {
  color: var(--alpha-ui-color-black, #111318);
  font-size: var(--alpha-ui-font-size-md, 0.875rem);
  font-weight: var(--alpha-ui-font-weight-semibold, 600);
  line-height: var(--alpha-ui-line-height-snug, 1.25);
  text-align: center;
  overflow-wrap: anywhere;
}

/* Sin productos: se ve, no se pulsa */
.tdr-marca--vacia .tdr-marca__enlace {
  cursor: default;
}

.tdr-marca--vacia .tdr-marca__logo img {
  opacity: .35;
  filter: grayscale(1);
}

.tdr-marca--vacia .tdr-marca__nombre {
  color: var(--alpha-ui-color-text-muted, #7b8491);
  font-weight: var(--alpha-ui-font-weight-regular, 400);
}

@media (max-width: 767.98px) {
  .tdr-marcas__titulo { font-size: var(--alpha-ui-font-size-3xl, 1.75rem); }
  /* Dos justas, no auto-fill: con minmax el ancho del movil decidia por su
     cuenta y a 430px ya entraban tres */
  .tdr-marcas__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--alpha-ui-space-sm, 0.75rem); }
  .tdr-marca__logo { height: 96px; }
  .tdr-marca__enlace { padding: var(--alpha-ui-space-sm, 0.75rem); }
}


/* ==========================================================================
   PAGINA DE UNA MARCA  (/212-brand/3rg)
   ========================================================================== */

/* ===== CABECERA: LOGOTIPO + NOMBRE ===== */

.tdr-marca-cab {
  display: flex;
  align-items: center;
  gap: var(--alpha-ui-space-lg, 1.5rem);
  margin-bottom: var(--alpha-ui-space-lg, 1.5rem);
}

/* Caja de lado fijo: los logotipos vienen a proporciones muy distintas (los hay
   apaisados y los hay cuadrados) y sin una caja fija el titulo de al lado baila
   de sitio segun la marca. flex:0 0 auto para que no la encoja el texto largo. */
.tdr-marca-cab__logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  padding: var(--alpha-ui-space-sm, 0.75rem);
  border: var(--alpha-ui-border-width-thin, 1px) solid var(--alpha-ui-color-border, #e3e7ec);
  border-radius: var(--alpha-ui-radius-xs, 6px);
  background: var(--alpha-ui-color-white, #ffffff);
}

.tdr-marca-cab__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* min-width:0 para que un nombre largo sin espacios pueda partirse en vez de
   estirar el flex y sacar scroll horizontal */
.tdr-marca-cab__texto {
  min-width: 0;
}

/* EL #content-wrapper NO ES DECORACION. El titulo de TODAS las paginas de
   listado lo manda custom_s_1.css (la hoja del configurador) con
   "#content-wrapper .page-title { color:#333; padding:0 .5em; ... }". Eso lleva
   un id dentro, asi que una regla de una sola clase pierde por especificidad
   aunque esta hoja se cargue despues. Empatando el id, gana esta por orden. */
#content-wrapper .tdr-marca-cab__titulo {
  margin: 0;
  padding: 0;
  color: var(--alpha-ui-color-black, #111318);
}

.tdr-marca-cab__cuenta {
  margin: var(--alpha-ui-space-2xs, 0.25rem) 0 0;
  color: var(--alpha-ui-color-text-muted, #7b8491);
  font-size: var(--alpha-ui-font-size-md, 0.875rem);
}

/* ===== DESCRIPCION ===== */

.tdr-marca-desc {
  margin-bottom: var(--alpha-ui-space-lg, 1.5rem);
}

.tdr-marca-desc__corta,
.tdr-marca-desc__larga {
  color: var(--alpha-ui-color-text, #161616);
  line-height: var(--alpha-ui-line-height-relaxed, 1.5);
}

.tdr-marca-desc__larga {
  margin-top: var(--alpha-ui-space-sm, 0.75rem);
}

/* Boton con aspecto de enlace: no es una accion, es "sigue leyendo". El
   min-height de 44px es el minimo de area tactil (WCAG 2.5.5); como el texto
   no llega a tanto, el inline-flex lo centra dentro. */
.tdr-marca-desc__mas {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--alpha-ui-color-black, #111318);
  font-size: var(--alpha-ui-font-size-md, 0.875rem);
  font-weight: var(--alpha-ui-font-weight-semibold, 600);
  text-decoration: underline;
  cursor: pointer;
}

/* El rojo se guarda para el hover: en reposo el boton va en negro, como el
   texto que acompana. Antes era al reves y el rojo tiraba del ojo mas que la
   propia descripcion. */
.tdr-marca-desc__mas:hover,
.tdr-marca-desc__mas:focus {
  color: var(--alpha-ui-color-primary, #e10613);
}

/* Quien pone y quita .collapsed es bootstrap, no nosotros: por eso el rotulo
   cambia sin una sola linea de JS propia. Plegado -> "Leer mas";
   desplegado -> "Leer menos".
   El tema padre hacia otra cosa: .btn-brands-more{display:none} y
   .btn-brands-more.collapsed{display:block}, o sea que al desplegar el boton
   DESAPARECIA y ya no habia forma de volver a plegar el texto. */
.tdr-marca-desc__mas.collapsed .tdr-marca-desc__mas-cerrar,
.tdr-marca-desc__mas:not(.collapsed) .tdr-marca-desc__mas-abrir {
  display: none;
}

@media (max-width: 767.98px) {
  .tdr-marca-cab {
    gap: var(--alpha-ui-space-md, 1rem);
    margin-bottom: var(--alpha-ui-space-md, 1rem);
  }
  /* Se queda en fila y no se apila: apilado, el logotipo se come media pantalla
     antes de que se lea el nombre de la marca. */
  .tdr-marca-cab__logo {
    width: 84px;
    height: 84px;
    padding: var(--alpha-ui-space-xs, 0.5rem);
  }
}