/* La tienda del sitio METALPROTEC: la fila de marcas y el panel «Filtrar catálogo» (mp_web_qweb 18.0.1.20.0, 2026-10-19;
 * fila 365 de PROYECTO_ODOO, partes s1 y s2, el panel del celular; D9 del dueño: «como BAISON»).
 *
 * Es lo de la tienda nueva de BAISON (alfa_web_qweb/static/src/css/tienda.css) que hace falta acá, portado: el panel, las
 * marcas y las dos columnas, con los colores de METALPROTEC (el azul #063453 y el celeste #009cbb del paquete). Se enlaza
 * solo desde views/tienda_panel_mp.xml, y todo cuelga de `.mp-tienda`, la clase que esa vista le pone a `#wrap`: no hay
 * nada que llegue al sitio de BAISON. No va en mp_web.css, que en la tienda llega recién antes del pie (y vive en un
 * @scope de .mp-web-page). El nombre de esta hoja no contiene «tienda.css» a propósito: es lo que busca el verificador de
 * la tienda de BAISON.
 *
 * Todo son enlaces y no hay JavaScript. Los colores del texto, sobre el blanco y los fondos del panel, de 4,9 a 1 o más.
 */
.mp-tienda { --mp-azul: #063453; --mp-texto: #3d5160; --mp-tenue: #586c78; --mp-linea: #dce5e9; --mp-suave: #f0f7f9;
  --mp-elegido: #e6f5f8; --mp-acento: #009cbb; }
.mp-tienda .mp-filtros a:focus-visible, .mp-tienda .mp-marcas a:focus-visible, .mp-tienda .mp-usos > summary:focus-visible,
.mp-tienda .mp-ver-todo:focus-visible { outline: 3px solid #008fc7; outline-offset: 3px; }

/* Dos columnas: el panel y los resultados. Las categorías propias de Odoo no se usan: el costado
   (`#products_grid_before`), su carrusel de arriba (`o_wsale_filmstip_container`, «Categories in top-nav», la opción que
   Odoo trae prendida) y el botón de su offcanvas. Quedan detrás del panel, como en BAISON, con la opción que tenga el sitio. */
.mp-tienda .o_wsale_products_main_row { display: grid; grid-template-columns: 224px minmax(0, 1fr); align-items: start;
  gap: 34px; margin: 0; padding-top: 24px; border-top: 1px solid var(--mp-linea); }
.mp-tienda #products_grid_before, .mp-tienda .o_wsale_filmstip_container,
.mp-tienda .products_header > button[data-bs-toggle="offcanvas"] { display: none !important; }
.mp-tienda #products_grid { width: auto; max-width: none; min-width: 0; padding: 0; flex: none; }
/* La grilla, tres por fila al lado del panel (dos hasta 1100 px). Solo en la cuadrícula: la vista de lista de Odoo queda
   como es. `grid-column: auto` le gana al ancho por columnas de Odoo (`g-col-lg-3`…), pensado para 12 columnas. */
.mp-tienda #products_grid:not(.o_wsale_layout_list) #o_wsale_products_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mp-tienda #products_grid:not(.o_wsale_layout_list) #o_wsale_products_grid > .oe_product { grid-column: auto !important; }

/* El panel «Filtrar catálogo» */
.mp-tienda .mp-filtros { position: relative; min-width: 0; margin: 0; padding: 0 22px 0 0; border-right: 1px solid var(--mp-linea); }
.mp-tienda .mp-filtros-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px;
  margin: 0 0 18px; color: var(--mp-azul); font-size: 15px; font-weight: 700; line-height: 1.3; }
.mp-tienda .mp-leyenda { display: block; margin: 0 0 12px; color: var(--mp-azul); font-size: 12px; font-weight: 600; }
.mp-tienda #mp_filtros_categorias { display: grid; gap: 3px; margin: 0 0 26px; }
.mp-tienda .mp-cat { display: flex; align-items: center; min-width: 0; border-radius: 3px; }
.mp-tienda .mp-cat > a, .mp-tienda .mp-cat > .mp-cat-vacia { display: flex; flex: 1; align-items: center; min-width: 0;
  min-height: 44px; padding: 10px 6px 10px 12px; border-left: 3px solid transparent; color: var(--mp-texto); font-size: 12px;
  font-weight: 400; line-height: 1.5; text-decoration: none; white-space: normal; overflow-wrap: anywhere; }
.mp-tienda .mp-cat small { flex: 0 0 auto; padding-right: 10px; color: var(--mp-tenue); font-size: 11px; }
.mp-tienda .mp-cat:hover { background: var(--mp-suave); }
.mp-tienda .mp-cat:hover > a { color: var(--mp-azul); }
.mp-tienda .mp-cat--on, .mp-tienda .mp-cat--on:hover { background: var(--mp-elegido); }
.mp-tienda .mp-cat--on > a { border-left-color: var(--mp-acento); color: var(--mp-azul); font-weight: 600; }
.mp-tienda .mp-cat--vacia, .mp-tienda .mp-cat--vacia:hover { background: transparent; }
.mp-tienda .mp-cat--vacia > .mp-cat-vacia { color: #8a9aa5; cursor: default; }
.mp-tienda .mp-cat--vacia small { opacity: .7; }
/* «¿Qué necesitas resolver?»: los usos, en un `details` */
.mp-tienda .mp-usos { margin: 0 0 26px; }
.mp-tienda .mp-usos > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px;
  color: var(--mp-azul); font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.mp-tienda .mp-usos > summary::-webkit-details-marker { display: none; }
.mp-tienda .mp-usos > summary::after { content: "+"; font-size: 18px; font-weight: 400; line-height: 1; }
.mp-tienda .mp-usos[open] > summary::after { content: "\2212"; }
.mp-tienda #mp_filtro_usos { display: grid; gap: 3px; margin-top: 6px; }
/* El orden, solo cuando Odoo esconde su desplegable (por debajo de 992 px) */
.mp-tienda .mp-orden-movil { display: none; }
.mp-tienda .mp-orden-movil a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 14px;
  color: var(--mp-texto); font-size: 12px; text-decoration: none; }
.mp-tienda .mp-orden-movil a.mp-orden--on { color: var(--mp-azul); font-weight: 600; text-decoration: underline;
  text-underline-offset: 4px; }
.mp-tienda .mp-limpiar { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 0; color: var(--mp-tenue);
  font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.mp-tienda .mp-limpiar:hover { color: var(--mp-azul); }

/* Las marcas, con logo y cantidad */
.mp-tienda .mp-marcas { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.mp-tienda .mp-marcas-titulo { flex: 0 0 auto; color: var(--mp-tenue); font-size: 12px; }
.mp-tienda .mp-marcas-lista { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.mp-tienda .mp-marca { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0;
  min-height: 68px; max-width: 100%; padding: 7px 10px; border: 1px solid var(--mp-linea); border-radius: 3px;
  background: #fff; color: var(--mp-texto); font-size: 11px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.mp-tienda .mp-marca small { flex: 0 0 auto; min-width: 2ch; color: var(--mp-tenue); font-size: 10px; font-weight: 400; }
.mp-tienda .mp-marca-logo { display: flex; flex: 0 0 72px; width: 72px; height: 52px; border-radius: 2px; overflow: hidden; }
.mp-tienda .mp-marca-logo img { display: block; width: 72px; height: 52px; }
.mp-tienda .mp-marca-todas { display: flex; align-items: center; justify-content: center; width: 72px; height: 52px;
  text-align: center; }
/* CPP Poseidón y CPP Marino: el logo de CPP y, al lado, el nombre de la línea */
.mp-tienda .mp-marca-linea { color: var(--mp-azul); font-size: 12px; font-weight: 700; white-space: nowrap; }
.mp-tienda .mp-marca:hover { border-color: #8aa3b3; color: var(--mp-azul); }
.mp-tienda .mp-marca--on, .mp-tienda .mp-marca--on:hover { border-color: var(--mp-azul); background: var(--mp-elegido);
  color: var(--mp-azul); box-shadow: inset 0 0 0 2px var(--mp-acento); }

/* Una combinación sin productos: la salida al catálogo entero */
.mp-tienda .mp-sin-combinacion-salida { margin: 20px 0 0; }
.mp-tienda .mp-ver-todo { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 12px 18px; border-radius: 3px; background: var(--mp-azul); color: #fff; font-size: 13px; font-weight: 600;
  text-decoration: none; }
.mp-tienda .mp-ver-todo:hover { background: #0a4a73; color: #fff; }

@media (max-width: 1100px) {
  .mp-tienda .o_wsale_products_main_row { grid-template-columns: 204px minmax(0, 1fr); gap: 26px; }
  .mp-tienda .mp-filtros { padding-right: 17px; }
  .mp-tienda #products_grid:not(.o_wsale_layout_list) #o_wsale_products_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-tienda .mp-marcas { align-items: flex-start; gap: 10px; }
  .mp-tienda .mp-marcas-titulo { padding-top: 13px; }
}
@media (max-width: 991.98px) {
  .mp-tienda .mp-orden-movil { display: block; margin-bottom: 12px; }
}
/* El celular (s2): una columna, y el panel cerrado hasta que se toca «Filtrar catálogo». Sin JavaScript: una casilla
   (`#mp-abrir`) y su `label`, como el `#bt-abrir` de BAISON. En escritorio la casilla no se dibuja ni recibe el foco, y
   el `label` es solo el título del panel. Abierto, las categorías van en dos columnas (una hasta 420 px), y el orden
   queda a la vista. La fila de marcas va fuera del panel, en un renglón que se desplaza si no entra. */
.mp-tienda .mp-abrir { display: none; }
@media (max-width: 760px) {
  .mp-tienda .o_wsale_products_main_row { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 14px; }
  .mp-tienda .mp-filtros { padding: 0; border: 1px solid #d3dee4; border-radius: 3px; }
  .mp-tienda .mp-abrir { display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip-path: inset(50%); }
  .mp-tienda .mp-filtros-titulo { min-height: 50px; margin: 0; padding: 13px 16px; font-size: 13px; cursor: pointer; }
  .mp-tienda .mp-filtros-titulo::after { content: "+"; margin-left: auto; color: var(--mp-azul); font-size: 22px;
    font-weight: 400; line-height: 1; }
  .mp-tienda .mp-abrir:checked + .mp-filtros-titulo::after { content: "\2212"; }
  .mp-tienda .mp-abrir:focus-visible + .mp-filtros-titulo { outline: 3px solid #008fc7; outline-offset: 3px; }
  .mp-tienda .mp-filtros-cuerpo { display: none; padding: 16px; border-top: 1px solid var(--mp-linea); }
  .mp-tienda .mp-abrir:checked ~ .mp-filtros-cuerpo { display: block; }
  .mp-tienda #mp_filtros_categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 10px; margin-bottom: 22px; }
  .mp-tienda .mp-marcas { display: block; margin-bottom: 16px; }
  .mp-tienda .mp-marcas-titulo { display: block; margin-bottom: 8px; padding: 0; font-size: 11px; }
  .mp-tienda .mp-marcas-lista { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
  .mp-tienda .mp-marca { flex: 0 0 auto; }
}
@media (max-width: 420px) {
  .mp-tienda #mp_filtros_categorias { grid-template-columns: minmax(0, 1fr); }
  .mp-tienda .mp-marca { gap: 5px; padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-tienda .mp-filtros *, .mp-tienda .mp-marcas * { transition: none !important; }
}