/**
 * P-11 · Estado vacío — .scm-ui-empty
 *
 * Sustituye a las 7 familias actuales (.scm-empty-state, .scm-empty,
 * .srv-empty, .srv-public-empty, .scm-pc-empty, .scm-evtd-empty,
 * .kids-chip--empty).
 *
 * Un estado vacío es una invitación a actuar, no un mensaje de error. Nada de
 * "No se encontraron registros". Vacío por primera vez lleva la acción de
 * crear; vacío por filtro lleva "Limpiar filtros".
 */

.scm-ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 56px var(--scm-ui-sp-6);
  text-align: center;
  font-family: var(--scm-ui-font);
}

/* El ícono es el mismo de la entidad que falta, tomado del diccionario P-06. */
.scm-ui-empty__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--scm-ui-sp-2);
  border: 1px solid var(--scm-ui-blue-100);
  border-radius: 14px;
  background: var(--scm-ui-blue-50);
  color: var(--scm-ui-blue-500);
}

.scm-ui-empty__ic :where(svg) { width: 23px; height: 23px; stroke-width: 1.8; }
.scm-ui-empty__ic :where(.material-icons-round) { font-size: 25px; line-height: 1; }

/* Describe el hecho: "Todavía no hay funciones". */
.scm-ui-empty__title {
  margin: 0;
  font-size: var(--scm-ui-fs-row);
  font-weight: var(--scm-ui-fw-strong);
  letter-spacing: var(--scm-ui-lsp-row);
  color: var(--scm-ui-text);
}

/* Explica qué es la cosa que falta, no que está vacío. */
.scm-ui-empty__text {
  margin: 0;
  max-width: 38ch;
  font-size: var(--scm-ui-fs-meta);
  font-weight: var(--scm-ui-fw-soft);
  line-height: 1.5;
  color: var(--scm-ui-text-2);
}

.scm-ui-empty__action {
  margin-top: 10px;
}