/* /funcionalidades/administracion-de-la-organizacion/ — the team inside
   Settings. What pantallas-demo.css does not already draw: the settings
   shell and its sidebar (components/settings-shell.tsx); the team rows — the
   avatar beside the name and the job title, the role as the small dropdown an
   admin changes it with, the open tasks with their overdue badge, the three
   icon buttons; the accent badge the product uses for "Tú", for the admin
   role and for an organization's agent; and the agents card's hint. */

.pn-frame[data-screen="organization-admin"] .st-shell {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* ---------- the settings sidebar ---------- */

.pn-frame[data-screen="organization-admin"] .st-nav {
  display: flex;
  flex: 0 0 150px;
  flex-direction: column;
  gap: 1px;
}

.pn-frame[data-screen="organization-admin"] .st-nav-head {
  padding: 10px 8px 4px;
  color: var(--ac-dim);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pn-frame[data-screen="organization-admin"] .st-nav-head:first-child { padding-top: 0; }

.pn-frame[data-screen="organization-admin"] .st-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  color: var(--ac-mut);
  font-size: 10.5px;
  white-space: nowrap;
}

.pn-frame[data-screen="organization-admin"] .st-nav-item em {
  overflow: hidden;
  text-overflow: ellipsis;
}

.pn-frame[data-screen="organization-admin"] .st-nav-icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: var(--ac-dim);
}

.pn-frame[data-screen="organization-admin"] .st-nav-item.is-on {
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
  color: var(--ac-ink);
  font-weight: 550;
}

.pn-frame[data-screen="organization-admin"] .st-nav-item.is-on .st-nav-icon { color: var(--ac-accent); }

.pn-frame[data-screen="organization-admin"] .st-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.pn-frame[data-screen="organization-admin"] .md-head-side { align-items: flex-start; }

/* The product's accent badge: the accent on its soft tint. */
.pn-frame[data-screen="organization-admin"] .pn-badge.is-accent {
  background: rgb(70 117 87 / 10%);
  color: var(--ac-accent);
}

/* ---------- the team ---------- */

.pn-frame[data-screen="organization-admin"] .md-table td {
  padding-top: 8px;
  padding-bottom: 8px;
}

.pn-frame[data-screen="organization-admin"] .md-tools .md-select em { max-width: none; }

.pn-frame[data-screen="organization-admin"] .ta-member {
  display: flex;
  align-items: center;
  gap: 9px;
}

.pn-frame[data-screen="organization-admin"] .ta-member .pn-ava { flex-shrink: 0; }

.pn-frame[data-screen="organization-admin"] .ta-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pn-frame[data-screen="organization-admin"] .ta-name {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pn-frame[data-screen="organization-admin"] .ta-name b {
  overflow: hidden;
  color: var(--ac-ink);
  font-size: 11px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-frame[data-screen="organization-admin"] .ta-who em {
  overflow: hidden;
  color: var(--ac-mut);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-frame[data-screen="organization-admin"] .ta-select .md-select {
  height: 23px;
  padding: 0 8px;
  font-size: 10px;
}

.pn-frame[data-screen="organization-admin"] .ta-tasks {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.pn-frame[data-screen="organization-admin"] .ta-tasks b {
  color: var(--ac-ink);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.pn-frame[data-screen="organization-admin"] .ta-acts {
  display: flex;
  justify-content: flex-end;
  gap: 11px;
}

.pn-frame[data-screen="organization-admin"] .ta-act {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  color: var(--ac-mut);
}

.pn-frame[data-screen="organization-admin"] .ta-act.is-danger { color: var(--ac-bad); }

/* ---------- the agents ---------- */

.pn-frame[data-screen="organization-admin"] .ta-link {
  color: var(--ac-accent);
  font-size: 10.5px;
  font-weight: 550;
}

.pn-frame[data-screen="organization-admin"] .ta-hint {
  padding: 8px 16px 10px;
  color: var(--ac-dim);
  font-size: 9.5px;
  line-height: 1.45;
}

.pn-frame[data-screen="organization-admin"] .ta-agent {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pn-frame[data-screen="organization-admin"] .ta-agent b {
  color: var(--ac-ink);
  font-size: 11px;
  font-weight: 450;
}

.pn-frame[data-screen="organization-admin"] .ta-ink { color: var(--ac-ink); font-size: 11px; }
.pn-frame[data-screen="organization-admin"] .ta-mut { color: var(--ac-mut); font-size: 11px; }