/* ============================================================
   Vantia — 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);
}
.auth-brand { display: flex; justify-content: center; margin-bottom: var(--space-6); }
.auth-brand img {
  height: 64px; width: auto;
  mix-blend-mode: var(--logo-blend-mode); filter: var(--logo-filter);
}
.auth-card h1 {
  font-size: var(--text-lg); line-height: var(--text-lg-lh);
  font-weight: 600; 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-strong); color: var(--text-on-accent);
  border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600;
  margin-top: var(--space-2);
}
.auth-btn:hover { background: #9a3412; }
:root[data-theme="dark"] .auth-btn:hover { background: #ea580c; }

/* 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 -------------------------------------- */
.ops-wrap {
  min-height: 100dvh;
  max-width: 720px;
  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);
}
.ops-head .brand { display: flex; align-items: center; gap: var(--space-5); }
.ops-head .brand img {
  height: 32px; width: auto;
  mix-blend-mode: var(--logo-blend-mode); filter: var(--logo-filter);
}
.ops-head .who { font-size: var(--text-xs); color: var(--text-muted); }
.ops-stack { display: flex; flex-direction: column; gap: var(--space-6); }
.ops-stack .panel { margin-bottom: 0; }
.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; }