/**
 * patotas.css
 * Hub "Minhas patotas" (aparece logo depois do login): lista das patotas do
 * usuário + caixas para criar uma nova ou entrar com um código.
 */
.hub-screen {
  position: relative; z-index: 2;
  max-width: 760px; margin: 0 auto; padding: 32px 24px 80px;
}

.hub-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: nowrap;
  margin-bottom: 16px;
}
.hub-top .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hub-top .brand > div { min-width: 0; }
.hub-top .brand h1, .hub-top .brand .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-top .brand .brand-mark {
  width: 40px; height: 40px; flex-shrink: 0; object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}
.hub-top .nav-exit { flex-shrink: 0; }
.hub-top-actions { display: flex; gap: 6px; flex-shrink: 0; }
.hub-subactions { margin: 0 0 22px; }

@media (max-width: 1060px) {
  .hub-top { padding-right: 56px; }
}
@media (max-width: 460px) {
  .hub-top .brand .sub { display: none; }
}
.hub-top .brand h1 { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: 0.04em; margin: 0; line-height: 1; }
.hub-top .brand .sub {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.66rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--grama); margin-top: 3px;
}

/* lista de patotas do usuário */
.hub-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hub-card {
  background: var(--giz); color: var(--preto);
  border-radius: var(--radius); box-shadow: var(--sombra);
  padding: 16px 18px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 14px;
}
.hub-card-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hub-card-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; letter-spacing: 0.03em; }
.hub-card-meta {
  grid-column: 1 / 2;
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: rgba(23, 21, 18, 0.55);
}
.hub-open { grid-row: 1 / 3; grid-column: 2; align-self: center; }

.hub-role {
  font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: 6px; padding: 3px 7px;
}
.hub-role-owner { background: rgba(232, 185, 59, 0.2); color: #8a6a12; }
.hub-role-member { background: rgba(35, 77, 53, 0.14); color: var(--campo); }

/* caixas criar / entrar */
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hub-box {
  background: rgba(245, 242, 231, 0.06);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  padding: 20px;
}
.hub-box h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.15rem; letter-spacing: 0.03em; margin: 0 0 6px; }
.hub-box p { font-size: 0.82rem; color: rgba(245, 242, 231, 0.55); margin: 0 0 14px; line-height: 1.5; }
.hub-box input {
  width: 100%; margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.25); border: 1px solid var(--linha); color: var(--branco);
  border-radius: 8px; padding: 10px 12px; font-size: 0.95rem; font-family: 'Inter', sans-serif;
}

.join-found-name { font-size: 0.85rem; color: rgba(245, 242, 231, 0.8); margin: 0 0 10px; }
.join-found-name b { color: var(--amarelo); }
.join-found select {
  width: 100%; margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.25); border: 1px solid var(--linha); color: var(--branco);
  border-radius: 8px; padding: 10px 12px; font-size: 0.95rem; font-family: 'Inter', sans-serif;
}
.join-found .link-btn { display: block; margin: 10px auto 0; color: rgba(245, 242, 231, 0.5); }

.hub-note {
  margin-top: 26px; font-size: 0.75rem; line-height: 1.6;
  color: rgba(245, 242, 231, 0.4);
}
.hub-note b { color: rgba(245, 242, 231, 0.65); }

@media (max-width: 640px) {
  .hub-grid { grid-template-columns: 1fr; }
  .hub-card { grid-template-columns: 1fr; }
  .hub-open { grid-row: auto; grid-column: 1; justify-self: start; }
}