/* Fanor · Product · Compatibility
 *
 * Anatomía del badge de compatibilidad. Las medidas de aquí son el punto de
 * partida (las mismas que declaran los controles del widget), para que se vea
 * bien antes de que Elementor regenere el CSS de la página; todo lo demás lo
 * escriben los controles.
 *
 * ── Los colores viven en el MODIFICADOR de cada estado ────────────────────
 * Ni en el elemento base ni detrás de variables: cada estado escribe su color
 * en su propia clase (`--verify`, `--compatible`, `--incompatible`). Eso hace
 * dos cosas a la vez. Una: cuando el visitante cambia de vehículo, el JS
 * compartido solo intercambia esa clase y los colores se repintan solos. Y dos
 * —la importante para quien diseña—: los controles de Elementor escriben
 * exactamente estas mismas propiedades sobre estos mismos selectores, así que
 * lo que se ve en el editor y lo que se ve en la tienda salen del mismo sitio.
 * Antes esto eran variables (`--pc-bg`) que solo el CSS sabía convertir en
 * color, y el widget dependía de dos piezas en lugar de una.
 *
 * ── Nada de anchos fijos ───────────────────────────────────────────────────
 * La auditoría midió 170px en escritorio, 208 en tablet y 152 en móvil, pero
 * esos son los anchos de la tarjeta donde se midió, no del componente. Aquí va
 * width:100% y la altura la marca el texto: el mismo widget tiene que servir en
 * una card pequeña, en una grande y en la ficha de producto.
 */

.fanor-product-compatibility {
  --pc-gap: 10px;
  --pc-icon: 18px;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--pc-gap);

  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  padding: 8px 10px;

  border-bottom-style: solid;
  border-bottom-width: 3px;
  border-radius: 0;

  color: #333333;
  /* Hereda la tipografía de la tarjeta en lugar de imponer una familia: así el
     badge usa la fuente del tema (Aileron en este sitio) y sigue respondiendo a
     las Fuentes Globales de Elementor. */
  font-family: inherit;
  font-size: 13px;
  line-height: 17px;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
}

/* Los tres estados, con los valores auditados escritos como propiedades reales.
   Son los MISMOS que traen por defecto los controles: esto solo existe para que
   el badge se vea bien antes de que Elementor genere el CSS de la página. En
   cuanto el editor toca un color, gana el suyo (mayor especificidad). */
.fanor-product-compatibility--verify {
  background-color: #FFFCF2;
  border-bottom-color: #FFC801;
}

.fanor-product-compatibility--verify .fanor-product-compatibility__label {
  color: #333333;
}

.fanor-product-compatibility--compatible {
  background-color: #F3F8F2;
  border-bottom-color: #1F7400;
}

.fanor-product-compatibility--compatible .fanor-product-compatibility__label {
  color: #157400;
}

.fanor-product-compatibility--incompatible {
  background-color: #FBF2F2;
  border-bottom-color: #B30000;
}

.fanor-product-compatibility--incompatible .fanor-product-compatibility__label {
  color: #D52B1E;
}

/* ── Ícono ───────────────────────────────────────────────────────────────
   `flex: none` evita que se encoja cuando el texto ocupa dos líneas. El ancho
   es automático porque los SVG del diseño no son cuadrados: el de «compatible»
   es un coche con un check al lado, y forzarle un cuadrado lo deforma. */
.fanor-product-compatibility__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  line-height: 0;
}

.fanor-product-compatibility__icon svg {
  display: block;
  height: var(--pc-icon);
  width: auto;
}

/* ── Texto ───────────────────────────────────────────────────────────────
   `min-width: 0` es lo que permite que el texto se parta dentro de un flex en
   vez de desbordar la tarjeta hacia la derecha. */
.fanor-product-compatibility__text {
  min-width: 0;
  text-align: inherit;
}

/* AQUÍ NO VA `display: -webkit-box`.
   Es el modo que hace falta para recortar por número de líneas, pero apila los
   hijos y se COME LOS ESPACIOS entre ellos: con él puesto de base, «Verifica» y
   «si le queda…» salían pegados («Verificasi») y la maqueta se desarmaba. Ahora
   lo escribe el control «Máximo de líneas» y solo cuando se pide un límite. */

/* El WYSIWYG envuelve lo que se escribe en <p>. Dentro del badge tiene que
   comportarse como texto corrido, no como bloque con margen. */
.fanor-product-compatibility__text p {
  display: inline;
  margin: 0;
}

.fanor-product-compatibility__vehicle {
  color: #333333;
  font-weight: 400;
  text-decoration: underline;
}

/* Cuando solo el texto es pulsable, el enlace va dentro y hereda el aspecto. */
.fanor-product-compatibility__trigger {
  color: inherit;
  text-decoration: inherit;
}

/* ── Foco de teclado ─────────────────────────────────────────────────────
   No se quita el contorno: se reemplaza por uno visible y configurable. */
.fanor-product-compatibility:focus-visible {
  outline: 2px solid #CC0100;
  outline-offset: 2px;
}

/* ── Universal ───────────────────────────────────────────────────────────
   En el sitio no se pinta nada, pero Elementor sigue imprimiendo el envoltorio
   del widget: si la tarjeta le puso margen, quedaría un hueco donde no hay
   badge. Colapsarlo cuando está vacío es lo que evita ese salto. Van las dos
   formas porque Elementor puede o no generar `.elementor-widget-container`
   según tenga activo el DOM optimizado. */
.elementor-widget-fanor_product_compatibility:empty,
.elementor-widget-fanor_product_compatibility > .elementor-widget-container:empty {
  display: none;
}

/* Este cartel solo existe dentro del editor, para que el widget se pueda
   seguir seleccionando y configurando aunque no dibuje nada. */
.fanor-product-compatibility__editor-note {
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  color: #6B6B6B;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}