/* Botón «Volver»: una flecha «‹» gruesa con puntas redondeadas, dibujada solo con CSS (sin letras ni iconos).
   Uso: añadir la clase  lx-back  al botón o enlace  y  aria-label/title con el texto accesible.
   El color es el del texto del botón (currentColor), así se ve bien en páginas claras y oscuras.
   Variables opcionales: --lx-back-c (color), --lx-back-s (tamaño del área táctil). */
.lx-back,.lx-back.lx-back{position:relative!important;display:inline-block!important;flex:none!important;box-sizing:border-box!important;
  width:var(--lx-back-s,40px)!important;height:var(--lx-back-s,40px)!important;min-width:0!important;min-height:0!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;
  color:var(--lx-back-c,inherit)!important;font-size:0!important;line-height:0!important;text-decoration:none!important;overflow:visible!important;
  vertical-align:middle;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s ease,opacity .18s ease}
.lx-back>*{display:none!important}
.lx-back::before,.lx-back::after{content:"";position:absolute;left:calc(50% - 7px);top:calc(50% - 2px);width:14px;height:4px;border-radius:4px;
  background:currentColor;transform-origin:2px 50%;transition:background .18s ease}
.lx-back::before{transform:rotate(-45deg)}
.lx-back::after{transform:rotate(45deg)}
.lx-back:hover{transform:translateX(-2px)}
.lx-back:active{transform:translateX(-3px) scale(.94)}
.lx-back:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.lx-back:disabled,.lx-back[disabled]{opacity:.4;cursor:default;transform:none}

/* ===== Botón cerrar «X»: círculo gris suave con una X dibujada con CSS (sin letras ni iconos) =====
   Uso: clase  lx-x  en el botón  +  aria-label="Cerrar".  Toma el color del texto del botón (currentColor),
   así queda gris sobre fondos claros y blanco translúcido sobre visores/fondos oscuros.
   Variables opcionales: --lx-x-s (tamaño, 36px por defecto). */
:where(.lx-x){position:relative}
.lx-x,.lx-x.lx-x{display:inline-block!important;flex:none!important;box-sizing:border-box!important;
  width:var(--lx-x-s,36px)!important;height:var(--lx-x-s,36px)!important;min-width:0!important;min-height:0!important;
  padding:0!important;border:0!important;border-radius:50%!important;
  background:rgba(128,128,128,.2)!important;background:color-mix(in srgb,currentColor 13%,transparent)!important;
  box-shadow:none!important;font-size:0!important;line-height:0!important;overflow:visible!important;text-decoration:none!important;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .18s ease,transform .18s ease}
.lx-x>*{display:none!important}
.lx-x::before,.lx-x::after{content:"";position:absolute;left:calc(50% - 7px);top:calc(50% - 1px);width:14px;height:2px;border-radius:2px;
  background:currentColor;opacity:.62;transition:opacity .18s ease}
.lx-x::before{transform:rotate(45deg)}
.lx-x::after{transform:rotate(-45deg)}
.lx-x:hover{background:rgba(128,128,128,.3)!important;background:color-mix(in srgb,currentColor 22%,transparent)!important}
.lx-x:hover::before,.lx-x:hover::after{opacity:.9}
.lx-x:active{transform:scale(.92)}
.lx-x:focus-visible{outline:2px solid currentColor;outline-offset:2px}