/* OWNER CONTROL CENTER — extensión STAFF ON DUTY / NameTags. Usa las variables de app.css. */
.badge.duty-on { border-color: rgba(56, 193, 114, .55); color: #b9f0cf; background: rgba(56, 193, 114, .10); }
.badge.duty-on::before { background: var(--ok); box-shadow: 0 0 0 3px rgba(56, 193, 114, .18); }
.badge.duty-off { color: var(--muted); }
.badge.duty-off::before { background: var(--muted); }
.badge.duty-dc { color: var(--faint); border-color: #202024; background: #0c0c0e; }
.badge.duty-dc::before { background: #3a3a40; }
tr.duty-row-on td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
tr.duty-row-disconnected td { color: var(--faint); }
.duty-dc-text { color: var(--faint); }
.duty-clock { color: #b9f0cf; }
.occx-duty .panel-head { flex-wrap: wrap; row-gap: 4px; }
.occx-duty .panel-head h2 { white-space: nowrap; }

.occx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.occx-card { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.occx-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.occx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.occx-colorline { display: flex; align-items: center; gap: 10px; min-height: 42px; }
.occx-color { width: 46px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-s); background: #0a0a0b; cursor: pointer; }
.occx-color:disabled { opacity: .45; cursor: not-allowed; }
.occx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.occx-checks { gap: 10px; }
.occx-tag { margin-top: 14px; border: 1px dashed var(--line); border-radius: var(--radius-m); padding: 14px; text-align: center;
  background: radial-gradient(ellipse at center, #1d2a1f 0%, #0b0f0c 70%); }
.occx-tag > div { font-weight: 800; letter-spacing: .02em; line-height: 1.25; text-shadow: 0 0 2px #000, 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.occx-l1 { color: #fff; font-size: 16px; }
.occx-l2 { font-size: 15px; }
.occx-l3 { color: #00a6ff; font-size: 14px; }
@media (max-width: 860px) {
  .occx-grid, .occx-split { grid-template-columns: minmax(0, 1fr); }
}