/**
 * P-07 · Encabezado de página — .scm-ui-pagehead
 *
 * Sustituye a los tres H1 divergentes actuales (22px en el panel, 26px en
 * wp-admin, 28px en Servidores y Eventos).
 *
 * La acción principal de la pantalla vive aquí, no dentro del contenido.
 * Sin ícono decorativo junto al título: el ícono ya está en la pestaña o en el
 * menú lateral.
 */

.scm-ui-pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--scm-ui-sp-6);
  flex-wrap: wrap;
  margin-bottom: var(--scm-ui-sp-5);
}

.scm-ui-pagehead__title {
  margin: 0;
  font-family: var(--scm-ui-font);
  font-size: var(--scm-ui-fs-title);
  font-weight: var(--scm-ui-fw-title);
  letter-spacing: var(--scm-ui-lsp-title);
  line-height: 1.15;
  color: var(--scm-ui-text);
}

/* El subtítulo es el contexto: rol, ámbito, nombre del usuario. */
.scm-ui-pagehead__sub {
  margin: var(--scm-ui-sp-1) 0 0;
  font-size: var(--scm-ui-fs-body);
  font-weight: var(--scm-ui-fw-soft);
  line-height: 1.4;
  color: var(--scm-ui-text-2);
}

/* Máximo dos botones. */
.scm-ui-pagehead__actions {
  display: flex;
  align-items: center;
  gap: var(--scm-ui-sp-2);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .scm-ui-pagehead {
    align-items: stretch;
    gap: var(--scm-ui-sp-3);
  }

  /* Las acciones bajan debajo del título, a ancho completo. */
  .scm-ui-pagehead__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .scm-ui-pagehead__actions > .scm-ui-btn {
    width: 100%;
    justify-content: flex-start;
  }
}