/**
 * Favoritos e insignia de plan — SOS Jurídico.
 *
 * BLINDAJE: lo ÚNICO que se hereda del tema es font-family. El tema alcanza
 * estos elementos con selectores como ".entry-content button", más
 * específicos que una sola clase, así que la clase va DOBLADA — que sube la
 * especificidad sin llenar el archivo de !important — y se fuerza solo lo
 * que el tema suele imponer.
 *
 * TODO EN PÍXELES: un rem depende del tamaño base que fije el tema, y el
 * mismo código producía medidas distintas en cada sitio.
 */
/* WordPress envuelve el shortcode en un <p> cuando está suelto en el
   contenido, y el tema le da margen. El botón en sí ya va a cero, pero ese
   párrafo intermedio es el que separa. Se anula sin tocar los demás <p>. */
p:has(> button.sjf-btn),
p:has(> span.sjf-plan){
	margin:0 !important;
	padding:0 !important;
	line-height:0 !important;
}

button.sjf-btn.sjf-btn,
button.sjf-btn.sjf-btn *,
span.sjf-plan.sjf-plan,
span.sjf-plan.sjf-plan *{
	box-sizing:border-box !important;
	margin:0 !important;
	font-family:inherit !important;
	font-style:normal !important;
	text-transform:none !important;
	text-decoration:none !important;
	text-shadow:none !important;
	background-image:none !important;
	box-shadow:none !important;
	float:none !important;
	max-width:none !important;
	min-width:0 !important;
	min-height:0 !important;
	/* Color y espaciado heredados del elemento raíz, no del tema: cualquier
	   span interno es alcanzable por ".entry-content span". */
	color:inherit !important;
	letter-spacing:inherit !important;
	word-spacing:normal !important;
	font-size:inherit !important;
	font-weight:inherit !important;
	font-style:normal !important;
	text-indent:0 !important;
}
/* El borde se anula solo en los DESCENDIENTES: en el reseteo general borraba
   también el del propio botón. */
button.sjf-btn.sjf-btn *,
span.sjf-plan.sjf-plan *{
	border:0 !important;
	outline:0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   BASE COMÚN — botón e insignia
   Todo en PÍXELES: un rem depende del tamaño base que fije el tema, y
   el mismo código producía medidas distintas en cada sitio.
   Proporción: ícono 18px sobre texto 13px (ratio 1.38) y alto 36px.
   El ícono ocupa la mitad del alto, que es lo que deja respirar a la
   píldora en vez de apretarla contra los bordes.
   ══════════════════════════════════════════════════════════════════ */button.sjf-btn.sjf-btn,
span.sjf-plan.sjf-plan{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:6px !important;
  height:36px !important;
  padding:0 15px !important;
  border-radius:99px !important;
  border:1px solid transparent !important;
  font-family:inherit;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1 !important;            /* clave: el texto se centra por flex, no por su caja */
  letter-spacing:.01em !important;
  white-space:nowrap;
  vertical-align:middle;
}button.sjf-btn.sjf-btn svg,
span.sjf-plan.sjf-plan svg{
  /* Proporción del dibujo recortado (214:208), no un cuadrado: con la caja
     cuadrada la estrella dejaba 1.15px de aire a cada lado y el relleno de la
     píldora se veía desigual. */
  width:18.5px;height:18px;
  flex:none;display:block;
}
/* El marcador es más alto que ancho: su caja se ajusta a esa forma en vez de
   ser cuadrada, para que no arrastre aire vacío a los lados. */button.sjf-btn.sjf-btn svg{width:14px;height:18px}
/* El texto va en su PROPIO elemento, nunca suelto: un nodo de texto en
   una caja flex arrastra los espacios del HTML y no se puede alinear. */button.sjf-btn.sjf-btn .sjf-tx,
span.sjf-plan.sjf-plan .sjf-tx{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  line-height:1 !important;
  letter-spacing:inherit !important;
  color:inherit !important;
  background:none !important;
  text-align:left !important;
}

/* ── Botón de guardar ───────────────────────────────────────────── */button.sjf-btn.sjf-btn{
  border:1px solid #ECEFF1 !important;
  outline:0 !important;
  background:#FFFFFF !important;
  color:#4F5B66 !important;
  cursor:pointer;
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1);
}
/* Los dos marcadores ocupan la MISMA celda y se cruzan con un fundido.
   Conmutarlos con display hacía que el relleno apareciera de golpe mientras
   el color aún iba a medio camino: se veía una mancha oscura que luego se
   volvía azul. */button.sjf-btn.sjf-btn .sjf-ico{display:grid;place-items:center;width:14px;height:18px;flex:none}button.sjf-btn.sjf-btn .sjf-ico svg{grid-area:1/1;width:14px;height:18px;display:block}button.sjf-btn.sjf-btn .sjf-ico .off{opacity:1;transition:opacity .16s cubic-bezier(.4,0,.2,1)}button.sjf-btn.sjf-btn .sjf-ico .on{
  opacity:0;transition:opacity .16s cubic-bezier(.4,0,.2,1);
  /* Color propio y fijo: no hereda el del botón, así nace ya en azul en vez
     de atravesar los tonos apagados de la transición. */
  color:#0F4C81 !important;
}button.sjf-btn.sjf-btn.is-on{border-color:#0F4C81 !important;color:#0F4C81 !important}button.sjf-btn.sjf-btn.is-on .sjf-ico .off{opacity:0 !important}button.sjf-btn.sjf-btn.is-on .sjf-ico .on{opacity:1 !important}
@media (hover:hover) and (pointer:fine){button.sjf-btn.sjf-btn:hover{border-color:#C9D4DE !important;color:#1A1A1A !important}button.sjf-btn.sjf-btn.is-on:hover{border-color:#0D3F6B !important;color:#0D3F6B !important}
}

/* ── Ancho fijo: el texto cambia de «Guardar» a «Guardada» y el botón
      se ensanchaba, empujando lo que tuviera al lado. Las dos palabras
      se apilan en la misma celda de rejilla, así el ancho es siempre el
      de la más larga y nada se mueve. ─────────────────────────────── */button.sjf-btn.sjf-btn .sjf-lbl{display:grid !important;align-items:center !important;justify-items:start !important}button.sjf-btn.sjf-btn .sjf-lbl > span{
  grid-area:1/1;
  line-height:1;
  /* Al inicio, no centrado: la caja mide lo que la palabra más larga, y
     centrar la corta dejaba espacio muerto que se leía como separación. */
  text-align:left;
  transition:opacity .18s cubic-bezier(.4,0,.2,1);
}button.sjf-btn.sjf-btn .sjf-lbl .l-off{opacity:1}button.sjf-btn.sjf-btn .sjf-lbl .l-on{opacity:0}button.sjf-btn.sjf-btn.is-on .l-off{opacity:0 !important}button.sjf-btn.sjf-btn.is-on .l-on{opacity:1 !important}

/* ── Confirmación al pulsar ─────────────────────────────────────────
   Un halo que nace en el marcador y se desvanece. No toca al ícono —así
   no hay que re-rasterizar el SVG, que era lo que lo veía pixelado— ni
   altera ninguna medida: es un pseudoelemento sobre el propio botón. */button.sjf-btn.sjf-btn{position:relative;overflow:hidden}button.sjf-btn.sjf-btn::after{
  content:"";position:absolute;left:15px;top:50%;
  width:26px;height:26px;margin:-13px 0 0 -6px;
  border-radius:50%;background:#0F4C81;
  opacity:0;transform:scale(.4);pointer-events:none;
}
@keyframes sjfHalo{0%{opacity:.18;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}
}button.sjf-btn.sjf-btn.sjf-marca::after{animation:sjfHalo .4s cubic-bezier(.4,0,.2,1)}

/* ── Insignia de plan ───────────────────────────────────────────── */span.sjf-plan.sjf-plan{
  background:rgba(15,76,129,.08) !important;
  color:#0F4C81 !important;
}

/* ── Solo ícono, para tarjetas ──────────────────────────────────── */button.sjf-btn.sjf-btn.solo{
  /* La caja mide justo lo que el dibujo: cualquier sobrante separaría el
     marcador del borde de la tarjeta. El área pulsable se amplía abajo con
     un pseudoelemento, que no ocupa sitio en la maquetación. */
  width:16px !important;
  height:20px !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#8A9299 !important;
  overflow:visible !important;
}
button.sjf-btn.sjf-btn.solo .sjf-ico{width:16px !important;height:20px !important}
button.sjf-btn.sjf-btn.solo .sjf-ico svg{width:16px !important;height:20px !important}
/* Área pulsable de 40x40 centrada, invisible y sin ocupar maquetación: así el
   marcador queda pegado al borde y el toque sigue siendo cómodo. */
button.sjf-btn.sjf-btn.solo::after{
  content:"" !important;display:block !important;
  position:absolute !important;
  top:-10px !important;right:-12px !important;bottom:-10px !important;left:-12px !important;
  width:auto !important;height:auto !important;
  margin:0 !important;
  background:none !important;border-radius:50% !important;
  opacity:1 !important;transform:none !important;animation:none !important;
  pointer-events:auto !important;
}button.sjf-btn.sjf-btn.solo .sjf-lbl{display:none}button.sjf-btn.sjf-btn.solo.is-on{border:0 !important;background:transparent !important;color:#0F4C81 !important}
@media (hover:hover) and (pointer:fine){button.sjf-btn.sjf-btn.solo:hover{border:0 !important;background:transparent !important;color:#0F4C81 !important}button.sjf-btn.sjf-btn.solo.is-on:hover{border:0 !important;background:transparent !important;color:#0D3F6B !important}
}button.sjf-btn.sjf-btn.tj{position:absolute;top:16px;right:16px}

/* ── Táctil: 44px, el mínimo para el dedo ───────────────────────── */@media (pointer:coarse){
  button.sjf-btn.sjf-btn,
  span.sjf-plan.sjf-plan{height:44px !important;padding:0 18px !important}button.sjf-btn.sjf-btn.solo{width:16px !important;height:20px !important;padding:0 !important}
}

@media (prefers-reduced-motion:reduce){button.sjf-btn.sjf-btn,
button.sjf-btn.sjf-btn .sjf-lbl > span{transition:none}button.sjf-btn.sjf-btn.sjf-marca svg{animation:none}
}


/* ══════════════════════════════════════════════════════════════════════
   INSIGNIA COMPACTA
   Para tarjetas de listado, donde la píldora normal de 36px roba sitio al
   título. Se reduce en proporción: alto, relleno, ícono y letra bajan a la
   vez, de modo que conserva su forma en vez de aplastarse.
   ══════════════════════════════════════════════════════════════════════ */
span.sjf-plan.sjf-plan.compacta{
	height:26px !important;
	min-height:26px !important;
	padding:0 10px !important;
	gap:5px !important;
	font-size:11.5px !important;
	border-radius:99px !important;
}
span.sjf-plan.sjf-plan.compacta svg{
	width:14.4px !important;
	height:14px !important;
}
span.sjf-plan.sjf-plan.compacta .sjf-tx{line-height:14px !important}
@media (pointer:coarse){
	/* No sube a 44px: no es pulsable, solo informa. */
	span.sjf-plan.sjf-plan.compacta{height:26px !important;padding:0 10px !important}
}

/* ── Insignia «Acceso libre» (1.52.1) ──────────────────────────────
   Verde del sitio, el de los estados positivos («Verificada»,
   «Disponible»): comunica acceso. El gris de la 1.52.0 parecía
   desactivado. Mismo formato que las de plan; solo cambia el color. */
span.sjf-plan.sjf-plan.sjf-libre{background:rgba(15,122,52,.1) !important;color:#0F7A34 !important}
span.sjf-plan.sjf-plan.sjf-libre svg,span.sjf-plan.sjf-plan.sjf-libre .sjf-tx{color:#0F7A34 !important;fill:currentColor !important}

/* ── Ventana para quien no tiene sesión (1.54.0) ────────────────────────
   El marcado y el guion existían desde el principio, pero esta hoja nunca
   trajo sus estilos: la ventana se abría sin diseño al final de la página
   y parecía que el botón no hacía nada. */
html.sjf-sin-scroll{overflow:hidden !important}

#sjfVelo{position:fixed !important;inset:0 !important;z-index:99999 !important;
 display:flex !important;align-items:center !important;justify-content:center !important;
 padding:20px !important;
 /* Mismo velo que los demás modales del plugin (.sosred-modal): Negro
    Tinta al 45 % con desenfoque de 6 px. */
 background:rgba(26,26,26,.45) !important;
 -webkit-backdrop-filter:blur(6px) !important;backdrop-filter:blur(6px) !important;
 animation:sjfVeloEntra .3s cubic-bezier(.4,0,.2,1) !important}
#sjfVelo[hidden]{display:none !important}

#sjfVelo .sjf-modal{position:relative !important;box-sizing:border-box !important;
 width:100% !important;max-width:400px !important;
 background:#FFFFFF !important;border-radius:12px !important;
 padding:32px 28px 28px !important;text-align:center !important;
 font-family:inherit !important;letter-spacing:.015em !important;
 box-shadow:0 18px 40px rgba(26,26,26,.18) !important;
 animation:sjfModalEntra .4s cubic-bezier(.4,0,.2,1) !important}

#sjfVelo .sjf-m-x{position:absolute !important;top:12px !important;right:12px !important;
 width:32px !important;height:32px !important;display:flex !important;
 align-items:center !important;justify-content:center !important;
 padding:0 !important;margin:0 !important;border:none !important;background:transparent !important;
 border-radius:8px !important;color:#4F5B66 !important;cursor:pointer !important;
 transition:all .3s cubic-bezier(.4,0,.2,1) !important}
#sjfVelo .sjf-m-x:hover{background:rgba(15,76,129,.08) !important;color:#0F4C81 !important}
#sjfVelo .sjf-m-x svg{width:18px !important;height:18px !important;display:block !important}

#sjfVelo .sjf-m-ic{width:52px !important;height:52px !important;margin:0 auto 16px !important;
 display:flex !important;align-items:center !important;justify-content:center !important;
 border-radius:50% !important;background:rgba(15,76,129,.08) !important;color:#0F4C81 !important}
#sjfVelo .sjf-m-ic svg{width:24px !important;height:24px !important;display:block !important}

#sjfVelo .sjf-m-t{margin:0 0 8px !important;font-size:1.15rem !important;font-weight:700 !important;
 line-height:1.35 !important;color:#1A1A1A !important;text-align:center !important}
#sjfVelo .sjf-m-d{margin:0 0 24px !important;font-size:.9rem !important;font-weight:400 !important;
 line-height:1.55 !important;color:#4F5B66 !important;text-align:center !important}

#sjfVelo .sjf-m-acc{display:flex !important;flex-direction:column !important;gap:10px !important}
#sjfVelo .sjf-m-btn{display:flex !important;align-items:center !important;justify-content:center !important;
 box-sizing:border-box !important;width:100% !important;padding:13px 20px !important;
 font-family:inherit !important;font-size:.95rem !important;font-weight:600 !important;
 letter-spacing:.02em !important;border-radius:8px !important;text-decoration:none !important;
 cursor:pointer !important;position:relative !important;overflow:hidden !important;
 transition:all .3s cubic-bezier(.4,0,.2,1) !important}

#sjfVelo .sjf-m-1{background:#0F4C81 !important;color:#FFFFFF !important;border:none !important}
#sjfVelo .sjf-m-1::after{content:'' !important;position:absolute !important;inset:0 !important;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent) !important;
 transform:translateX(-100%) !important;transition:transform .6s ease !important}
#sjfVelo .sjf-m-1:hover{background:#0D3F6B !important;transform:translateY(-1px) !important;
 box-shadow:0 6px 20px rgba(15,76,129,.3) !important}
#sjfVelo .sjf-m-1:hover::after{transform:translateX(100%) !important}

#sjfVelo .sjf-m-2{background:transparent !important;color:#1A1A1A !important;
 border:1px solid #ECEFF1 !important}
#sjfVelo .sjf-m-2:hover{border-color:#0F4C81 !important;color:#0F4C81 !important;
 background:rgba(15,76,129,.08) !important}

#sjfVelo .sjf-m-btn:focus-visible,#sjfVelo .sjf-m-x:focus-visible{
 outline:2px solid #0F4C81 !important;outline-offset:2px !important}

@keyframes sjfVeloEntra{from{opacity:0}to{opacity:1}}
@keyframes sjfModalEntra{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:600px){
 #sjfVelo .sjf-modal{padding:28px 20px 24px !important}
 #sjfVelo .sjf-m-t{font-size:1.05rem !important}
}
@media (prefers-reduced-motion:reduce){
 #sjfVelo,#sjfVelo .sjf-modal{animation:none !important}
 #sjfVelo .sjf-m-1:hover{transform:none !important}
 #sjfVelo .sjf-m-1::after{display:none !important}
}
#sjfVelo .sjf-modal:focus{outline:none !important}