/**
 * P-14 · Encabezado de sección — .scm-ui-shead
 *
 * Formaliza el encabezado numerado que ya existía en el Panel de Control
 * (`.scm-pc-shead`, sus ocho secciones). No es un diseño nuevo: número de
 * orden en su caja, título de sección de P-00 al lado, y sitio para una
 * etiqueta de estado y para un enlace alineado a la derecha.
 *
 * El número es un CONTADOR, no un estado: caja neutra, sin color semántico.
 *
 *   <div class="scm-ui-shead">
 *     <span class="scm-ui-shead__num">01</span>
 *     <h2 class="scm-ui-shead__title">Cumpleaños</h2>
 *     <span class="scm-ui-badge scm-ui-badge--warn scm-ui-badge--sm">Diario</span>
 *     <a class="scm-ui-shead__link" href="…">Editar textos</a>
 *   </div>
 *
 * El título puede ser cualquier nivel de encabezado: el patrón no elige el
 * nivel, que lo decide la jerarquía del documento.
 */

.scm-ui-shead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--scm-ui-sp-2);
  margin: 0 0 var(--scm-ui-sp-4);
}

/* Contador. Cifras tabulares para que "01" y "08" midan lo mismo. */
.scm-ui-shead__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 26px;
  padding: 4px 8px;
  border: 1px solid var(--scm-ui-line);
  border-radius: var(--scm-ui-r-sm);
  background: var(--scm-ui-surface);
  color: var(--scm-ui-text-2);
  font-family: var(--scm-ui-font);
  font-size: var(--scm-ui-fs-badge);
  font-weight: var(--scm-ui-fw-strong);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Rol "Título de sección" de P-00: 16px / 700 / −0.02em. */
/* `flex: 1 1 auto` para que el título ENVUELVA su propio texto en vez de caer
   entero a una línea nueva: en móvil, un título largo dejaba el número solo
   arriba. */
.scm-ui-shead__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--scm-ui-font);
  font-size: var(--scm-ui-fs-section);
  font-weight: var(--scm-ui-fw-strong);
  letter-spacing: var(--scm-ui-lsp-section);
  line-height: 1.25;
  color: var(--scm-ui-text);
}

/* El enlace de la sección se va al extremo. */
.scm-ui-shead__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  font-family: var(--scm-ui-font);
  font-size: var(--scm-ui-fs-meta);
  font-weight: var(--scm-ui-fw-strong);
  letter-spacing: var(--scm-ui-lsp-body);
  color: var(--scm-ui-blue-600);
  text-decoration: none;
}

.scm-ui-shead__link:hover { text-decoration: underline; }
.scm-ui-shead__link:focus-visible { outline: 2px solid var(--scm-ui-blue-500); outline-offset: 2px; }

/* Cuando el encabezado abre una card, el hueco de abajo lo pone la card. */
.scm-ui-shead--incard {
  margin-bottom: var(--scm-ui-sp-5);
}