/* ══════════════════════════════════════════
   HUB · Digital Core
   Portal tras el login: barra superior + tarjetas de aplicaciones. Solo trae
   su maquetación; tokens, barra superior flotante (.topbar), avatar, menú de
   usuario, badges y estado vacío son los compartidos de /shared/css.
══════════════════════════════════════════ */

.hub { min-height: 100vh; }
.hub.hidden { display: none; }

/* Reveal coordinado con la salida de la intro (mismo gesto que #app en las apps). */
.hub.hub-entering { animation: hubEnter 0.6s var(--ease-out) both; }
@keyframes hubEnter {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Barra superior: la .topbar flotante común, sin sidebar a la izquierda ── */
.topbar.hub-topbar { left: 12px; padding: 0 12px 0 16px; }

.hub-brand {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  padding: 4px 8px 4px 4px;
  border-radius: var(--radius-sm);
}

.hub-brand-text {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  white-space: nowrap;
}

.hub-brand-text span {
  margin-left: 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text3);
}

.hub-topbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; }

.hub-user {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; max-width: 320px;
  padding: 4px 10px 4px 4px;
  border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text);
  text-align: left;
  transition: background-color 160ms ease-out, transform 120ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .hub-user:hover { background: var(--bg3); }
}

.hub-user:active { transform: scale(0.98); }

.hub-user .user-avatar { width: 36px; height: 36px; min-width: 36px; font-size: 13px; }

.hub-user-text { display: flex; flex-direction: column; min-width: 0; }

/* ── Contenido ── */
.hub-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: calc(var(--header-h) + 60px) 24px 56px;
}

.hub-intro { margin-bottom: 28px; }

.hub-eyebrow {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 8px;
}

.hub-title {
  font-family: var(--font-display); font-size: 26px; font-weight: 600;
  line-height: 1.2;
  margin-bottom: 6px;
}

.hub-lead { font-size: 14px; color: var(--text2); max-width: 65ch; }

/* ── Tarjetas de aplicaciones ── */
.hub-apps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.hub-app { display: flex; min-width: 0; }

.hub-app-card {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  width: 100%;
  min-height: 188px;
  padding: 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  font: inherit;
  text-align: left;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background-color var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .hub-app-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border2);
  }
  /* En construcción: sin elevación (no abre nada), solo un cambio de tono. */
  .hub-app-card.is-soon:hover { transform: none; box-shadow: none; background: var(--bg3); }
}

.hub-app-card:active { transform: scale(0.98); }

.hub-app-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}

.hub-app-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3);
  color: var(--text2);
  flex-shrink: 0;
}

.hub-app-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hub-app-icon svg { width: 22px; height: 22px; }

.hub-app-body { display: flex; flex-direction: column; gap: 6px; }

.hub-app-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.2; }

.hub-app-desc { font-size: 13px; line-height: 1.5; color: var(--text2); }

.hub-app-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text3);
}

.hub-app-roles { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hub-app-open {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  color: var(--text2);
  transition: color var(--transition);
}

.hub-app-open svg { width: 14px; height: 14px; transition: transform var(--transition); }

@media (hover: hover) and (pointer: fine) {
  .hub-app-card:hover .hub-app-open { color: var(--text); }
  .hub-app-card:hover .hub-app-open svg { transform: translateX(2px); }
}

/* ── Sin aplicaciones ── */
.hub-empty {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

@media (max-width: 600px) {
  .hub-main { padding: calc(var(--header-h) + 36px) 16px 40px; }
  .hub-title { font-size: 22px; }
  .hub-user-text { display: none; }
  .hub-user { padding: 4px; }
  .topbar.hub-topbar { padding: 0 8px 0 10px; }
  .hub-topbar-right { gap: 6px; }
}

/* Móvil estrecho: cabe la marca, el selector de tema (solo iconos) y el avatar. */
@media (max-width: 400px) {
  .hub-brand-text span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hub.hub-entering { animation-duration: 0.01s; }
  .hub-app-card, .hub-app-open svg { transition-duration: 0.01s; }
  .hub-app-card:hover, .hub-app-card:active { transform: none; }
}