/* El lanzador de productos.
 *
 * Los colores salen de variables que cada producto ya define. Si el paquete
 * trajera colores fijos, en un producto se vería pegado y en modo oscuro se
 * vería mal — y entonces cada uno lo sobrescribiría por su cuenta, que es
 * volver a tener siete panales distintos.
 *
 * Los nombres son los de la casa; cada producto los mapea a los suyos con una
 * línea si usa otros.
 */

.bl-boton {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, #5b6570);
  cursor: pointer;
  transition:
    background 150ms ease,
    color 150ms ease;
}
.bl-boton:hover {
  background: var(--bg-subtle, rgba(0, 0, 0, 0.05));
  color: var(--text, #16202a);
}
.bl-boton:focus-visible {
  outline: 2px solid var(--accent, #0e7490);
  outline-offset: 2px;
}

/* ── El cajón ─────────────────────────────────────────────────────────
   Pegado al borde derecho y de arriba abajo, no colgando del botón: el
   listado necesita sitio para logo, nombre y organización de cada
   producto, y en un cuadro angosto se aprieta.

   Los números son los que ya usa Arqueo en su cajón de notificaciones.
   Los fija el paquete para que no los elija cada uno por su cuenta. */
.bl-velo {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(11, 18, 32, 0.42);
  backdrop-filter: blur(2px);
  animation: bl-velo-entra 180ms ease both;
}
@keyframes bl-velo-entra {
  from {
    opacity: 0;
  }
}

.bl-cajon {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 901;
  width: min(400px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--bg, #fff);
  border-left: 1px solid var(--border, #e2e6ea);
  box-shadow: -24px 0 48px -28px rgba(0, 0, 0, 0.45);
  animation: bl-cajon-entra 180ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
.bl-cajon:focus {
  outline: none;
}
@keyframes bl-cajon-entra {
  from {
    transform: translateX(100%);
  }
}

.bl-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border, #e2e6ea);
}
.bl-cabecera h2 {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #16202a);
}
.bl-cuenta {
  font-size: 12px;
  color: var(--text-secondary, #5b6570);
}
.bl-cerrar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary, #5b6570);
  cursor: pointer;
}
.bl-cerrar:hover {
  background: var(--bg-subtle, rgba(0, 0, 0, 0.05));
}

.bl-cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 24px;
}

.bl-vacio {
  margin: 24px 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary, #5b6570);
}

/* CUATRO POR FILA. Con siete productos y tres columnas la lista bajaba de la
   mitad del cajón y había que desplazarse para ver el último; con cuatro cabe
   todo de un vistazo, que es para lo que existe un lanzador.
   El icono se bajó a 36 antes justamente para que quepan: a 44 la baldosa no
   entra cuatro veces en 400 px sin partir los nombres. */
.bl-rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
/* En pantallas estrechas, tres. Mantener cuatro dejaría la baldosa por debajo
   del icono más su margen, y los nombres se partirían en tres líneas. */
@media (max-width: 380px) {
  .bl-rejilla {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bl-baldosa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  border-radius: 12px;
  border: 1px solid var(--border, #e2e6ea);
  background: var(--bg, #fff);
  text-decoration: none;
  color: var(--text, #16202a);
  text-align: center;
  animation: bl-baldosa-entra 280ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  transition:
    transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}
a.bl-baldosa:hover {
  transform: translateY(-3px);
  background: var(--accent-lighter, rgba(14, 116, 144, 0.08));
  border-color: var(--accent-light, rgba(14, 116, 144, 0.35));
  box-shadow: 0 12px 26px -18px rgba(0, 0, 0, 0.5);
}
a.bl-baldosa:hover .bl-icono {
  transform: scale(1.1) rotate(-4deg);
}
a.bl-baldosa:active .bl-icono {
  transform: scale(0.94);
}
.bl-baldosa:focus-visible {
  outline: 2px solid var(--accent, #0e7490);
  outline-offset: 2px;
}
.bl-actual {
  border-color: var(--accent, #0e7490);
  background: var(--accent-lighter, rgba(14, 116, 144, 0.08));
}
/* Sin dirección: borde punteado y el motivo escrito. NO atenuado — el gris
   dice «no tienes acceso», y no es verdad. */
.bl-sin-enlace {
  border-style: dashed;
  cursor: default;
}

@keyframes bl-baldosa-entra {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
  }
}

.bl-icono {
  display: grid;
  place-items: center;
  /* 36 y no 44. Con siete productos la rejilla parecía un menú de aplicaciones
     de móvil: el icono pesaba más que el nombre, que es lo que se lee. Se baja
     el icono y el relleno de la baldosa, NO el ancho del cajón — ahí caben
     nombres como «Prueba de acceso con inquilino», y estrecharlo los partiría. */
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-subtle, rgba(0, 0, 0, 0.04));
  overflow: hidden;
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bl-icono img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bl-inicial {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent, #0e7490);
}

.bl-nombre {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.25;
  /* Los nombres largos parten por donde puedan en vez de desbordar la baldosa
     y empujar la rejilla. Con cuatro columnas la caja es estrecha y hay
     nombres que no tienen espacio natural para partirse. */
  overflow-wrap: anywhere;
}
/* La organización, sólo cuando el mismo producto sale más de una vez. Se pinta
   más pequeña y apagada que el nombre: es el desempate, no el título. */
.bl-org {
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--text-secondary, #5a6b76);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.bl-aqui,
.bl-sin-url {
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--text-secondary, #5b6570);
}
.bl-aqui {
  color: var(--accent, #0e7490);
}

.bl-separador {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 12px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #5b6570);
}
.bl-separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border, #e2e6ea);
}

@media (prefers-reduced-motion: reduce) {
  .bl-velo,
  .bl-cajon,
  .bl-baldosa {
    animation: none !important;
  }
  .bl-baldosa,
  .bl-icono {
    transition: none !important;
  }
  a.bl-baldosa:hover {
    transform: none;
  }
  a.bl-baldosa:hover .bl-icono {
    transform: none;
  }
}