/* ==========================================================================
   admin.css — Estilos propios del front de Administración (complementa app.css).
   Usa los tokens de proratto-tokens.css.
   ========================================================================== */

/* Sidebar: items de navegación */
#sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--jd-gray-900); cursor: pointer;
  font: inherit; text-align: left;
}
.nav-item:hover { background: var(--jd-gray-100); }
.nav-item.active { background: var(--jd-green); color: #fff; }
.nav-item.active .ico { color: #fff; }
.nav-item .ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--jd-gray-700); }
.nav-item .nav-txt { flex: 1; }
.nav-item .nav-owner { font-size: 11px; opacity: .6; }

.side-user { padding: 12px; border-bottom: 1px solid var(--jd-gray-200); }
.side-user .su-nombre { font-weight: 700; color: var(--jd-gray-900); }
.side-user .su-mail { font-size: 12px; color: var(--jd-gray-500); word-break: break-all; }

/* Cabecera de sección (búsqueda + acción) */
.sec-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sec-head .aud-search { flex: 1; min-width: 220px; }

/* Búsqueda (por si app.css no la trae) */
.aud-search input {
  width: 100%; max-width: 460px; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--jd-gray-300); border-radius: var(--radius);
  font-size: 14px; background: var(--jd-white); color: var(--jd-gray-900);
}
.aud-search input:focus { outline: none; border-color: var(--jd-green); }

/* Formularios */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 12px 0; }
.fld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--jd-gray-700); }
.fld input, .fld select {
  padding: 9px 10px; border: 1px solid var(--jd-gray-300); border-radius: var(--radius-sm);
  background: var(--jd-white); color: var(--jd-gray-900); font: inherit;
}
.fld input:focus, .fld select:focus { outline: none; border-color: var(--jd-green); }
.chk { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; color: var(--jd-gray-900); }
.form-actions { display: flex; gap: 8px; margin-top: 8px; }
.form-msg { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; }
.form-msg.ok { background: var(--res-ok-bg); color: var(--res-ok); }
.form-msg.bad { background: var(--res-bad-bg); color: var(--res-bad); }

/* Chips (roles, etiquetas) */
.chip {
  display: inline-block; padding: 2px 8px; margin-right: 4px; border-radius: 999px;
  font-size: 11px; background: var(--jd-gray-100); color: var(--jd-gray-700);
}

/* Botón secundario */
.btn-ghost {
  padding: 9px 14px; border: 1px solid var(--jd-gray-300); border-radius: var(--radius-sm);
  background: transparent; color: var(--jd-gray-900); cursor: pointer; font: inherit;
}
.btn-ghost:hover { background: var(--jd-gray-100); }