/* Configuración — grid de tarjetas independientes (cuenta, contraseña,
   usuarios, sistema). Cada una es autocontenida, se apilan en mobile. */

.config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  max-width: 1180px;
}

.config-card--wide { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .config-grid { grid-template-columns: 1fr; }
}

.config-card {
  padding: var(--space-6);
}

.config-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.config-card-head .config-card-title { margin-bottom: 0; }

.config-card-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-heading);
}

.config-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.config-field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--text-base);
}
.config-field:last-child { border-bottom: none; padding-bottom: 0; }

.config-field-label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.config-card form .form-row { margin-top: 0; }
.config-card form .btn-primary { margin-top: var(--space-2); }

/* Tabla compacta de usuarios */
.usuarios-table td, .usuarios-table th { white-space: nowrap; }
.usuarios-table .cell-email { color: var(--color-text-secondary); }

.usuario-row-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.usuario-self-tag {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (max-width: 860px) {
  /* La tabla pasa a cards (ver components.css) — el nowrap forzado de
     arriba garantizaba desborde horizontal a este ancho (email + fecha +
     acción, todo en una sola línea sin poder bajar). */
  .usuarios-table td, .usuarios-table th { white-space: normal; }
  .usuario-row-actions { justify-content: flex-start; width: 100%; }

  /* Sin cancelar acá, .main-content-scroll llega a 40px de padding-top
     (components.css, nunca reseteado en esta página) y queda una franja
     del canvas por encima del header "hero" antes de la curva. .surface
     ya está en 0 acá (esta página no carga productos.css, que es la que
     le suma padding a .surface por debajo de 720px en otras páginas). */
  .main-content--surface .main-content-scroll { padding-top: 0; }
}