Sesión vencida.

<section class="ui-sample ui-auth-status ui-auth-status--warning" data-auth-source="cis-auth-authentik" data-session-expired><span class="ui-auth-status__symbol" aria-hidden="true">i</span><div><strong>Tu sesión terminó</strong><p>Pasó el tiempo de inactividad permitido. Conservamos el destino, no el contenido sensible del formulario.</p><div class="ui-actions"><a class="btn btn--primary" href="/auth/login?return_to=%2Fdocumentos%2F184">Volver a iniciar sesión</a><a class="btn btn--quiet" href="#inicio">Ir al inicio</a></div></div></section>

<section class="ui-sample ui-auth-status ui-auth-status--warning border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-auth-source="cis-auth-authentik" data-session-expired><span class="ui-auth-status__symbol" aria-hidden="true">i</span><div><strong>Tu sesión terminó</strong><p>Pasó el tiempo de inactividad permitido. Conservamos el destino, no el contenido sensible del formulario.</p><div class="ui-actions"><a class="btn btn--primary underline underline-offset-4" href="/auth/login?return_to=%2Fdocumentos%2F184">Volver a iniciar sesión</a><a class="btn btn--quiet underline underline-offset-4" href="#inicio">Ir al inicio</a></div></div></section>

export interface SessionExpiredProps {
  title?: string;
  /** Por qué terminó la sesión y qué se conserva al volver a entrar. */
  description?: string;
  loginLabel?: string;
  /** Entrada de cis-auth con el destino en `return_to`, codificado. */
  loginHref?: string;
  homeLabel?: string;
  homeHref?: string;
  className?: string;
}

/**
 * Aviso de sesión vencida o revocada, con la acción para volver a iniciar sesión y regresar al mismo destino.
 *
 * Tono de advertencia fijo. Si ambos enlaces van vacíos, no se muestra la fila de acciones.
 *
 * @example <SessionExpired loginHref={`/auth/login?return_to=${encodeURIComponent(ruta)}`} />
 * @example <SessionExpired description="El administrador revocó esta sesión. Conservamos el destino, no el contenido sensible del formulario." />
 */
export function SessionExpired({
  title = "Tu sesión terminó",
  description = "Pasó el tiempo de inactividad permitido. Conservamos el destino, no el contenido sensible del formulario.",
  loginLabel = "Volver a iniciar sesión",
  loginHref = "/auth/login?return_to=%2Fdocumentos%2F184",
  homeLabel = "Ir al inicio",
  homeHref = "#inicio",
  className,
}: SessionExpiredProps) {
  return (
    <section
      className={["ui-auth-status ui-auth-status--warning", className].filter(Boolean).join(" ")}
      data-auth-source="cis-auth-authentik"
      data-session-expired
    >
      <span className="ui-auth-status__symbol" aria-hidden="true">i</span>
      <div>
        <strong>{title}</strong>
        {description ? <p>{description}</p> : null}
        {loginLabel || homeLabel ? (
          <div className="ui-actions">
            {loginLabel ? <a className="btn btn--primary" href={loginHref}>{loginLabel}</a> : null}
            {homeLabel ? <a className="btn btn--quiet" href={homeHref}>{homeLabel}</a> : null}
          </div>
        ) : null}
      </div>
    </section>
  );
}