/*
 * Tema hijo "jugamos" (padre: classic de la 9.2). Colores corporativos de la tienda (sección 10.6 del documento):
 *   rosa    #dc2058  (en la 1.6, global.css, blockcontact.css, blockuserinfo.css)
 *   granate #9e1940  (hover / activo)
 * Sustituye al azul de Classic (#24b9d7 y #2592a9 al pasar el ratón). Se carga después del CSS del tema padre.
 */
:root {
  --jugamos-rosa: #dc2058;
  --jugamos-granate: #9e1940;
}

/* Enlaces */
a,
.text-primary,
.page-content a,
#footer .links li a:hover,
.footer-container li a:hover,
#header .top-menu a[data-depth="0"]:hover,
.top-menu .sub-menu a:hover,
.product-miniature .product-title a:hover,
.block-categories a:hover,
.facet .facet-label a:hover,
.pagination .current a,
.breadcrumb li:last-child a,
#wrapper .breadcrumb li a:hover,
.cart-summary-line .label a,
.account-list a:hover,
.page-my-account #content .links a:hover,
.page-my-account #content .links a:hover i,
.tabs .nav-tabs .nav-link.active,
.product-price,
.current-price,
#blockcart-modal .product-name,
.custom-checkbox input[type="checkbox"] + span .checkbox-checked {
  color: var(--jugamos-rosa);
}

a:hover,
a:focus,
.text-primary:hover {
  color: var(--jugamos-granate);
}

/* Botones */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--jugamos-rosa);
  border-color: transparent;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--jugamos-granate);
  border-color: transparent;
}

.btn-secondary:hover,
.btn-tertiary:hover {
  color: var(--jugamos-granate);
}

/* Fondos y marcas */
.bg-primary,
.product-flags li.product-flag,
.product-flags li.product-flag.new,
.page-item.active .page-link,
.products-sort-order .select-list:hover,
.dropdown-item:hover,
.dropdown-item:focus,
.custom-radio input[type="radio"]:checked + span,
.block_newsletter form input[type="submit"] {
  background-color: var(--jugamos-rosa);
}

.product-flags li.product-flag.discount,
.product-flags li.product-flag.on-sale,
.has-discount .discount {
  background-color: var(--jugamos-granate);
  color: #fff;
}

.tabs .nav-tabs .nav-link.active,
.nav-tabs .nav-item.open .nav-link,
.nav-tabs .nav-link.active {
  border-bottom-color: var(--jugamos-rosa);
}

/* Foco en formularios */
.form-control:focus,
.input-group.focus,
#search_widget form input:focus {
  border-color: var(--jugamos-rosa);
  outline-color: var(--jugamos-rosa);
}

/* Texto de bienvenida de la portada (ps_customtext, dev/tema-jugamos/portada-es.html) */
/* "body" delante: más específico que el "#custom-text h2" de Classic (color #232323), cargue antes o después */
body #custom-text h2 {
  color: var(--jugamos-rosa);
}

body #custom-text .jugamos-contacto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 3rem;
  font-size: 1.1rem;
  font-weight: 600;
}

body #custom-text .jugamos-contacto a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

#custom-text .jugamos-contacto .material-icons,
#custom-text .jugamos-icono {
  color: var(--jugamos-rosa);
  font-size: 22px;
}

#custom-text .jugamos-aviso {
  font-size: 0.9rem;
  color: #7a7a7a;
}

/* Columnas de la portada (dev/fase4-columnas.sh): bloques con la línea rosa arriba y el título sobre gris,
   como en el tema de la 1.6 */
.jugamos-bloque,
#left-column .jugamos-categorias,
#right-column .featured-products {
  margin-bottom: 1.5rem;
  background: #fff;
  border-top: 4px solid var(--jugamos-rosa);
  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.1);
}

.jugamos-bloque-titulo,
#right-column .featured-products .products-section-title {
  margin: 0;
  padding: 1rem 1.25rem;
  background: #f6f6f6;
  font-size: 1.1rem;
  text-align: left;
  text-transform: uppercase;
}

.jugamos-bloque-contenido {
  padding: 1rem 1.25rem;
}

.jugamos-bloque-contenido ul {
  padding-left: 0;
  list-style: none;
}

.jugamos-bloque-contenido .btn {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

.jugamos-bloque-contenido img {
  display: block;
  width: 100%;
  margin-bottom: 0.75rem;
}

/* Promociones especiales en la columna derecha: un producto por fila */
#right-column .featured-products .products {
  padding: 1rem 1.25rem 0;
  margin: 0;
}

#right-column .featured-products .products > .product,
#right-column .featured-products .products > .js-product {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  float: none;
}

#right-column .featured-products .all-product-link {
  margin: 0 1.25rem 1rem;
}

/* Menú de categorías de la columna izquierda (modules/ps_categorytree del tema hijo), como el blockcategories de la
   1.6: título "Categorías" sobre gris con la línea rosa, categorías en negrita separadas por líneas y el +/- en un
   cuadro gris a la derecha. */
body #left-column .jugamos-categorias {
  padding: 0;
}

body #left-column .jugamos-categorias .category-top-menu,
body #left-column .jugamos-categorias .category-sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

body #left-column .jugamos-categorias .category-sub-menu li[data-depth="0"] {
  position: relative;
  border-bottom: 1px solid #d6d4d4;
}

body #left-column .jugamos-categorias .category-sub-menu li[data-depth="0"] > a {
  display: block;
  padding: 0.45rem 2.75rem 0.45rem 1.25rem;
  color: #333;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

body #left-column .jugamos-categorias .category-sub-menu li > a:hover {
  background: #f6f6f6;
  color: var(--jugamos-rosa);
}

body #left-column .jugamos-categorias .collapse-icons {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f6f6;
  color: #b0b0b0;
  cursor: pointer;
}

body #left-column .jugamos-categorias .collapse-icons .material-icons {
  font-size: 1.1rem;
}

body #left-column .jugamos-categorias .category-sub-menu .category-sub-menu {
  border-top: 1px solid #ebebeb;
}

body #left-column .jugamos-categorias .category-sub-menu li:not([data-depth="0"]) {
  position: relative;
  padding: 0;
}

body #left-column .jugamos-categorias .category-sub-link {
  display: block;
  padding: 0.3rem 2.5rem 0.3rem 1.25rem;
  color: #777;
  font-size: 0.9rem;
  font-weight: 400;
}

body #left-column .jugamos-categorias .category-sub-link::before {
  content: "\203A";
  padding-right: 0.5rem;
}

body #left-column .jugamos-categorias .arrows {
  position: absolute;
  top: 0.15rem;
  right: 0.5rem;
  cursor: pointer;
}

/* Rejillas de productos (destacados, más vendidos, novedades, categorías): todas las fichas de una fila con la misma
   altura */
.products > .js-product.product {
  display: flex;
}

.products > .js-product.product > .product-miniature,
.products > .js-product.product > .product-miniature > .thumbnail-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.products .product-miniature .product-description {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Ficha de producto: bloques de confianza (blockreassurance). Desde 768 px, todos en una sola fila con el mismo
   ancho (el texto pasa a dos líneas si hace falta); en el móvil se reparten en varias filas. */
body#product .blockreassurance_product {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 0.75rem;
  margin: 1.25rem 0;
}

body#product .blockreassurance_product > div {
  flex: 1 1 6rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}

@media (min-width: 768px) {
  body#product .blockreassurance_product {
    flex-wrap: nowrap;
  }

  body#product .blockreassurance_product > div {
    flex: 1 1 0;
  }

  body#product .blockreassurance_product > div .block-title {
    font-size: 0.8rem;
  }
}

body#product .blockreassurance_product > div.clearfix {
  display: none;
}

body#product .blockreassurance_product .item-product {
  float: none;
  margin: 0;
}

body#product .blockreassurance_product .block-title {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.3;
}

/* Ficha de producto: pestañas (Descripción / Detalles) a todo lo ancho, debajo de imagen e información
   (templates/catalog/product.tpl del tema hijo) */
body#product .jugamos-pestanas-producto {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Página de fabricantes (/fabricantes, body#manufacturer): cada fabricante es solo su nombre enlazado
   (templates/catalog/_partials/miniatures/brand.tpl). Cuadrícula responsiva de tarjetas del mismo ancho. */
body#manufacturer #main > ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.75rem;
  padding: 0 0 3rem;
  margin: 1rem 0 0;
  list-style: none;
}

/* "li.brand": más específico que el "#manufacturer #main ul .brand" de Classic (ancho 20 %, min-width 210px y
   margen 5px), que con la página más ancha hacía que las tarjetas se salieran de su columna y se pisaran */
body#manufacturer #main > ul > li.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 3.5rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid #ebebeb;
  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
}

body#manufacturer #main > ul > li.brand:hover {
  border-color: var(--jugamos-rosa);
}

body#manufacturer #main > ul > li.brand .brand-infos {
  width: auto;
  min-width: 0;
  padding: 0;
}

body#manufacturer #main > ul > li.brand .brand-infos p {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------------------------------------------
   Ancho de página y rejilla de productos (08/11/2026)
   Classic (Bootstrap 4 alpha.5, rejilla con float) deja el contenedor en 1140 px desde 1200 px y reparte la portada
   3 | 6 | 3: el centro se queda en ~570 px y destacados / más vendidos salen a 4 por fila de ~140 px.
   - Desde 1200 px: contenedor fluido hasta 1440 px y columnas laterales de ancho fijo (270 px); el centro se lleva
     el resto (870 px a 1440, 710 px a 1280).
   - Rejilla de productos del centro con CSS grid: tantas fichas por fila como quepan con un mínimo de ancho, en vez
     de las clases col-* fijas de Classic. Se adapta sola a cada pantalla y orientación:
       1440 px: 4 por fila | 1280: 3 | tableta horizontal (1024): 2-3 | tableta vertical (768): 2-3 | móvil: 2
   - Por debajo de 1200 px se queda el reparto de columnas de Classic / layout-both-columns.tpl del tema hijo.
   --------------------------------------------------------------------------------------------------------------- */
:root {
  --jugamos-ancho-max: 1440px;
  --jugamos-ancho-lateral: 270px;
  --jugamos-ficha-min: 12rem;
}

@media (min-width: 1200px) {
  .container {
    width: 100%;
    max-width: var(--jugamos-ancho-max);
  }

  #left-column,
  #right-column {
    width: var(--jugamos-ancho-lateral);
  }

  #content-wrapper.left-column.right-column {
    width: calc(100% - 2 * var(--jugamos-ancho-lateral));
  }

  #content-wrapper.left-column:not(.right-column),
  #content-wrapper.right-column:not(.left-column) {
    width: calc(100% - var(--jugamos-ancho-lateral));
  }
}

#content-wrapper .products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--jugamos-ficha-min)), 1fr));
  gap: 0 1.25rem;
  margin-left: 0;
  margin-right: 0;
}

/* El clearfix de .row (::before / ::after) sería una celda más de la rejilla */
#content-wrapper .products::before,
#content-wrapper .products::after {
  display: none;
}

#content-wrapper .products > .js-product,
#content-wrapper .products > .product {
  width: auto;
  max-width: none;
  float: none;
  padding-left: 0;
  padding-right: 0;
}

/* Móvil: dos fichas por fila (Classic pone una, muy grande); en pantallas de menos de ~340 px, una */
@media (max-width: 575px) {
  :root {
    --jugamos-ficha-min: 9.25rem;
  }

  #content-wrapper .products {
    gap: 0 0.75rem;
  }

  #content-wrapper .product-miniature .product-title {
    font-size: 0.8rem;
  }
}

/* Bloque Marcas de la columna izquierda (modules/ps_brandlist del tema hijo): como Categorías */
.jugamos-marcas .jugamos-bloque-titulo a {
  color: inherit;
}

.jugamos-marcas .jugamos-bloque-titulo a:hover {
  color: var(--jugamos-rosa);
}

.jugamos-marcas-contenido {
  padding: 0 0 1rem;
}

.jugamos-marcas-contenido ul {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.jugamos-marcas-contenido li {
  border-bottom: 1px solid #ebebeb;
}

.jugamos-marcas-contenido li a {
  display: block;
  padding: 0.4rem 1.25rem;
  color: #555;
  font-size: 0.9rem;
  line-height: 1.35;
}

.jugamos-marcas-contenido li a::before {
  content: "\203A";
  padding-right: 0.5rem;
  color: var(--jugamos-rosa);
}

.jugamos-marcas-contenido li a:hover {
  background: #f6f6f6;
  color: var(--jugamos-rosa);
}

.jugamos-marcas-contenido .jugamos-marcas-todas {
  display: inline-flex;
  align-items: center;
  margin: 0 1.25rem;
  text-transform: none;
}

.jugamos-marcas-contenido .jugamos-marcas-todas .material-icons {
  font-size: 1.2rem;
}

.jugamos-marcas-vacio {
  margin: 0;
  padding: 1rem 1.25rem 0;
}

/* Forma "desplegable" (brand_form) */
.jugamos-marcas-brand_form {
  padding: 1rem 1.25rem;
}

.jugamos-marcas-brand_form .brands-sort {
  position: relative;
}

.jugamos-marcas-brand_form .select-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid #d6d4d4;
  color: #555;
  text-align: left;
}

.jugamos-marcas-brand_form .select-title:hover,
.jugamos-marcas-brand_form .select-title:focus {
  border-color: var(--jugamos-rosa);
}

.jugamos-marcas-brand_form .dropdown-menu {
  width: 100%;
  max-height: 20rem;
  overflow-y: auto;
}

/* Cabecera de categoría (templates/catalog/_partials/category-header.tpl del tema hijo, 08/11/2026): una tarjeta
   compacta con la línea rosa, sin el alto mínimo de Classic (13.75rem) que dejaba un hueco vacío, y las
   subcategorías como botones */
body .block-category.jugamos-categoria {
  min-height: 0;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-top: 4px solid var(--jugamos-rosa);
  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.1);
}

body .block-category.jugamos-categoria h1 {
  margin-bottom: 0;
  font-size: 1.75rem;
}

body .block-category.jugamos-categoria .block-category-inner {
  gap: 1.5rem;
  margin-top: 0.75rem;
}

body .block-category.jugamos-categoria #category-description {
  flex: 1 1 auto;
}

.jugamos-subcategorias {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #ebebeb;
}

.jugamos-subcategorias ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jugamos-subcategorias a {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.45rem 0.5rem 0.45rem 0.9rem;
  background: #f6f6f6;
  border: 1px solid #e1e1e1;
  border-radius: 2rem;
  color: #333;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.jugamos-subcategorias a .material-icons {
  font-size: 1.1rem;
  color: var(--jugamos-rosa);
  transition: color 0.15s;
}

.jugamos-subcategorias a:hover,
.jugamos-subcategorias a:focus {
  background: var(--jugamos-rosa);
  border-color: var(--jugamos-rosa);
  color: #fff;
  text-decoration: none;
}

.jugamos-subcategorias a:hover .material-icons,
.jugamos-subcategorias a:focus .material-icons {
  color: #fff;
}

@media (max-width: 767px) {
  body .block-category.jugamos-categoria {
    padding: 1rem;
  }

  body .block-category.jugamos-categoria h1 {
    font-size: 1.4rem;
  }

  .jugamos-subcategorias a {
    font-size: 0.85rem;
  }
}

/* Carrito de la cabecera con productos: rosa en vez del azul de Classic */
#header .header-nav .blockcart.cart-preview.active {
  background: var(--jugamos-rosa);
}

#header .header-nav .blockcart.cart-preview.active:hover {
  background: var(--jugamos-granate);
}

/* Menú superior y barra fina (dev/menu-superior.sh, 08/11/2026)
   - Barra fina: teléfono · La tienda · Contacto (modules/ps_contactinfo/nav.tpl del tema hijo).
   - Menú: Categorías ▾ | Novedades | Ofertas | Más vendidos | Marcas, y en el móvil (☰) también La tienda y Contacto.
     Desde 768 px esas dos se ocultan del menú porque ya están en la barra fina; en el móvil Classic oculta la barra
     fina y mueve su contenido al pie del menú, donde se quitan los dos enlaces para no repetirlos. */
.jugamos-nav-enlaces {
  margin-left: 1.25rem;
}

.jugamos-nav-enlaces a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 1rem;
  color: #7a7a7a;
}

.jugamos-nav-enlaces a:first-child {
  margin-left: 0;
}

.jugamos-nav-enlaces a:hover {
  color: var(--jugamos-rosa);
  text-decoration: none;
}

.jugamos-nav-enlaces .material-icons {
  font-size: 1.1rem;
  color: var(--jugamos-rosa);
}

@media (max-width: 767px) {
  .jugamos-nav-enlaces {
    display: none;
  }
}

@media (min-width: 768px) {
  #top-menu > #lnk-la-tienda,
  #top-menu > #lnk-contacto,
  #top-menu > #lnk-our-store,
  #top-menu > #lnk-contact {
    display: none;
  }
}

/* "Categorías": solo las categorías principales, en columnas (sin el tercer nivel ni los +/- del móvil) */
#top-menu > #category-2 .top-menu[data-depth="2"],
#top-menu > #category-2 .top-menu[data-depth="1"] > li > a .collapse-icons {
  display: none;
}

@media (min-width: 768px) {
  #top-menu > #category-2 .sub-menu ul[data-depth="1"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0 1.5rem;
    margin: 1rem 1.25rem;
  }

  #top-menu > #category-2 .sub-menu ul[data-depth="1"] > li {
    float: none;
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
  }

  #top-menu > #category-2 .sub-menu a.dropdown-submenu {
    padding: 0.5rem 0.25rem;
    font-size: 0.9rem;
    line-height: 1.3;
    text-transform: none;
    white-space: normal; /* Classic: nowrap; los nombres largos se salían de su columna y se pisaban */
  }
}

/* Al pasar el ratón: las entradas del menú son .dropdown-item, que arriba se pinta con fondo rosa; el texto también
   era rosa y no se veía. Primer nivel: fondo rosa y texto blanco (también mientras el desplegable está abierto).
   Desplegable: fondo gris claro y texto rosa. */
body #header #top-menu > li > a[data-depth="0"]:hover,
body #header #top-menu > li > a[data-depth="0"]:focus,
body #header #top-menu > li:hover > a[data-depth="0"] {
  background-color: var(--jugamos-rosa);
  color: #fff;
}

body #header #top-menu .sub-menu .dropdown-item:hover,
body #header #top-menu .sub-menu .dropdown-item:focus {
  background-color: #f6f6f6;
  color: var(--jugamos-rosa);
}

/* Fuera de stock, discreto (08/11/2026, dev/sin-imagen.sh): en los listados, etiqueta pequeña gris en vez del
   rótulo rosa en mayúsculas; en la ficha, texto gris en vez del recuadro rojo de alerta. Las demás etiquetas
   (nuevo, oferta, -5%) siguen igual. */
.product-flags li.product-flag.out_of_stock {
  min-height: 0;
  padding: 0.2rem 0.5rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #ddd;
  box-shadow: none;
  color: #8a8a8a;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: none;
}

#product-availability .alert-danger {
  margin: 0.5rem 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: #8a8a8a;
  font-size: 0.9rem;
  font-weight: 600;
}

#product-availability .alert-danger .alert-content-wrapper {
  align-items: center;
  gap: 0.4rem;
}

#product-availability .alert-danger .material-icons {
  font-size: 1.1rem;
  color: #b0b0b0;
}

/* reCAPTCHA (en la 1.6 había un margen propio en global.css) */
.g-recaptcha {
  margin: 1rem 0;
}