/* /funcionalidades/correo-de-la-organizacion/ — Organization email inside
   Settings. What pantallas-demo.css does not already draw: the settings shell
   and its sidebar (components/settings-shell.tsx), the four route tiles of
   "Qué sale desde dónde" (a bordered, lightly shaded box each: the purpose in
   small capitals, the address with its check, the channel it goes through),
   and the channel rows — the name with its default badge, the purposes as
   neutral badges, the status badge with the server's answer under it in the
   warning color, and the three icon buttons at the end. */

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

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

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

.pn-frame[data-screen="organization-email"] .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-email"] .st-nav-head:first-child { padding-top: 0; }

.pn-frame[data-screen="organization-email"] .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-email"] .st-nav-item em {
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.pn-frame[data-screen="organization-email"] .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-email"] .st-nav-item.is-on .st-nav-icon { color: var(--ac-accent); }

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

/* ---------- what leaves from where ---------- */

.pn-frame[data-screen="organization-email"] .oe-routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pn-frame[data-screen="organization-email"] .oe-route {
  padding: 10px 13px;
  border: 1px solid var(--ac-line);
  border-radius: 10px;
  background: #fafafb;
}

.pn-frame[data-screen="organization-email"] .oe-route-purpose {
  color: var(--ac-dim);
  font-size: 8.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pn-frame[data-screen="organization-email"] .oe-route-from {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: var(--ac-ink);
  font-size: 11px;
  font-weight: 550;
}

.pn-frame[data-screen="organization-email"] .oe-route-from span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-frame[data-screen="organization-email"] .oe-route-icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: var(--ac-good);
}

.pn-frame[data-screen="organization-email"] .oe-route-note {
  margin-top: 4px;
  color: var(--ac-mut);
  font-size: 9.5px;
}

/* ---------- the sending channels ---------- */

.pn-frame[data-screen="organization-email"] .oe-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.pn-frame[data-screen="organization-email"] .oe-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-email"] .oe-from {
  color: var(--ac-mut);
  font-size: 10.5px;
}

.pn-frame[data-screen="organization-email"] .oe-purposes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pn-frame[data-screen="organization-email"] .oe-inherited {
  color: var(--ac-dim);
  font-size: 9.5px;
}

.pn-frame[data-screen="organization-email"] .oe-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.pn-frame[data-screen="organization-email"] .oe-detail {
  color: #a16207;
  font-size: 9.5px;
  line-height: 1.35;
}

.pn-frame[data-screen="organization-email"] .oe-acts {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.pn-frame[data-screen="organization-email"] .oe-act {
  width: 13px;
  height: 13px;
  color: var(--ac-mut);
}

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