/* The two pages of «Account» (/usuarios/ and /roles/): on top of editor.css, the search, the table of accounts (cards on a phone), the team, the log. */
.back { margin-bottom: 12px; }
.ac-card, .ac-search { margin-top: 16px; }
.ac-search label { margin-top: 0; }
.ac-search .row input { flex: 1 1 16rem; min-width: 0; }
.small { font-size: .82rem; margin: 4px 0 0; }
.mail { overflow-wrap: anywhere; }
.ac-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .92rem; }
.ac-table th { text-align: left; font-size: .8rem; font-weight: 600; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ac-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.ac-table tr:last-child td { border-bottom: 0; }
.ac-table select { max-width: 11rem; }
.role-now { margin-bottom: 6px; }
.role-pick { gap: 6px; }
.ac-pager { justify-content: flex-end; margin-top: 12px; }
.ac-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.ac-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; }
.ac-item p { margin: 6px 0 0; }
.chip { display: inline-block; max-width: 100%; font-size: .78rem; border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; margin: 2px 4px 2px 0; color: var(--muted); overflow-wrap: anywhere; vertical-align: middle; }
.chip.bad { color: var(--red); border-color: rgba(240, 57, 47, .5); }
.chip.warn { color: var(--yellow); border-color: rgba(242, 201, 76, .5); }
.chip.role-owner { color: #fff; background: rgba(240, 57, 47, .22); border-color: rgba(240, 57, 47, .6); }
.chip.role-admin { color: #8fc0ff; border-color: rgba(42, 134, 255, .7); }
.chip.role-editor, .chip.role-ventas, .chip.role-soporte { color: var(--green); border-color: rgba(34, 177, 76, .55); }
button.tiny-act { padding: 5px 12px; }

/* a phone: each account is a card, each fact with its label */
@media (max-width: 640px) {
  .ac-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ac-table, .ac-table tbody, .ac-table tr, .ac-table td { display: block; width: 100%; }
  .ac-table tr { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; margin-bottom: 10px; }
  .ac-table td { border: 0; padding: 4px 0; }
  .ac-table td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; color: var(--muted); }
  .ac-table select { max-width: 100%; flex: 1 1 auto; }
  .ac-pager { justify-content: space-between; }
}