/* ============================================================
   Arketiz — pagina de acceso (login, cambio de contrasena forzado
   y consola de superadmin). Misma estetica que el login del MVP:
   tarjeta centrada con destello de acento (safety orange) y el
   wordmark que se adapta a tema claro/oscuro. Reutiliza los
   tokens de tokens.css; los paneles/botones de la consola vienen
   de components.css.
   ============================================================ */

/* ---- fondo + tarjeta centrada (login / cambio de contrasena) ---- */
.auth-wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-8);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--accent-soft-bg) 0%, transparent 55%),
    var(--bg-app);
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-9) var(--space-8) var(--space-8);
  box-shadow: var(--shadow-dropdown);
}
/* Logotipo (isotipo PNG) centrado en las tarjetas de acceso. */
.auth-brand { display: flex; justify-content: center; margin-bottom: var(--space-6); }
.brand-lockup { height: 85px; width: auto; }
.auth-card h1 {
  font-size: var(--text-lg); line-height: var(--text-lg-lh);
  font-weight: 700; letter-spacing: var(--tracking-heading);
  text-align: center; margin-bottom: var(--space-2);
}
.auth-card p.sub {
  font-size: var(--text-xs); color: var(--text-muted);
  text-align: center; margin-bottom: var(--space-8);
}
.auth-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.auth-field label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
.auth-field input {
  height: 38px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.auth-btn {
  width: 100%; height: 40px;
  background: var(--accent); color: var(--text-on-accent);
  border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 700;
  letter-spacing: var(--tracking-heading);
  margin-top: var(--space-2);
}
.auth-btn:hover { background: var(--accent-strong); }
:root[data-theme="dark"] .auth-btn:hover { background: #5b7cff; }

/* el <p> de error solo ocupa espacio cuando tiene texto */
.auth-error {
  background: var(--status-danger-bg);
  border: 1px solid var(--status-danger-border);
  color: var(--status-danger);
  font-size: var(--text-xs);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
}
.auth-error:empty { display: none; }

.auth-hint {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  line-height: 1.7;
}
.auth-hint b { color: var(--text-secondary); }

/* ---- consola de superadmin (layout de escritorio) --------------- */
.ops-wrap {
  min-height: 100dvh;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-8);
}
.ops-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); margin-bottom: var(--space-7);
}
/* Logotipo (lockup horizontal, PNG) en la consola de superadmin. */
.ops-head .brand { display: flex; align-items: center; gap: var(--space-5); }
.brand-lockup--sm { height: 30px; width: auto; }
.ops-head .who { font-size: var(--text-xs); color: var(--text-muted); }
/* Rejilla de escritorio: fila superior (estado + alta) en 2 columnas; las tablas
   (usuarios, trazabilidad) ocupan el ancho completo con .panel--wide. */
.ops-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
}
.ops-stack .panel { margin-bottom: 0; }
.ops-stack .panel--wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .ops-stack { grid-template-columns: 1fr; } }
.ops-pre {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  overflow: auto;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.ops-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-5); }
.ops-out { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-5); word-break: break-word; }

/* Req 4/5: acciones por fila, botones compactos, trazabilidad, modal de edicion */
.ops-row-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.btn-xs { padding: 3px 8px; font-size: var(--text-2xs); line-height: 1.4; }
.traza-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-5); }
@media (max-width: 860px) { .traza-cols { grid-template-columns: 1fr; } }

.ops-modal-scrim {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--bg-scrim);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--space-8) var(--space-5); overflow-y: auto;
}
.ops-modal {
  width: 100%; max-width: 520px;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-dropdown);
}
.ops-modal .panel__header { display: flex; align-items: center; justify-content: space-between; }