/* Estado vacío — UN componente para las pantallas «delgadas» del admin y las
   colas del super-admin (semana 3 de la revisión de UX, 2026-09-03).

   Anatomía fija, en este orden y sin excepciones:
     · qué es esto            (.adm-empty__title)
     · cuándo se llena        (.adm-empty__text)
     · UNA acción primaria    (.adm-empty__action, opcional en las colas que
                               las llena otra persona: devoluciones, reclamos)
     · un enlace secundario   (.adm-empty__link, opcional)
   Sin emoji: el ícono es un aro punteado dibujado en CSS, el mismo en todas,
   porque un vacío no tiene «tema» — lo que cambia es el texto.

   Va enlazado ANTES de tw.css a propósito: `.hidden` de Tailwind tiene que
   seguir ganando al `display:flex` de acá (misma especificidad → gana la hoja
   que se carga después, L251). Todas las pantallas lo muestran/esconden con
   `classList` sobre `hidden`, así que el componente es sólo presentación y no
   toca el JS de nadie. */

.adm-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 40px 24px;
  color: var(--cnb-text-secondary, #4B5563);
}
.adm-empty__icon {
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px dashed var(--cnb-gray-300, #D1D5DB);
  display: grid; place-items: center; margin-bottom: 6px;
}
.adm-empty__icon::after {
  content: ''; width: 18px; height: 2px; border-radius: 2px;
  background: var(--cnb-gray-300, #D1D5DB);
}
.adm-empty__title {
  font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0;
  color: var(--cnb-text-primary, #111827);
  text-wrap: balance;
}
.adm-empty__text { font-size: 13px; line-height: 1.5; max-width: 48ch; margin: 0; }
.adm-empty__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px; margin-top: 10px;
}
.adm-empty__action {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: #fff; line-height: 1;
  background: var(--adm-brand, var(--lp-brand, #4A148C));
  border: 0; border-radius: 10px; padding: 10px 16px; cursor: pointer;
  text-decoration: none; min-height: 36px;
}
.adm-empty__action:hover { filter: brightness(0.94); }
.adm-empty__action:focus-visible { outline: 2px solid var(--adm-brand, #4A148C); outline-offset: 2px; }
.adm-empty__link {
  font-size: 13px; font-weight: 600; color: var(--adm-brand, var(--lp-brand, #4A148C));
  text-decoration: underline; text-underline-offset: 2px;
  background: none; border: 0; cursor: pointer; padding: 0;
}

/* Variante compacta: dentro de una tarjeta que ya tiene título (la lista de
   atención del tablero, la columna de conversaciones del chat). */
.adm-empty--compact { padding: 20px 16px; gap: 4px; }
.adm-empty--compact .adm-empty__icon { width: 36px; height: 36px; margin-bottom: 2px; }
.adm-empty--compact .adm-empty__title { font-size: 14px; }

/* Super-admin: paleta slate, sin los tokens del casco del admin. */
.adm-empty--dark { color: #94A3B8; }
.adm-empty--dark .adm-empty__icon { border-color: #475569; }
.adm-empty--dark .adm-empty__icon::after { background: #475569; }
.adm-empty--dark .adm-empty__title { color: #E2E8F0; }
.adm-empty--dark .adm-empty__action { background: #059669; }
.adm-empty--dark .adm-empty__action:focus-visible { outline-color: #34D399; }
.adm-empty--dark .adm-empty__link { color: #34D399; }