/* E1b: la consola del operador. Solo tokens del sistema de diseño (design-system.css); claro y oscuro salen de data-theme. */
.op-body { margin: 0; background: var(--gray-50); color: var(--gray-800); font-family: var(--font-body); }
.op-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); padding: var(--space-3) var(--space-6); background: var(--white); border-bottom: 1px solid var(--gray-200); }
.op-brand { font-family: var(--font-display); color: var(--gold-600); text-decoration: none; font-size: 1.15rem; }
.op-nav { display: flex; gap: var(--space-4); flex: 1; }
.op-nav a, .op-main a { color: var(--blue-500); }
.op-actions { display: flex; gap: var(--space-2); }
.op-main { max-width: 1180px; margin: 0 auto; padding: var(--space-6); }
.op-main h1 { font-family: var(--font-display); font-weight: 400; margin: 0 0 var(--space-4); color: var(--gray-900); }
.op-main h2 { margin: var(--space-8) 0 var(--space-2); color: var(--gray-900); font-size: 1.1rem; }
.op-note { color: var(--gray-500); margin: 0 0 var(--space-3); }
.op-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.op-narrow { max-width: 420px; margin: var(--space-10) auto; }
.op-field { display: block; margin-bottom: var(--space-4); font-weight: 600; color: var(--gray-700); }
.op-field input, .op-field select { display: block; width: 100%; box-sizing: border-box; margin-top: var(--space-1); padding: var(--space-2) var(--space-3); border: 1px solid var(--gray-300); border-radius: var(--r-md); background: var(--white); color: var(--gray-800); font: inherit; min-height: 40px; }
.op-btn { display: inline-block; padding: var(--space-2) var(--space-4); border: 1px solid var(--gold-500); border-radius: var(--r-md); background: var(--gold-500); color: var(--on-accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 40px; box-sizing: border-box; }
.op-main a.op-btn { color: var(--on-accent); }
.op-btn-quiet, .op-main a.op-btn-quiet { background: transparent; color: var(--gray-700); border-color: var(--gray-300); }
.op-btn:focus-visible, .op-field input:focus-visible, .op-field select:focus-visible, a:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }
.op-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.op-search { display: flex; gap: var(--space-2); align-items: flex-end; margin-bottom: var(--space-4); }
.op-search .op-field { flex: 1; margin-bottom: 0; }
.op-error, .op-warning, .op-ok { padding: var(--space-3) var(--space-4); border-radius: var(--r-md); margin: 0 0 var(--space-4); }
.op-error { background: var(--red-100); color: var(--red-600); border: 1px solid var(--red-border); }
.op-warning { background: var(--orange-100); color: var(--gray-800); border: 1px solid var(--orange-border); }
.op-warning p { margin: 0 0 var(--space-1); }
.op-ok { background: var(--green-100); color: var(--green-600); border: 1px solid var(--green-border); }
.op-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-md); }
.op-table th { text-align: left; font-size: .8rem; color: var(--gray-500); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--gray-200); }
.op-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--gray-100); vertical-align: top; overflow-wrap: anywhere; }
.op-on { color: var(--green-600); font-weight: 600; }
.op-off { color: var(--gray-500); }
.op-tag { display: inline-block; font-size: .72rem; color: var(--gray-500); border: 1px solid var(--gray-200); border-radius: var(--r-pill); padding: 0 var(--space-2); }
.op-facts { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0 0 var(--space-4); }
.op-facts dt { font-size: .8rem; color: var(--gray-500); }
.op-facts dd { margin: 0; font-weight: 600; color: var(--gray-800); }
.op-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-3); color: var(--gray-500); }

/* Móvil (375 px): cada fila es una tarjeta con la etiqueta de su columna. */
@media (max-width: 720px) {
    .op-header, .op-main { padding: var(--space-3) var(--space-4); }
    .op-nav { flex-basis: 100%; order: 3; }
    .op-search { flex-direction: column; align-items: stretch; }
    .op-table, .op-table tbody, .op-table tr, .op-table td { display: block; width: 100%; box-sizing: border-box; }
    .op-table { border: 0; background: transparent; }
    .op-table thead { display: none; }
    .op-table tr { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-md); margin-bottom: var(--space-3); padding: var(--space-2) 0; }
    .op-table td { border: 0; padding: var(--space-1) var(--space-3); }
    .op-table td::before { content: attr(data-label); display: block; font-size: .72rem; color: var(--gray-500); }
    .op-btn { width: 100%; text-align: center; }
    .op-actions { width: 100%; }
    .op-actions form { flex: 1; }
}