/* css/view-equipo.css - slice TEAMWEB, Equipo (docs/team/TEAM.md, SPEC 2.1, 3.9).
   The cards of the accounts linked with this one, the three totals, the invitations and the sharing switches. Tokens only (no colour of its own), no !important, breakpoints at 761
   and 1100 only, nothing fixed in height (it holds at 200 % text), every control 44 px, and the text of other accounts (labels, agent names) wraps anywhere: a 40-letter
   label or a 60-letter agent name never pushes the page sideways. The shared pieces (.card, .chip, .rost, .progress, .stat, .switch-row, .alert, .empty, .row) are components.css's
   and view-inicio.css's. */

/* Through a Management delegation the account is not the person's own: teams are its owner's decision, so the destination is not offered (js/views/equipo.js sets data-managing). */
html[data-managing] [data-nav="equipo"] { display: none; }

.equipo { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); align-content: start; }
.equipo > * { min-width: 0; }
.equipo[aria-busy="true"] .btn { pointer-events: none; }

/* ---------- first paint ---------- */
.equipo-skeleton { display: grid; gap: var(--sp-4); }
.equipo-skeleton__tiles { height: 120px; border-radius: var(--r-lg); }
.equipo-skeleton__card { height: 200px; border-radius: var(--r-lg); }

/* ---------- the three totals ---------- */
.equipo-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.equipo-stats .stat { padding: var(--sp-3) var(--sp-3); }
.equipo-stats .stat__label { overflow-wrap: anywhere; }
@media (max-width: 760px) { .equipo-stats { grid-template-columns: minmax(0, 1fr); } .equipo-stats .stat { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .equipo-stats .stat__value { grid-column: 2; grid-row: 1; } }

/* ---------- one card per account ---------- */
.equipo-cards { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .equipo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.equipo-card .card__head { align-items: flex-start; }
.equipo-card .card__title, .equipo-card .card__sub { overflow-wrap: anywhere; min-width: 0; }
.equipo-card .card__head > .chip { flex: none; }
.equipo-block { display: grid; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.equipo-block__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.equipo-block__title { font-size: var(--fs-md); font-weight: 700; }
.equipo-block__sub { color: var(--muted); font-size: var(--fs-sm); }
.equipo-note { padding: var(--sp-1) 0; }
.equipo-note .icon { color: var(--muted); }
.equipo-progress { display: grid; gap: 6px; }
.equipo-progress__text { color: var(--ink-2); font-size: var(--fs-sm); }
.equipo-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; }
.equipo-count { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--line); min-width: 0; }
.equipo-count dt { color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.equipo-count dd { margin: 0; font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- invitations ---------- */
.equipo-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; row-gap: var(--sp-2); }
.equipo-row__body { display: grid; gap: 2px; min-width: 0; }
.equipo-row__title { font-weight: 650; overflow-wrap: anywhere; }
.equipo-row__sub { color: var(--muted); font-size: var(--fs-sm); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; overflow-wrap: anywhere; }
.equipo-row > .btn, .equipo-row > .equipo-row__actions { grid-column: 2; justify-self: start; }
.equipo-row__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.equipo-row > .inline-status, .equipo-row > .equipo-row__why { grid-column: 1 / -1; }
.equipo-row > .inline-status:empty { display: none; }

/* ---------- empty state ---------- */
.equipo-empty__id { width: 100%; max-width: 420px; text-align: left; }
#equipoEmpty .readonly { background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
#equipoEmpty .readonly__v { text-align: left; }
#equipoEmpty .readonly__note { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-sm); }
#equipoEmpty .why { max-width: 44ch; text-align: left; }

/* ---------- what I share ---------- */
.equipo-share { display: grid; gap: var(--sp-1); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.equipo-share:first-child { padding-top: 0; border-top: 0; }
.equipo-share__name { font-size: var(--fs-md); font-weight: 700; overflow-wrap: anywhere; }
.equipo-share .btn { justify-self: start; margin-top: var(--sp-2); }
.equipo-share .inline-status:empty, #equipoNotice:empty, .why.inline-status:empty { display: none; }
#equipoNotice { display: grid; gap: var(--sp-3); }
#equipoNotice:empty { display: none; }

/* ---------- the dot of the rail and the dock: an invitation waits ---------- */
.nav-badge--invite { background: var(--info); }

/* ---------- the invite dialog ---------- */
#dlg-team-invite .field { gap: 8px; }
#dlg-team-invite .field__error { margin-top: 2px; }

/* the compat rule of components.css (:where(main) input[type="checkbox"] { width: 22px }) outranks .switch: put the real size back (the same line as every stage of Campaña) */
#view-equipo .switch { width: 52px; height: 32px; }

/* the lists of invitations: one column that can shrink, and a chip that wraps when the text is at 200 % (a long word never pushes the page sideways) */
.equipo .rows { grid-template-columns: minmax(0, 1fr); }
.equipo-row { min-width: 0; }
.equipo-row .chip { white-space: normal; max-width: 100%; }