/* Equipo and Proyectos screens. Reuses the tokens and .btn/.field of styles.css. */
[data-team], [data-projects] { padding: 0 var(--gutter) 40px; max-width: 760px; }
.admin-note { padding: 8px 0; }
.admin-section { padding: 16px 0 8px; }
.admin-section + .admin-section { border-top: 1px solid var(--line); margin-top: 8px; }
.admin-section > h2 { font-size: 1rem; margin-bottom: 10px; }

.admin-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.admin-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.admin-row:first-child { border-top: 0; }
.admin-who { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.admin-who strong, .admin-who small { overflow-wrap: anywhere; }
.admin-who small { font-size: 0.85rem; }
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-role { min-height: 38px; padding: 6px 10px; border-radius: var(--radius-control); border: 1px solid var(--line-strong); background: var(--navy); font-size: 0.92rem; }
.admin-role:focus { border-color: var(--accent); outline: none; }
.admin-rename { width: 100%; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-control); border: 1px solid var(--line-strong); background: var(--navy); font-size: 1rem; }
.admin-rename:focus { border-color: var(--accent); outline: none; }
.role-badge, .state-badge { font-size: 0.78rem; font-weight: 600; line-height: 1; padding: 5px 8px; border-radius: 5px; border: 1px solid var(--line-strong); color: var(--ink-soft); white-space: nowrap; }
.state-badge--on { color: var(--success); border-color: rgb(94 240 193 / 0.35); }
.state-badge--off { color: var(--muted); }

.admin-form { display: grid; gap: 12px; max-width: 420px; }
.admin-form .btn { justify-self: start; }
.field input[aria-invalid="true"] { border-color: var(--danger); }

.confirm { width: min(420px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-panel); background: var(--surface); color: var(--ink); }
.confirm::backdrop { background: rgb(2 3 20 / 0.7); }
.confirm-body { display: grid; gap: 10px; padding: 20px; }
.confirm-body h2 { font-size: 1.1rem; }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 6px; }

@media (max-width: 480px) {
  .admin-actions { width: 100%; }
  .admin-actions .btn, .admin-actions .admin-role { flex: 1 1 100%; width: 100%; }
  .admin-form .btn { justify-self: stretch; width: 100%; }
  .confirm-actions .btn { flex: 1 1 100%; }
}