/* ==========================================================================
   Hub · Selección de cuentas (Figma ALC: "Selección de cuentas · Página · Desktop / Mobile")
   Usa los tokens, botones, badges y header de producto.css.
   Mobile < 1024: tarjetas apiladas · Desktop ≥ 1024: una sola tarjeta de 808 px con filas.
   ========================================================================== */
:root { --gray-900: #1d1e20; }   /* Gray-900 (texto 1ro): título del saludo */

/* ---------- Header: sin menú, sin promo ni íconos; solo logo y avatar (mobile 50 / desktop 64) ---------- */
.app-header--hub .header__logo { display: block; }
.header__avatar { display: block; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }

/* ---------- Página ---------- */
.hub { min-height: calc(100vh - 50px); padding: 32px 16px 16px; display: flex; flex-direction: column; gap: 40px; align-items: stretch; }
.hub:focus { outline: none; }
.hub__hero { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.hub__title { font-size: 28px; font-weight: 700; line-height: 34px; color: var(--gray-900); }
.hub__subtitle { font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--text-muted); }

/* ---------- Piezas compartidas ---------- */
.hub-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hub-who .avatar { flex: none; }
.hub-info { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.hub-name { font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--body-color); }
.hub-email { font-size: 12px; line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; }
.hub-sep { height: 0; position: relative; }
.hub-sep::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--secondary-100); }
.btn .icon--16 { flex: none; }

/* ---------- Mobile (< 1024): tres bloques apilados ---------- */
.hub-card { width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }

/* Tu cuenta + banner: un solo bloque de 12 px de radio */
.hub-own, .hub-banner { background: var(--body-bg); border: 1px solid var(--secondary-100); }
.hub-own { display: flex; flex-direction: column; gap: 20px; padding: 15px; border-radius: 12px 12px 0 0; }   /* borde 1 + padding 15 = 16, como el trazo interno de Figma */
.hub-info--own { display: grid; grid-template-columns: auto; justify-items: start; gap: 4px; }
.hub-info--own .hub-email { order: 2; }
.hub-info--own .hub-badge { order: 3; }
.hub-own__actions { display: flex; flex-direction: column-reverse; gap: 12px; }
.hub-own__actions .btn { width: 100%; }
.hub-banner { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px; background: var(--primary-50); border-top: 0; border-radius: 0 0 12px 12px; }
.hub-banner__text { font-size: 14px; line-height: 1.5714; color: var(--primary-500); }
.hub-banner__text b { font-weight: 600; }
.hub-banner .btn { width: 100%; }
.hub-own + .hub-sep, .hub-banner + .hub-sep { display: none; }   /* los separadores son solo de desktop */

/* Cuentas con acceso: título + una tarjeta por cuenta */
.hub-accounts { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.hub-accounts__title { font-size: 18px; font-weight: 600; line-height: 23px; color: var(--body-color); }   /* Figma redondea 22,5 a 23 */
.hub-list { display: flex; flex-direction: column; gap: 16px; }
.hub-row { display: flex; flex-direction: column; gap: 12px; padding: 15px; background: var(--body-bg); border: 1px solid var(--secondary-100); border-radius: 12px; }
.hub-row__divider { height: 1px; background: var(--secondary-100); }
.hub-row__side { display: contents; }
.hub-row__status { display: none; }
.hub-row__data { display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 1.5; }
.hub-row__data > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hub-row__data dt { color: var(--text-muted); }
.hub-row__data dd { margin: 0; color: var(--body-color); text-align: right; }
.hub-row__btn { width: 100%; }

/* ---------- Desktop ≥ 1024: una tarjeta de 8 columnas de la grilla Bare (648 / 760 / 808) con filas ---------- */
@media (min-width: 1024px) {
  .hub { min-height: calc(100vh - 64px); padding: 32px var(--bare-pad) 24px; }
  .hub-card {
    width: min(var(--bare-8col), 100%); max-width: none; gap: 0;
    background: var(--body-bg); border: 1px solid var(--secondary-100); border-radius: 12px; overflow: hidden;   /* el ancho incluye el borde: a 1440 son 808 y las filas miden 806 */
  }
  .hub-own, .hub-banner { border: 0; }
  .hub-own { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-radius: 0; }
  .hub-info--own { grid-template-columns: auto auto; column-gap: 8px; row-gap: 4px; align-items: center; justify-items: start; }
  .hub-info--own .hub-email { grid-column: 1 / -1; order: 0; }
  .hub-info--own .hub-badge { order: 0; }
  .hub-own__actions { flex-direction: row; gap: 12px; align-items: center; justify-content: flex-end; }
  .hub-own__actions .btn { width: auto; }
  .hub-banner { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 12px 16px; border-radius: 0; }
  .hub-banner .btn { width: auto; }
  .hub-own + .hub-sep, .hub-banner + .hub-sep { display: block; }

  .hub-accounts { gap: 0; margin-top: 0; }
  .hub-accounts__title { padding: 16px 16px 8px; }
  .hub-list { gap: 0; }
  .hub-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border: 0; border-radius: 0; }
  .hub-row + .hub-row { box-shadow: 0 -1px 0 var(--secondary-100); }   /* línea de 1 px que no suma alto, como en Figma */
  .hub-row__divider, .hub-row__data { display: none; }
  .hub-row__side { display: flex; align-items: center; justify-content: space-between; flex: none; width: 265px; }
  .hub-row__status { display: flex; flex-direction: column; gap: 4px; width: 150px; font-size: 12px; line-height: 1.5; }
  .hub-row__role { color: var(--body-color); }
  .hub-row__role b { font-weight: 600; }
  .hub-row__support { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
  .hub-row__support.is-on { color: #246a00; }   /* text/success */
  .hub-row__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex: none; }
  .hub-row__support.is-on .hub-row__dot { background: #246a00; }
  .hub-row__btn { width: auto; border-color: transparent; background: transparent; color: var(--primary-600); }
  .hub-row__btn:is(:hover, .is-hover) { background: var(--primary-50); color: var(--primary-600); border-color: transparent; }
  .hub-row__btn:is(:active, .is-active) { background: var(--primary-100); color: var(--primary-600); border-color: transparent; }
}