/* Personal (batch BO, chunk bo5; BO-2.0-DESIGN 4.1, 4.7, 5.2, 5.3, 7). bo3 created this file with the matrix rules of
   web/manage/app.css at HEAD 6ee02b6; bo5 owns it. Wholly inside @layer app, tokens only. The Management floor classes
   (bo-btn, bo-input, bo-check and the rest) keep their one source in web/platform/shell.css and editor.css: no rule
   here names them (web/tests/manage.test.mjs).
   - The permission matrix (Permisos on wide and medium): inside the bounded wrapper of editor.css (.bo-table-wrap
     .is-bounded, its own scroller), the header row sticks at the wrapper's top and the member column at its left
     (design 5.3, BO-NOTES round 1 item 7), the corner cell above both.
   - Equipo and Dispositivos: the head row with the waiting line and Nueva persona, the panel's titled blocks (16 px
     headings, design 5.2), the notes, warnings and field messages, the create panel's form. */
@layer app {
  .perm-wrap { margin: var(--space-2) 0; }
  .perm-matrix { border-collapse: separate; border-spacing: 0; font-size: var(--font-size-200); }
  .perm-matrix th, .perm-matrix td { border-bottom: 1px solid var(--panel); border-right: 1px solid var(--panel);
    padding: var(--space-2) var(--space-3); vertical-align: middle; text-align: center; background: var(--surface); }
  .perm-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); font-weight: 700; max-width: 120px; }
  .perm-matrix .perm-who { position: sticky; left: 0; z-index: 1; text-align: left; min-width: 220px; }
  .perm-matrix thead th:first-child { left: 0; z-index: 3; text-align: left; }
  .perm-who .bo-field { margin: var(--space-1) 0; }
  .perm-note { display: block; font-weight: 400; color: var(--text-muted); }
  .perm-fixed { color: var(--text-muted); }
  .perm-mark { margin-top: var(--space-1); }
  .perm-mark.is-custom { outline: 2px solid var(--accent); outline-offset: 1px; }
  .perm-actions { min-width: 200px; text-align: left; }

  .staff-title { margin: var(--space-3) 0 var(--space-2); font-size: var(--font-size-300); font-weight: 700; }
  .staff-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
    margin: var(--space-3) 0; }
  .staff-waiting { margin: 0; font-weight: 700; }
  .staff-new { margin-left: auto; text-decoration: none; }
  .staff-list { min-width: 0; }
  .staff-changed { color: var(--text-muted); font-size: var(--font-size-100); font-weight: 400; }

  .staff-block { margin: 0 0 var(--space-4); }
  .staff-block-title { margin: var(--space-3) 0 var(--space-2); font-size: var(--font-size-300); font-weight: 700;
    scroll-margin-top: calc(var(--bo-sticky-top) + 16px); }
  .staff-line { margin: var(--space-2) 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .staff-perms { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-2) 0; }
  .staff-note { margin: var(--space-1) 0; color: var(--text-muted); font-size: var(--font-size-100); }
  .staff-warn { margin: var(--space-2) 0; padding-left: var(--space-2); border-left: var(--size-meter) solid var(--accent); font-weight: 700; }
  .staff-error { margin: 0 0 var(--space-2); padding-left: var(--space-2); border-left: var(--size-meter) solid var(--accent);
    font-size: var(--font-size-200); }
  .staff-result { margin: var(--space-3) 0; }
  .staff-create { display: flex; flex-direction: column; }
  .staff-create-actions, .dev-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; }

  .dev-label { color: var(--text-muted); min-width: 110px; }
  .dev-caps { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--panel); border-radius: var(--radius-s);
    display: flex; flex-direction: column; gap: var(--space-1); }
  .dev-caps legend { padding: 0 var(--space-1); font-size: var(--font-size-200); }
}