/* casalia-cert.css — marcador del certificado energético de la ficha.
 *
 * CONTEXTO: el shortcode [eficiencia] (functions.php) pinta la escala
 * cee_range_template.jpg y superpone un <div class="select-X"> que marca la
 * letra. El CSS que dibujaba ese marcador vivía en el "Custom CSS" de Avada
 * (fusion_options) y SE PERDIÓ: la opción quedó a 0 bytes en algún momento
 * entre el 21/05/2026 (última copia, conservada en el transient
 * fusion_options-transients) y el 15/07/2026. Resultado visible: el cliente
 * elegía el certificado, pero la ficha mostraba la escala en blanco — parecía
 * que la selección no funcionaba.
 *
 * Se restaura AQUÍ, en el tema hijo, y no en el Custom CSS de Avada: ese campo
 * ya se vació una vez sin dejar rastro y no entra en ningún backup de ficheros.
 * En el tema va versionado, con backup y rollback.
 *
 * CORREGIDO respecto al original: F estaba en top:87% y G en top:100% (G se
 * salía de la imagen). La progresión real es de ~12,5% por fila.
 * Original íntegro en backups/cert-badge-predeploy-20260803/.
 */

.wrapper-cert {
  position: relative;
  display: inline-block;
  max-width: 465px;   /* ancho nativo de cee_range_template.jpg (465x450) */
  width: 100%;
}

.wrapper-cert > img {
  display: block;
  width: 100%;
  height: auto;
}

/* El marcador se dibuja con ::before sobre .wrapper-cert (que es el ancestro
   posicionado). Medidas en % para que acompañe a la imagen al escalar en móvil:
   105/465 = 22,6% de ancho · 40/450 = 8,9% de alto.
   OJO: se listan las 7 letras una a una en vez de usar [class^="select-"],
   porque ese selector también alcanzaría a .select-proceso ("En trámite"), que
   NO lleva escala — le pintaba una franja negra suelta al lado de la etiqueta. */
.wrapper-cert :is(.select-A, .select-B, .select-C, .select-D, .select-E, .select-F, .select-G)::before {
  content: "";
  position: absolute;
  right: 3%;
  width: 22.6%;
  height: 8.9%;
  background: #1a1614;
  border-radius: 5px;
  z-index: 5;
}

/* Una fila cada ~12,5%. El marcador va SIN letra dentro, a petición del cliente
   (2026-08-03): la fila ya la identifica la propia escala. */
.wrapper-cert .select-A::before { top: 12%; }
.wrapper-cert .select-B::before { top: 24.5%; }
.wrapper-cert .select-C::before { top: 37%; }
.wrapper-cert .select-D::before { top: 49.5%; }
.wrapper-cert .select-E::before { top: 62%; }
.wrapper-cert .select-F::before { top: 74.5%; }
.wrapper-cert .select-G::before { top: 87%; }

/* "En trámite" no lleva escala: es una etiqueta suelta (el shortcode no pinta
   la imagen en ese caso). Se mantiene el verde del original. */
.wrapper-cert .select-proceso {
  display: inline-block;
  background: #177a4e;
  color: #fff;
  padding: 10px 18px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 6px;
  min-width: 200px;
  text-align: center;
}