/* ==========================================================================
   Sesión, administración, auditoría e inicio de sesión.
   Usa exclusivamente los tokens de main.css para conservar la identidad visual.
   ========================================================================== */

/* Mientras se valida la sesión no se muestra la interfaz (evita ver secciones no autorizadas). */
body.is-loading .app { visibility: hidden; }
.boot-loader { display: none; }
body.is-loading .boot-loader {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  color: var(--muted);
  font-size: 13px;
}

/* ---------------------------------------------------------------- menú */
.nav-section {
  margin: 12px 10px 2px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.app.sidebar-collapsed .nav-section { visibility: hidden; height: 0; margin: 6px 0; }

.sidebar-foot { display: flex; flex-direction: column; gap: 2px; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  min-width: 0;
}
.user-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 700;
}
.user-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.user-info strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-info small { color: var(--muted); font-size: 11px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.app.sidebar-collapsed .user-chip { justify-content: center; padding: 8px 0; border-color: transparent; background: transparent; }
.app.sidebar-collapsed .user-info { display: none; }

/* --------------------------------------------------------------- roles */
.role-badge { font-weight: 600; letter-spacing: 0; }
.role-admin {
  color: var(--text);
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.18);
}
.role-operator {
  color: var(--muted);
  border-color: var(--border-hover);
  background: transparent;
}
.badge-warning {
  color: var(--warning);
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.12);
}
.user-info .role-badge { min-height: 16px; padding: 0 6px; font-size: 10px; }
.panel-header h2 .role-badge { margin-left: 6px; vertical-align: middle; font-size: 10px; }

.role-legend { display: grid; gap: 6px; margin-top: 14px; color: var(--muted); font-size: 12px; }
.role-legend p { margin: 0; display: flex; gap: 8px; align-items: baseline; }

/* -------------------------------------------------------------- tablas */
.data-table tr.is-muted td { color: var(--faint); }
.data-table tr.is-clickable { cursor: pointer; }
.data-table tr.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.data-table .meta { margin-top: 2px; }
.audit-desc { max-width: 460px; }
.loading-row { margin: 0; padding: 18px; text-align: center; color: var(--muted); font-size: 13px; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0; }
.pager .form-note { margin: 0; }
.audit-meta { max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; }

.inline-check { margin: 0; white-space: nowrap; }

/* ------------------------------------------------------------ usuarios */
.temp-password {
  display: block;
  margin: 10px 0;
  padding: 12px 14px;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-align: center;
  user-select: all;
}

/* ------------------------------------------------------- configuración */
.settings-layout { max-width: 1040px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.settings-stack { display: grid; gap: 12px; }
.stack-top { margin-top: 12px; }

/* Constructor de campos: columna extra para el valor por defecto. */
.field-builder-row { grid-template-columns: 1fr 1.1fr 0.8fr 1fr 0.9fr auto auto; }

[aria-busy="true"] { cursor: progress; opacity: 0.75; }

/* ============================================================ login */
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(circle at 50% -20%, rgba(var(--accent-rgb), 0.08), transparent 55%),
    var(--bg);
}
.auth-card {
  width: min(400px, 100%);
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.auth-card .brand { padding: 0; margin-bottom: 22px; }
.auth-card h1 { margin: 0 0 4px; font-size: 18px; font-weight: 650; letter-spacing: -0.02em; }
.auth-card .lead { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.auth-card .btn { width: 100%; justify-content: center; margin-top: 6px; }
.auth-error {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--error-rgb), 0.45);
  border-radius: var(--radius-sm);
  background: rgba(var(--error-rgb), 0.08);
  color: var(--error-text);
  font-size: 13px;
}
.auth-info {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13px;
}
.auth-foot { margin: 18px 0 0; color: var(--muted); font-size: 12px; text-align: center; }

@media (max-width: 860px) {
  .field-builder-row { grid-template-columns: 1fr; }
  .pager { flex-direction: column; align-items: stretch; }
  .inline-check { margin-top: 4px; }
}