/* BoricuaAuto — estilos de la sesion en el menu.
 * Compartido por todas las paginas publicas: el boton de entrar y la pastilla del usuario
 * tienen que verse igual en la portada, en los anuncios y en la busqueda avanzada. */
.auth-area {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Sin sesion la pastilla esta vacia: mejor no dejar un hueco en el menu. */
.auth-area:empty { display: none; }

.auth-link {
  text-decoration: none;
  color: #45616e;
  font-weight: 700;
  white-space: nowrap;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.auth-link:hover { color: #ed5548; }

.auth-btn {
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid #dfebed;
  background: #fff;
  color: #082b40;
  font: 700 14px/1 'DM Sans', system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.auth-btn:hover { border-color: #ed5548; color: #ed5548; }

.auth-user {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f2f6f7;
  font-size: 13px;
  font-weight: 800;
  color: #082b40;
  white-space: nowrap;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-user img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* ---- Menu movil -------------------------------------------------------------
 * En la portada y en /listings el panel no llevaba `position:absolute`: no flotaba
 * encima, empujaba la barra y el boton «Menu» se iba a la izquierda. Estas reglas
 * van aqui (y no repetidas en cada pagina) para que las tres paginas se comporten
 * igual. Cada pagina mantiene su tipografia y su color; solo se fija la disposicion.
 *
 * `position:relative` en el contenedor NO es opcional: /listings no lo tenia, asi que
 * el panel se colocaba respecto al primer ancestro posicionado (una columna de 805 px
 * de alto) y aparecia al final de la pagina en vez de bajo el boton. */
.mobile-menu { position: relative; }
.mobile-links {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: max-content;
  min-width: 210px;
  /* En un telefono de 360 px un panel de 259 px anclado a la derecha se sale. */
  max-width: min(300px, calc(100vw - 28px));
  margin: 0;
  z-index: 40;
  /* El fondo y la sombra se repiten aqui a proposito: esta hoja se carga ANTES del
   * <style> de cada pagina, asi que las propiedades que define ganan. Si la pagina
   * ponia el fondo blanco del panel, se perdia y los enlaces quedaban flotando sobre
   * el contenido. Todas las paginas quieren el mismo panel, asi que se fija aqui. */
  background: #fff;
  border: 1px solid #dfebed;
  border-radius: 10px;
  box-shadow: 0 12px 25px rgba(8, 43, 64, .12);
  padding: 14px;
  gap: 8px;
}
.mobile-links > a {
  display: block;
  /* El padding de cada pagina no siempre llega al enlace del menu (en /listings daba 0),
   * asi que se fija aqui junto con la tipografia. */
  padding: 9px 10px;
  /* Sin `line-height` fijo, /listings heredaba 1.75 y los enlaces se solapaban entre
   * ellos; la portada heredaba 1.45 y se veia bien. Se fija aqui para las dos. */
  line-height: 1.3;
  font-size: 14px;
}

/* En pantallas estrechas el panel se separa 10 px del borde derecho en lugar de quedar
 * pegado a el: la barra tiene 14 px de margen y el panel acababa tocando el cristal. */
@media (max-width: 480px) {
  .mobile-links { right: -10px; }
}

/* La barra solo tiene 58 px: el panel lleva su propio scroll si no cabe. */
.mobile-links { max-height: calc(100vh - 90px); overflow-y: auto; }

/* En el menu movil los elementos de sesion van uno debajo del otro. El padding se
 * repone a mano porque cada pagina tiene su propia regla `.mobile-links a` y el boton
 * de entrar es un <button>, no un <a>: sin esto quedaria pegado al borde. */
.mobile-links .auth-area { display: grid; gap: 10px; justify-items: start; }
.mobile-links .auth-area .auth-link,
.mobile-links .auth-area .auth-user { padding: 9px 10px; }
.mobile-links .auth-area .auth-btn { padding: 10px 14px; width: 100%; text-align: center; }