/* ==========================================================================
   Spaces — hub del ecosistema

   Es la misma casa que el resto del producto: la barra superior y la tipografia
   son las de `/styles.css`, y las tarjetas de aplicacion son **las mismas** que
   las de los cursos (`.course-card*`, de `/profesor.css`). Aqui solo va lo
   propio del hub: la rejilla, la tarjeta destacada del visor, el estado «muy
   pronto» y el pie de accesos.

   Movil primero: en el telefono el hub es una sola columna y el visor sigue
   siendo la primera tarjeta, entera y sin scroll horizontal.
   ========================================================================== */

/* ============================== cabecera ============================== */

/* La marca de Spaces para la barra superior del hub. El aspecto de enlace (y
   el de todas las paginas) lo trae `.brand-link` de `/styles.css`. */

/* ================================ hero ================================ */

.hub-hero {
  text-align: center;
  max-width: 660px;
  margin: 8px auto 34px;
}
.hub-hero h1 {
  font-size: 32px;
  letter-spacing: -0.028em;
  margin-bottom: 12px;
}
.hub-hero p {
  color: var(--text-soft);
  font-size: 15.5px;
}
.hub-hero .hub-lead {
  margin-bottom: 10px;
}

/* ============================= aplicaciones ============================= */

.hub-apps {
  margin-top: 0;
}

.hub-card {
  gap: 12px;
}

/* El visor es el gancho del producto: manda en el hub. Ocupa toda la fila
   cuando hay sitio y lleva el unico boton de color pleno. */
@media (min-width: 900px) {
  .hub-card.is-destacado {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px 22px;
    padding: 22px 24px;
  }
  .hub-card.is-destacado .hub-card-body {
    flex: 1 1 380px;
    min-width: 0;
  }
  .hub-card.is-destacado .hub-card-description {
    max-width: 620px;
  }
}

/* Icono de la aplicacion: la misma caja que `.empty-art`, un poco menor. */
.hub-card-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 0;
  border-radius: 13px;
  color: var(--primary);
}
.hub-card-icon svg {
  width: 22px;
  height: 22px;
}

.hub-card-head {
  align-items: center;
}

.hub-card-title {
  font-size: 18px;
  letter-spacing: -0.015em;
}

.hub-card-tagline {
  margin-top: 3px;
  color: var(--text-soft);
  font-size: 14px;
}

.hub-card-description {
  color: var(--text-soft);
  font-size: 14px;
}

.hub-card-actions {
  align-items: center;
  gap: 10px;
}

/* La promesa que hay que proteger: se ve sin buscarla. */
.hub-card-actions .button-primary {
  gap: 8px;
}
.hub-card-actions .button-primary svg {
  width: 15px;
  height: 15px;
}

.hub-card-note {
  color: var(--muted);
  font-size: 12.5px;
}

/* ---------------------------- «muy pronto» ---------------------------- */

/* Una entrada `soon` se ve, pero no es un enlace: el estado lo dice y el
   boton queda apagado en vez de llevar a una pagina que no existe. */
.hub-card.is-soon .hub-card-icon {
  color: var(--muted);
  border-style: dashed;
}
.hub-card.is-soon .hub-card-title {
  color: var(--text-soft);
}
.hub-card.is-soon .button[aria-disabled='true'] {
  cursor: default;
}

/* ================================ pie ================================ */

.hub-foot {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.hub-foot-title {
  color: var(--muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.hub-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hub-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 13px;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.hub-links a:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

/* ============================= responsive ============================= */

@media (max-width: 860px) {
  .hub-hero h1 {
    font-size: 25px;
  }
  .hub-hero {
    margin-bottom: 26px;
  }
  /* Objetivos de toque comodos: esto se estrena en un movil. */
  .hub-card-actions .button {
    min-height: 44px;
  }
}

/* ===================== portada: dos tarjetas iguales ===================== */

/* «Entrar» y «Crear cursos», una al lado de la otra, del mismo tamaño y
   centradas; en el móvil, una encima de otra (primero «Entrar»). */
.hub-apps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.hub-apps .hub-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.hub-apps .hub-card-description {
  flex: 1 1 auto;
}
.hub-card-alt {
  color: var(--text-soft);
  font-size: 13.5px;
}
.hub-card-alt a {
  color: var(--primary);
  font-weight: 600;
}
@media (max-width: 720px) {
  .hub-apps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Barra superior: el botón «Entrar», a la derecha. */
.topbar .hub-topbar-entrar {
  margin-left: auto;
}

/* Curso de ejemplo, si lo hay: un enlace discreto bajo la presentación. */
.hub-demo {
  margin-top: 10px;
  font-size: 14px;
}
.hub-demo a {
  color: var(--primary);
}