/* La ficha nueva del sitio Baison (2026-10-11; entrega 5 de la tienda nueva, filas 324 y 327 de PROYECTO_ODOO).
 *
 * El aspecto es el del detalle de la vista previa que aprobó el dueño (su `catalog.css`, reglas `.shop-detail-*`), llevado
 * al marcado de Odoo: la ficha sigue siendo `website_sale.product`, con su carrusel, sus migas, su «Cotizar por
 * WhatsApp», sus documentos y su descripción al final. Esta hoja se enlaza solo desde la ficha (views/ficha_nueva.xml)
 * y todo cuelga de `.baison-ficha`, la clase que esa vista le pone a `#wrap`: no alcanza a la tienda, a la portada ni a
 * la ficha de otro sitio.
 *
 * Sin JavaScript y sin precios. La letra es la del sitio (Poppins en producción): acá no se declara ninguna.
 */
.baison-ficha { --bf-linea: #e2e6ed; --bf-tenue: #657087; --bf-azul: #011651; --bf-amarillo: #f7db00; }
.baison-ficha #product_detail a:focus-visible, .baison-ficha #product_detail button:focus-visible {
  outline: 3px solid #376bd1; outline-offset: 4px; }

/* «Volver a los resultados», arriba de las migas (18.0.1.27.0). Un enlace de 44 px de alto, para el dedo. */
.baison-ficha .bf-volver { margin: 0 0 4px; font-size: 13px; line-height: 1.4; }
.baison-ficha .bf-volver a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  color: var(--bf-azul); font-weight: 600; text-decoration: none; }
.baison-ficha .bf-volver a:hover { color: var(--bf-azul); text-decoration: underline; text-underline-offset: 4px; }

/* Las migas de Odoo, con «Inicio» */
.baison-ficha .o_wsale_breadcrumb { color: var(--bf-tenue); font-size: 12px; line-height: 1.6; }
.baison-ficha .o_wsale_breadcrumb a { text-underline-offset: 4px; }
.baison-ficha .o_wsale_breadcrumb .breadcrumb-item.active { color: var(--bf-tenue); overflow-wrap: anywhere; }

/* Dos columnas iguales: la foto y el texto. Son las dos columnas de Odoo (`.row` con dos `col-lg-*`), puestas en una
   fila flexible para que el corte a una columna sea el del diseño (760 px) y no el de Bootstrap (992 px). Arriba y no
   al centro: la descripción va al final de la columna del texto y puede ser larga. */
.baison-ficha #product_detail_main { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 65px; margin: 0;
  padding: 22px 0 40px; }
.baison-ficha #product_detail_main > .o_wsale_product_images,
.baison-ficha #product_detail_main > #product_details { flex: 1 1 0; width: auto; max-width: none; min-width: 0;
  margin-top: 0 !important; padding: 0; }
/* Una palabra que no entra en la columna (un código largo, una dirección en la descripción) se corta en vez de
   ensanchar la página. `break-word` y no `anywhere`: no cambia el ancho mínimo de una tabla de la descripción. */
.baison-ficha #product_details { overflow-wrap: break-word; }

/* La foto, entera dentro de un marco. El alto fijo reserva el lugar antes de que llegue la imagen (CLS): reemplaza a la
   caja cuadrada que la ficha traía por debajo de 992 px. */
.baison-ficha #o-carousel-product .o_carousel_product_outer { padding: 34px; border: 1px solid var(--bf-linea);
  border-radius: 4px; background: #fff; }
.baison-ficha #o-carousel-product.o_carousel_not_single .o_carousel_product_outer { aspect-ratio: auto; }
.baison-ficha #o-carousel-product .carousel-item { height: 410px !important; aspect-ratio: auto; }
.baison-ficha #o-carousel-product .carousel-item img.product_detail_img { max-height: 100% !important;
  object-fit: contain; }

/* La marca (la etiqueta de grupo «marca» del producto) y el nombre */
.baison-ficha .bf-marca { margin: 0 0 14px; color: var(--bf-tenue); font-size: 12px; font-weight: 600; line-height: 1.4;
  letter-spacing: .095em; text-transform: uppercase; }
.baison-ficha #product_details > h1 { max-width: 100%; margin: 0 0 22px; color: var(--bf-azul);
  font-size: clamp(28px, 3vw, 42px); font-weight: 700; line-height: 1.15; letter-spacing: -.035em;
  overflow-wrap: anywhere; }

/* Los usos del producto, debajo del nombre (18.0.1.27.0): una etiqueta por uso, que enlaza a la tienda filtrada por
   ese uso. La etiqueta es chica, como en el diseño, con el borde de los botones de los documentos (se tiene que ver
   sobre un fondo blanco y sobre uno gris). El toque no es chico: el `::after` le da 44 px de alto al enlace, y la
   separación entre renglones evita que dos se pisen. Un nombre que no entra baja de renglón dentro de su etiqueta,
   sin ensanchar la página: por eso el `overflow-wrap: anywhere` propio. El `break-word` que hereda de
   `#product_details` no alcanza, porque no achica el ancho mínimo del enlace (a 320 px la página desbordaba). */
.baison-ficha .bf-usos { display: flex; flex-wrap: wrap; gap: 14px 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.baison-ficha .bf-usos li { display: flex; max-width: 100%; min-width: 0; }
.baison-ficha .bf-usos a { position: relative; display: inline-flex; align-items: center; min-height: 30px;
  max-width: 100%; padding: 4px 11px; border: 1px solid #c7cfdd; border-radius: 3px; background: #fff;
  color: var(--bf-azul); font-size: 12px; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.baison-ficha .bf-usos a::after { content: ""; position: absolute; top: -8px; right: -1px; bottom: -8px; left: -1px; }
.baison-ficha .bf-usos a:hover, .baison-ficha .bf-usos a:focus-visible { border-color: #8894ac;
  text-decoration: underline; text-underline-offset: 3px; }

/* «Cotizar por WhatsApp»: el botón principal, amarillo. Es el mismo <a> de siempre, con su marca de medición.
   18.0.1.27.0 (2026-10-12, fila 336 de PROYECTO_ODOO, punto 4; decisión del dueño): la letra mide 15 px y el ícono 18
   (eran 12 y 16), en todos los anchos, como el «Cotizar» de la tarjeta desde la 18.0.1.25.0. El botón sigue de 48 px
   de alto o más, en una línea, con su color y su peso. */
.baison-ficha #baison_cotizar_wrap { max-width: 100%; margin-bottom: 0 !important; }
.baison-ficha #baison_cotizar_wrap > a { display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; max-width: 100%; padding: 12px 19px; border: 1px solid var(--bf-amarillo); border-radius: 3px;
  background: var(--bf-amarillo); box-shadow: none; color: var(--bf-azul); font-size: 15px; font-weight: 600;
  line-height: 1.4; }
.baison-ficha #baison_cotizar_wrap > a:hover, .baison-ficha #baison_cotizar_wrap > a:focus-visible {
  border-color: #e9cf00; background: #e9cf00; color: var(--bf-azul); }
.baison-ficha #baison_cotizar_wrap > a .fa-whatsapp { font-size: 18px; }

/* Los documentos: cada ficha técnica, un botón con borde. Son los enlaces de Odoo, con su marca de medición. */
.baison-ficha #product_documents { margin: 12px 0 0 !important; }
.baison-ficha #product_documents > h5 { margin: 0 0 8px; color: var(--bf-tenue); font-size: 11px; font-weight: 600;
  line-height: 1.4; letter-spacing: .095em; text-transform: uppercase; }
.baison-ficha #product_documents > div + div { margin-top: 8px; }
.baison-ficha #product_documents a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  max-width: 100%; padding: 12px 19px; border: 1px solid #c7cfdd; border-radius: 3px; background: #fff;
  color: var(--bf-azul); font-size: 12px; font-weight: 600; line-height: 1.4; text-decoration: none;
  overflow-wrap: anywhere; }
.baison-ficha #product_documents a:hover { border-color: #8894ac; text-decoration: none; }

/* Las dos notas del diseño */
.baison-ficha .bf-sin-ficha { margin: 14px 0 0; color: var(--bf-azul); font-size: 12px; line-height: 1.75; }
.baison-ficha .bf-nota { margin: 22px 0 0; color: var(--bf-tenue); font-size: 12px; line-height: 1.75; }

@media (max-width: 1100px) {
  .baison-ficha #product_detail_main { gap: 35px; }
}

/* El celular: una columna, con la foto arriba */
@media (max-width: 760px) {
  .baison-ficha #product_detail_main { flex-direction: column; gap: 30px; padding-top: 0; }
  .baison-ficha #product_detail_main > .o_wsale_product_images,
  .baison-ficha #product_detail_main > #product_details { flex: none; width: 100%; }
  .baison-ficha #o-carousel-product .o_carousel_product_outer { padding: 25px; }
  .baison-ficha #o-carousel-product .carousel-item { height: 320px !important; }
  .baison-ficha #product_details > h1 { max-width: 650px; font-size: 32px; }
}
@media (max-width: 520px) {
  .baison-ficha #baison_cotizar_wrap, .baison-ficha #baison_cotizar_wrap > a { width: 100%; }
  .baison-ficha #product_documents > div, .baison-ficha #product_documents a { width: 100%; }
  .baison-ficha #product_documents a { justify-content: center; }
}
@media (max-width: 420px) {
  .baison-ficha #o-carousel-product .carousel-item { height: 260px !important; }
  .baison-ficha #product_details > h1 { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .baison-ficha #product_detail *, .baison-ficha #product_detail *::before, .baison-ficha #product_detail *::after {
    animation: none !important; transition: none !important; }
}