/* ====================================================================
 * GUARDADOS — el botón de la estrella y la página «Mis guardados».
 *
 * Paleta: solo azul, blanco y negro. El estado «guardado» NO se distingue
 * por color: se distingue por la estrella rellena, por el texto que cambia
 * de «Guardar» a «Guardado» y por aria-pressed. El color es el tercer
 * refuerzo, nunca el único (criterio 1.4.1 de la WCAG, y además la mitad de
 * la gente mira esto con el sol de Texas dándole en la pantalla).
 * ==================================================================== */

.lt-guardar-form {
  display: inline-block;
  margin: 0;
}

.lt-guardar {
  /* 44 px de alto reales. Es la regla de la casa y aquí importa: el botón vive
     al lado del de llamar, y confundirlos cuesta una llamada perdida. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--linea, rgba(0, 0, 0, .22));
  border-radius: 999px;
  background: transparent;
  color: var(--tinta, #101010);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.lt-guardar:hover,
.lt-guardar:focus-visible {
  background: var(--tinta, #101010);
  border-color: var(--tinta, #101010);
  color: #fff;
  transform: translateY(-1px);
}

.lt-guardar:focus-visible {
  outline: 3px solid var(--cielo, #2f6fed);
  outline-offset: 2px;
}

/* Puesto: se invierte. Con la estrella rellena y el texto en «Guardado», el
   fondo sólido es el tercer aviso, no el primero. */
.lt-guardar--puesto {
  background: var(--tinta, #101010);
  border-color: var(--tinta, #101010);
  color: #fff;
}

.lt-guardar--puesto:hover,
.lt-guardar--puesto:focus-visible {
  background: transparent;
  color: var(--tinta, #101010);
}

.lt-guardar--esperando {
  opacity: .6;
  cursor: progress;
}

.lt-guardar__icono {
  flex: none;
  display: block;
}

/* Compacto: solo la estrella, pero SIN perder los 44 px. El texto se sigue
   leyendo con lector de pantalla; lo que se quita es el píxel, no el dato. */
.lt-guardar--compacto {
  min-width: 44px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}

.lt-guardar--compacto .lt-guardar__texto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* La región que anuncia el cambio a los lectores de pantalla. Ocupa cero. */
.lt-guardar-avisos {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sobre fondo oscuro, el botón se invierte para no desaparecer. */
.lt-seccion--noche .lt-guardar,
.lt-sobre-oscuro .lt-guardar {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

.lt-seccion--noche .lt-guardar:hover,
.lt-seccion--noche .lt-guardar--puesto,
.lt-sobre-oscuro .lt-guardar:hover,
.lt-sobre-oscuro .lt-guardar--puesto {
  background: #fff;
  border-color: #fff;
  color: var(--noche, #0b1220);
}

/*
 * Dentro de una tarjeta, el botón se coloca sin empujar el texto.
 *
 * EL SELECTOR LLEVA LAS DOS FORMAS, Y ESO ES EL ARREGLO DE UN FALLO FEO.
 *
 * Con sesión iniciada el botón es un <form> con un <button> dentro; SIN sesión
 * es un <a> suelto que lleva a crear la cuenta, sin formulario que lo envuelva.
 * La regla original solo nombraba a `.lt-guardar-form`, así que para un
 * visitante anónimo —o sea, para casi todo el que llega— no se aplicaba: el
 * enlace se quedaba estático, como hijo directo del <article>, y al ser un
 * bloque flexible se estiraba a los 354 px de ancho de la tarjeta. Con el
 * `border-radius: 50%` del modo compacto, eso pinta UNA ELIPSE BLANCA GIGANTE
 * encima de cada oferta. El dueño lo vio antes que yo: «se ve como un óvalo en
 * cada oferta de empleo».
 *
 * Medido en /empleos/ a 390 px: 354x44 con radio del 50 %. Debía ser 44x44.
 *
 * La lección, que ya ha aparecido tres veces hoy: cuando una función pinta DOS
 * marcados distintos según el estado, el CSS tiene que nombrar los dos. Probar
 * con la sesión abierta —que es como se prueba siempre— deja el camino de la
 * mayoría sin mirar.
 */
.lt-tarjeta .lt-guardar-form,
.lt-tarjeta > .lt-guardar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}

/*
 * Y EL SEGURO, por si mañana aparece un tercer marcado: el compacto NUNCA se
 * estira. `flex: none` lo saca del reparto de espacio del contenedor y el
 * `width` fijo lo deja cuadrado pase lo que pase. Un `border-radius: 50%` sobre
 * una caja que puede crecer a lo ancho es una elipse esperando a que alguien
 * cambie el marcado.
 */
.lt-guardar--compacto {
  flex: none;
  width: 44px;
  max-width: 44px;
}

.lt-tarjeta .lt-guardar {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(0, 0, 0, .18);
  /* La sombra separa la estrella de una foto clara: sin ella desaparece sobre
     un fondo blanco, que es la mitad de las fotos de un directorio. */
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.lt-tarjeta .lt-guardar--puesto {
  background: var(--tinta, #101010);
  color: #fff;
}


/* ====================================================================
 * LA PÁGINA «MIS GUARDADOS»
 * ==================================================================== */

.lt-guardados__grupo {
  margin-bottom: 2.5rem;
}

.lt-guardados__titulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 .75rem;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
}

.lt-guardados__cuenta {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--apagado, #5a6472);
}

.lt-guardados__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea, rgba(0, 0, 0, .12));
}

.lt-guardados__pieza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linea, rgba(0, 0, 0, .12));
}

.lt-guardados__enlace {
  /* 44 px de zona pulsable también aquí: es una lista larga en un teléfono y
     cada línea es un enlace. */
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.lt-guardados__enlace:hover,
.lt-guardados__enlace:focus-visible {
  text-decoration: underline;
}

.lt-guardados-vacio {
  padding: 1.5rem 0 2.5rem;
  max-width: 46ch;
}

.lt-guardados-vacio p {
  margin: 0 0 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .lt-guardar { transition: none; }
  .lt-guardar:hover,
  .lt-guardar:focus-visible { transform: none; }
}

/* En la ficha de negocio, el botón va debajo de «compartir» y con aire propio:
   pegado al bloque de compartir se leería como parte de él. */
.lt-negocio__guardar {
  margin-top: 1.25rem;
}

/* ====================================================================
 * EL BOTON DE GUARDAR NO SE COME EL TITULO — 2026-08-31
 * --------------------------------------------------------------------
 * El dueno, con una captura: «hay algunas tarjetas que aparecen asi con
 * el cosito de la estrella encima del titulo».
 *
 * Medido en la pagina de empleos: 40 de 60 tarjetas lo tenian, en
 * escritorio Y en movil. La causa: el boton va `position: absolute` a
 * 12 px del borde y mide 44 px, pero el titulo tenia `padding-right: 0`,
 * asi que en cuanto el titulo ocupaba dos lineas la primera pasaba por
 * debajo de la estrella.
 *
 * Se resuelve reservandole el sitio al boton. Y se hace con un FLOTANTE
 * invisible dentro del titulo, no con `padding-right`: el padding le come
 * el ancho a TODAS las lineas, y el boton solo estorba en las dos
 * primeras — con el se medio un titulo de tres lineas pasando a cuatro.
 * El flotante ocupa 56x46 px arriba a la derecha, el texto lo rodea, y a
 * partir del tercer renglon el titulo recupera el ancho entero.
 *
 * Solo entra en las tarjetas que LLEVAN boton flotante, para no
 * descuadrar las demas.
 * ==================================================================== */

.lt-tarjeta:has(> .lt-guardar--compacto) .lt-tarjeta__titulo::before,
.lt-tarjeta:has(> .lt-guardar-form > .lt-guardar--compacto) .lt-tarjeta__titulo::before {
  content: '';
  float: right;
  width: 56px;    /* 44 del boton + 12 de aire */
  height: 46px;   /* alto del boton + un pelo, por si el renglon cae justo */
}

/*
 * Respaldo para navegadores sin `:has()`. Aqui el padding va a TODOS los
 * titulos de tarjeta de empleo y noticia, que son las que llevan el boton.
 * Cuesta 68 px de ancho util en un titulo; taparlo cuesta no poder leerlo.
 */
@supports not selector(:has(*)) {
  .lt-tarjeta--empleo .lt-tarjeta__titulo,
  .lt-tarjeta--noticia .lt-tarjeta__titulo {
    padding-right: 68px;
  }
}