/* k2 (mp_web_qweb 18.0.1.20.0, 2026-10-19; fila 365 de PROYECTO_ODOO): la calculadora de cantidad de la ficha de
   METALPROTEC (views/calculadora_ficha_mp.xml). Hoja propia, enlazada desde la sección y colgada de .mp-calc: la ficha
   recibe mp_web.css recién antes del pie, y esa hoja vive en @scope (.mp-web-page). Como la página del Jet 62 ZP del
   paquete (D1): una línea arriba y sin recuadro; la superficie y las capas lado a lado, y el espesor a lo ancho con su
   rango. El título, el botón y el resultado en el azul de METALPROTEC (#063453, 12,9 a 1 sobre blanco); el «Cotizar», un
   botón verde con la letra blanca (5,5 a 1), como el del paquete; el aviso de error, rojo (6,9 a 1 sobre el fondo del
   resultado). Campos y botones de 46 px de alto. En el celular, los botones a lo ancho; con border-box escrito acá, el
   ancho no depende de que la página lo traiga (Bootstrap sí, la maqueta del 19-10 no: el «Cotizar» desbordaba 16 px). */
.mp-calc { margin: 24px 0 12px; padding: 20px 0 0; border-top: 1px solid #dce2ed; color: #213657; }
.mp-calc__titulo { margin: 0 0 12px; color: #063453; font-size: 19px; font-weight: 700; line-height: 1.35; }
.mp-calc__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mp-calc__campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; color: #142f53; font-size: 13px;
  font-weight: 600; }
.mp-calc__campo--ancho { grid-column: 1 / -1; }
.mp-calc__campo input { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid #b9c6d8; border-radius: 6px; background: #fff; color: #213657; font-size: 15px; font-weight: 400;
  line-height: 1.35; }
.mp-calc__campo input[aria-invalid="true"] { border-color: #a32323; }
.mp-calc__ayuda { color: #59697f; font-size: 12px; font-weight: 400; line-height: 1.5; }
.mp-calc__nota { margin: 12px 0 0; color: #526078; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.mp-calc__nota a { color: #063453; text-decoration: underline; text-underline-offset: 3px; }
.mp-calc__acciones { margin-top: 14px; }
.mp-calc-boton { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 46px; padding: 10px 20px; border: 0; border-radius: 6px; background: #063453; color: #fff; font-size: 14px;
  font-weight: 700; cursor: pointer; }
.mp-calc-boton:hover { background: #0b4a75; }
.mp-calc-resultado:not(:empty) { margin-top: 14px; padding: 14px 16px; border: 1px solid #c9d6e6; border-radius: 8px;
  background: #f3f7fb; }
.mp-calc-necesitas { margin: 0; color: #063453; font-size: 18px; font-weight: 700; line-height: 1.4;
  overflow-wrap: anywhere; }
.mp-calc-detalle { margin: 6px 0 0; color: #37475f; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.mp-calc-aviso { margin: 0; color: #a32323; font-size: 13px; line-height: 1.5; }
.mp-calc__cotizar:not(:empty) { margin-top: 12px; }
.mp-calc-wa { display: inline-flex; align-items: center; justify-content: center; gap: 9px; box-sizing: border-box;
  min-height: 46px; padding: 10px 20px; border-radius: 6px; background: #137944; color: #fff; font-size: 14px;
  font-weight: 700; text-decoration: none; }
.mp-calc-wa:hover, .mp-calc-wa:focus-visible { background: #0f6337; color: #fff; text-decoration: none; }
.mp-calc-wa svg { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }
.mp-calc input:focus-visible, .mp-calc button:focus-visible, .mp-calc a:focus-visible { outline: 3px solid #0c689e;
  outline-offset: 2px; }
@media (max-width: 575.98px) {
  .mp-calc__campos { gap: 12px; }
  .mp-calc__campo input { font-size: 16px; }
  .mp-calc-boton, .mp-calc-wa { width: 100%; }
}