/* Lucidez - Estructura compartida de pagina: encabezado eyebrow + titulo,
   usado en todas las pantallas del portal de usuario (referencia visual
   autorizada el 20 de agosto de 2026: sin barra de marca, cada pantalla
   arranca directo en su contenido). */

/* El header (.app-header, ver shell.css) ahora es real y esta presente en
   todas las pantallas y anchos, asi que ya reserva su propio espacio en
   el flujo normal del documento: aca solo hace falta el respiro normal
   antes del titulo, no un calculo para esquivar nada flotante.
   padding-left/right: margen minimo garantizado en toda la pagina para
   que ninguna tarjeta ni fila toque el borde de la pantalla. */
.pagina {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  padding-left: var(--space-5);
  padding-right: var(--space-5);
  min-height: 100vh;
  min-height: 100dvh;
}

.pagina__encabezado {
  text-align: center;
  margin-bottom: var(--space-6);
}

.pagina__eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}

.pagina__titulo {
  margin: 0 auto;
  max-width: 22ch;
}

.pagina__subtitulo {
  margin-top: var(--space-3);
  font-size: var(--text-body-lg);
  color: var(--color-texto-secundario);
}

@media (max-width: 480px) {
  .pagina {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* Escritorio: un poco mas de respiro antes del titulo, ya con mas aire
   disponible en pantallas grandes. */
@media (min-width: 900px) {
  .pagina {
    padding-top: var(--space-8);
  }
}